TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-10 15:24: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] 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 >}} {{< code file=contents/example.md lang=markdown >}}
Albert Einstein’s theory of special relativity expresses {{</* plotly */>}}
the fact that mass and energy are the same physical entity {
and can be changed into each other. "data": [
{
{{</* math */>}} "x": ["giraffes", "orangutans", "monkeys"],
$$ "y": [20, 14, 23],
E=mc^2 "type": "bar"
$$ }
{{</* /math */>}} ],
}
In the equation, the increased relativistic mass (m) of a {{</* /plotly */>}}
body times the speed of light squared (c2) is equal to
the kinetic energy (E) of that body.
{{< /code >}} {{< /code >}}
The shortcode is simple: The shortcode is simple:
{{< code file=layouts/shortcodes/math.html >}} {{< code file=layouts/shortcodes/plotly.html >}}
{{ trim .Inner "\r\n" }} {{ $id := printf "plotly-%02d" .Ordinal }}
<div id="{{ $id }}"></div>
<script>
Plotly.newPlot(document.getElementById({{ $id }}), {{ .Inner | safeJS }});
</script>
{{< /code >}} {{< /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 >}} {{< code file=layouts/baseof.html >}}
<head> <head>
... ...
{{ if .HasShortcode "math" }} {{ if .HasShortcode "plotly" }}
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script src="https://cdn.plot.ly/plotly-2.28.0.min.js"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
{{ end }} {{ end }}
... ...
</head> </head>