HugoでShortcode（ショートコード）を使用する方法

Hugoのショートコードとは

Hugoのショートコードは、カスタムテンプレートを呼び出すコンテンツファイル内のシンプルなスニペットです。

Hugoの記事はMarkdown形式で記載しますが、ショートコードを使用するとMarkdown記法にない文字の装飾（文字色をつける）や動画の埋め込みなどを行えます。

ショートコードの概要

HugoのショートコードはHTMLファイルで作成し、作成したHTMLファイルをlayouts/shortcodesフォルダーに配置します。

ショートコード名は、ファイル名から拡張子（.html）を除いた名前と同じになります。

たとえば、layouts/shortcodes/myshortcode.htmlは、{{< myshortcode >}}という表記で呼び出します。

ショートコードの作成例

文字色を赤にするショートコード

layouts/shortcodesフォルダーにfont_color_red.htmlを作成します。
{{ .Inner }}はショートコードで囲った内部のコンテンツを表示するメソッドです。

<span style="color: red">{{ .Inner }}</span>

Markdown記事でショートコードを使用します。
ショートコード名は拡張子を除いたfont_color_redとなります。

文字色黒
{{< font_color_red >}}文字色赤{{< /font_color_red >}}
文字色黒

HTMLを出力すると、ショートコードが展開されます。

<p>
  文字色黒<br>
  <span style="color: red">文字色赤</span><br>
  文字色黒
</p>

表示結果

パラメーター（引数）をとるショートコード

前述のショートコードでは、文字色を赤くできますが、別の色にしたい場合はショートコードを別途作成する必要があります。

.Getメソッドを使用するとパラメーターを取得できるので、1つのショートコードで色を変更できるようになります。

以下は、.Getメソッドを使用してcolorを取得するサンプルです。

<span {{ with .Get "color" }}style="color:{{ . }}"{{ end }}>{{ .Inner }}</span>

Markdown記事でfont_colorのショートコードを使用します。
パラメーターは「color="XXX"」の形で渡します。

{{< font_color color="red" >}}文字色赤{{< /font_color >}}
{{< font_color color="green" >}}文字色緑{{< /font_color >}}
{{< font_color color="blue" >}}文字色青{{< /font_color >}}

HTMLを出力すると、colorが代入されてショートコードが展開されます。

<p>
  <span style="color:red">文字色赤</span><br>
  <span style="color:green">文字色緑</span><br>
  <span style="color:blue">文字色青</span>
</p>

表示結果

組み込みのショートコード

Hugoにはデフォルトでいくつかのショートコードが組み込まれています。

組み込みのショートコードは以下を参照ください。

• Shortcodes | Hugo

参考

ショートコードの作成手順の詳細ついては以下を参照ください。

• Create your own shortcodes | Hugo