TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-08 14:14:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

Change HasShortcode example

Browse Source
This commit is contained in:
Joe Mooring 2024-01-26 10:47:26 -08:00 committed by GitHub
parent d47c3a6854
commit fd2deeddd1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
content/en/methods/page/HasShortcode.md
View File

@ -9,41 +9,41 @@ action:
signatures: [PAGE.HasShortcode NAME]
---
By example, let's use [MathJax] to render a LaTeX mathematical expression:
By example, let's use [Plotly] to render a chart:
[MathJax]: https://www.mathjax.org/
[Plotly]: https://plotly.com/javascript/
{{< code file=contents/physics/lesson-1.md lang=markdown >}}
Albert Einstein’s theory of special relativity expresses
the fact that mass and energy are the same physical entity
and can be changed into each other.
{{</* math */>}}
$$
E=mc^2
$$
{{</* /math */>}}
In the equation, the increased relativistic mass (m) of a
body times the speed of light squared (c2) is equal to
the kinetic energy (E) of that body.
{{< code file=contents/example.md lang=markdown >}}
{{</* plotly */>}}
{
"data": [
{
"x": ["giraffes", "orangutans", "monkeys"],
"y": [20, 14, 23],
"type": "bar"
}
],
}
{{</* /plotly */>}}
{{< /code >}}
The shortcode is simple:
{{< code file=layouts/shortcodes/math.html >}}
{{ trim .Inner "\r\n" }}
{{< code file=layouts/shortcodes/plotly.html >}}
{{ $id := printf "plotly-%02d" .Ordinal }}
<div id="{{ $id }}"></div>
<script>
Plotly.newPlot(document.getElementById({{ $id }}), {{ .Inner | safeJS }});
</script>
{{< /code >}}
Now we can selectively load the required CSS and JavaScript on pages that call the "math" shortcode:
Now we can selectively load the required JavaScript on pages that call the "plotly" shortcode:
{{< code file=layouts/baseof.html >}}
<head>
...
{{ if .HasShortcode "math" }}
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
{{ if .HasShortcode "plotly" }}
<script src="https://cdn.plot.ly/plotly-2.28.0.min.js"></script>
{{ end }}
...
</head>