Merge commit '9b0050e9aabe4be65c78ccf292a348f309d50ccd' as 'docs'

``` git subtree add --prefix=docs/ https://github.com/gohugoio/hugoDocs.git master --squash ``` Closes #11925
2025-08-25 22:00:58 +02:00 · 2024-01-27 10:48:33 +01:00
parent fc7de7136a 9b0050e9aa
commit 5fd1e74903
1158 changed files with 64103 additions and 0 deletions
--- a/docs/content/en/methods/page/HasShortcode.md
+++ b/docs/content/en/methods/page/HasShortcode.md
@@ -0,0 +1,50 @@
+---
+title: HasShortcode
+description: Reports whether the given shortcode is called by the given page.
+categories: []
+keywords: []
+action:
+  related: []
+  returnType: bool
+  signatures: [PAGE.HasShortcode NAME]
+---
+
+By example, let's use [Plotly] to render a chart:
+
+[Plotly]: https://plotly.com/javascript/
+
+{{< 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/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 JavaScript on pages that call the "plotly" shortcode:
+
+{{< code file=layouts/baseof.html  >}}
+<head>
+  ...
+  {{ if .HasShortcode "plotly" }}
+    <script src="https://cdn.plot.ly/plotly-2.28.0.min.js"></script>
+  {{ end }}
+  ...
+</head>
+{{< /code >}}