Hugoのshortcodeについて

Shortcodeとは

HugoにおいてはMarkdown記法でサイトの内容を構築することができるが、ページの構成によってはMarkdownでは書き表せない要素（例えばなど）もあり、その場合は生のHTMLを加えることになりソースコードは煩雑になってしまう。 そこでHugoではそれらの機能をShortcodeとして実装することで、ソースコードからシンプルにこれらの機能を呼び出して使用することが出来るようになっている。 なおShortcodeはテンプレートファイルからは呼び出すことができない。 いくつかのShortcodeはビルトインとして実装されている他、自分で新たなShortcodeを定義して使うことも出来る。詳しくは参考の公式ドキュメントを見ていただきたい。

使用例

頻繁に使いそうなものをピックアップして紹介する。すべてのShortcodeについては以下の公式ドキュメントを（略

figure

HTMLのfigureタグに相当するものを埋め込む。引数にはtitleやsrcなどを渡す。

コード

{{< figure src="/Lab-Web/images/lab/piyoko_1.jpg" title="piyoko" height=400 width=400 >}}

出力

piyoko

highlight

文章にハイライトをつける。プログラムコードの表示などに便利でこのページにおいても使用している。
ちなみに閉じタグも必要となる。

コード

{{< highlight code>}}aiueo{{< /highlight  >}}

出力

aiueo

ref, relref

それぞれ絶対パス、相対パスでリンクを指定できる。

コード

{{/* ref "links/" */>}}
{{< relref "members" >}}

出力

https://kyushu-univ-koide-lab.github.io/Lab-Web/links/
/Lab-Web/members/

tweet

ツイートの投稿を埋め込むことができる。ツイ廃にも優しい仕様

コード

{{/* tweet 1453110110599868418 */>}}

出力

参考

公式ドキュメント（英語）
Shortcodeのエスケープ処理