Hugoのshortcodesを用いてサイトにスライドなどを埋め込む

Hugoではshortcodesを用いることで, 独自のコードを展開して任意のHTMLを埋め込むことができる. これを用いてスライドなどを埋め込む方法を紹介する.

shortcodesの詳細は公式ドキュメントを見るとよい.

shortcodesの仕組みについて

まずshortcodesの仕組みについて述べる. shortcodesは以下の様な書式で記述される.

{{% hoge a b %}}c{{% /hoge %}}
{{% fuga a="A" b="B" %}}d{{% /fuga %}}
{{% hoge a b %}}

1行目の例では, 独自のshortcodeshogeを呼び出している. ここで, abのように名前を省いてパラメータを渡すことができる. このパラメータは, テンプレート内では{{ index .Params 0 }}, {{ index .Params 1 }}という形で利用することができる. また, タグ内の文字列は{{ .Inner }}により利用することができる.

また, shortcodesでは2行目の例のように, HTMLの属性のようにも引数を渡すことができる. {{ .Get "a" }}を用いるとテンプレート内で利用できる.

3行目の例のように, 閉じタグを省くこともできる.

独自のshortcodesに対応するテンプレートは, layouts/shortcodes/以下の{shortcode}.htmlとなる.

shortcodesを用いてSpeaker Deckのスライドを埋め込む

shortcodesを用いて実際にSpeaker Deckのスライドを埋め込んでみる. 以下のshortcodeを記述すると, スライドを埋め込めるようにする.

{{% speakerdeck 44129b9054c901328b89221e99b278fe %}}

layouts/shortcodes/speakerdeck.htmlを以下のように記述する. 記述するHTMLはスライドの埋め込みタグを参考にする.

<script async class="speakerdeck-embed" data-id="{{ index .Params 0 }}" src="//speakerdeck.com/assets/embed.js"></script>

実際に記述すると, 以下のようになる.

便利.

ちなみに自分は, このようなshortcodeを用意している.

渋谷で働くプログラマ。C#をメインに、趣味でGolangとPHPを書きます。スーパーハカーになるべく日々頑張ってます。