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