hugoのshortcodesを使う＆自作する

hugoでは，markdownに独自のhtmlを入れたい時，shortcodesを使います． htmlタグを書くというやり方もありますが、partialなどは使えません．

shortcodesは，jsxをmarkdownに書くmdxみたいなものですね．

組み込みshortcodes

hugoの組み込みshortcodesもたくさんあるので，目的にマッチするものがあればそれを使用した方が楽です．

画像を表示するものであれば，figureがあります．

markdownでshotcodesを利用する時は，{{</* ここに書く */>}}のように書きます．

mdに記載すれば，すぐに利用できます．

{{</* figure src="/media/spf13.jpg" title="Steve Francia" */>}}

自作imgタグ

カスタマイズしたい時は，自作することもできます．

自作する時は，layouts/shortcodes/以下にhtmlファイルを作ります． 自作といっても，widthとheightを付けたimgタグの例．

layouts/shortcodes/img.html

<img alt="{{ .Get "title" }}" src="{{ .Get "src" }}" width="{{ .Get "width" }}" height="{{ .Get "height" }}"/>

.Get "xxx"でパラメータを展開できます． {{ $title := .Get "title }}"とすると，変数{{ $title }}として利用できます．

markdownで呼ぶ場合

{{</* img src="/img/fig.png" title="画像です" width="800" height="500" */>}}

shortcodes/ファイル名.htmlのファイル名部分で呼び出します．今回はファイル名がimgです