golang, hugo
Shortcode で必要な JavaScript や CSS を head で読み込みたい
Hugo ではなにかカスタマイズした機能を記事内に入れたい場合、Shortcodes | Hugo が便利だ。
このブログでも mermaid.js を使えるようにしたり、アフィリエイトリンクを記事内に入れたいケースで独自の Shortcode を定義している。
1
2
3
4
| <!-- layouts/shortcodes/mermaid.html の例 -->
<div class="mermaid" align="{{ if .Get " align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
{{ safeHTML .Inner }}
</div>
|
便利な shortcode だが、その shortcode で必要な JavaScript を head で設定したくなる。
1
2
3
4
5
6
7
8
9
10
11
12
| <!-- これだと 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 を読み込むことができる。
1
2
3
4
5
6
7
8
9
| {{ 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 を参照されたし。