ショートコード

はじめに

Hugoのショートコードの使い方を紹介します。

ショートコードは、コンテンツファイルから呼び出せるスニペットです。HTMLテンプレートを記述します。

マークダウンファイルの中に、直接HTMLコードを埋め込むことができますが、よく利用するコードなどを、ショートコードとして切り出すことで、再利用性やマークダウンの記述性を上げることができます。

ただし、ショートコードを利用することで、コンテンツは、純粋なマークダウンではなくなってしまうので、Hugoにロックインされてしまいます。他のコンテンツ管理システムの利用を考えている場合は注意が必要です。

ショートコードは、Hugoが提供する内蔵のショートコードと、ユーザが作成するショートコードがあります。

ディレクトリ

ショートコードは、以下のshortcodesディレクトリに配置します。

ショートコードには、複数の引数(パラメータ)を渡すことができます。パラメータの渡し方には、位置パラメータ(Positional parameters)と名前パラメータ(Named parameters)の2種類があります。

ショートコードは、どちらのパラメータも利用することができますが、ショートコードを呼び出す際は、混在させることができません。

パラメータは、0から始まる数値で表されます。例えば、マークダウン内で、以下の記述をすると、

1

{{< sample positional >}}

ショートコード内で参照する際は、以下のようにします。

1

{{ .Get 0 }}

この実行結果は、以下のようになります。

1

positional

パラメータは、パラメータ名と値で表されます。例えば、マークダウン内で、以下の記述をすると、

1

{{< sample param="named" >}}

ショートコード内で参照する際は、以下のようにします。

1

{{ .Get "param" }}

この実行結果は、以下のようになります。

1

named

ショートコード内では、以下の変数を利用することができます。

名称	意味
.Inner	クロージングショートコード(終了タグのあるショートコード)を利用したときに与えられたテキスト
.Params	ショートコードに与えたパラメータ
$.Params	ショートコードに与えたパラメータ(グローバルコンテキスト)
$.Page.Params	ページのフロントマターで定義したページパラメータ
$.Page.Site.Params	設定ファイルで定義したサイトパラメータ
.IsNamedParams	名前パラメータのときtrue
.Name	ショートコード名
.Ordinal	ページ内、もしくは、ショートコード内(ショートコード内から呼び出された場合)で、何番目に利用されたショートコードか(0から始まる)。
.Parent	親ショートコード
.Position	ショートコードが利用されているファイル名と行番号。

例えば、以下のショートコードは、そのページの最終更新日を出力します。

1

{{ (dateFormat "January 2, 2006" $.Page.Params.lastmod) }}

November 5, 2023