Shortcode で必要な JavaScript や CSS を head で読み込みたい
Hugo ではなにかカスタマイズした機能を記事内に入れたい場合、Shortcodes | Hugo が便利だ。
このブログでも mermaid.js を使えるようにしたり、アフィリエイトリンクを記事内に入れたいケースで独自の Shortcode を定義している。
<!-- layouts/shortcodes/mermaid.html の例 -->
<div class="mermaid" align="{{ if .Get " align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
{{ safeHTML .Inner }}
</div>
便利な shortcode だが、その shortcode で必要な JavaScript を head で設定したくなる。
<!-- これだと shortcode を複数利用していたら、複数回 js を取得することになるので、 shortcode として定義したくない -->
<script defer src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
// runs after defer
mermaid.initialize({ startOnLoad: true });
});
</script>
<div class="mermaid" align="{{ if .Get " align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
{{ safeHTML .Inner }}
</div>
HasShortcode を head 内で使う
head 内で、下記のように記載することで、post かつ mermaid Shortcodeを使っている場合に JavaScript を読み込むことができる。
{{ if and (eq .Type "post") (.HasShortcode "mermaid") }}
<script defer src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
// runs after defer
mermaid.initialize({ startOnLoad: true });
});
</script>
{{ end }}
HasShortcode | Hugo を参照されたし。