【Hugo】ショートコードで複雑な HTML を簡潔に

2020-05-222021-08-14

サイト構築

Hugo

HTML

ではショートコードという機能があり、

これを使うことで複雑な HTML 構造も簡潔な形でマークダウン（.md）ファイルの中に記述することができるようになります。

今回は、ショートコードの使い方について書いていきます。

ショートコードを設定する

layouts/shortcodesフォルダを作り（フォルダ名は任意ではない）、その中に HTML ファイルを作成します。

この HTML ファイル名が、ショートコードの名前になります。

HTML ファイル内には、ショートコードを使用したマークダウンファイル内で展開したい HTML を書きます。

ここでは例として、次のようなファイルを作成します。

/layouts/shortcodes/greet.html1<p>おはようございます。</p>
2<p>今日の天気は晴れです。</p>

マークダウンファイルでショートコードを呼び出す

マークダウンファイルの中で、ショートコードの名前を使用して、次のように書くと、HTML が展開されます。

1{{< greet >}}
2->
3<p>おはようございます。</p>
4<p>今日の天気は晴れです。</p>

ショートコードのファイルのほうにマークダウンの記法（**など）を使いたい場合は、< >は% %とします。

引数を使用する

ショートコードに引数を追加して、HTML の中で使うこともできます。

HTML ファイルの中では、引数は{{ .Get 0 }}のように、引数の位置を指定することで取得できます。

/layouts/shortcodes/greet.html1{{- $name := .Get 0 -}}
2{{- $weather := .Get 1 -}}
3<p>おはようございます、{{ $name }}さん。</p>
4<p>今日の天気は{{ $weather }}です。</p>

1{{< greet "サトウ" "雨" >}}
2->
3<p>おはようございます、サトウさん。</p>
4<p>今日の天気は雨です。</p>

位置変数の他に、キーワード変数を指定することもできます。

ただし、位置変数とキーワード変数を同時に指定することはできません。

/layouts/shortcodes/greet.html1{{- $name := .Get "name" -}}
2{{- $weather := .Get "weather" -}}
3<p>おはようございます、{{ $name }}さん。</p>
4<p>今日の天気は{{ $weather }}です。</p>

1{{< greet name="サイトウ" weather="曇り" >}}
2->
3<p>おはようございます、サイトウさん。</p>
4<p>今日の天気は曇りです。</p>

default関数を使って、引数のデフォルト値を指定することもできます。

/layouts/shortcodes/greet.html1{{- $name := .Get "name" | default "タロウ" -}}
2{{- $weather := .Get "weather" | default "晴れ" -}}
3<p>おはようございます、{{ $name }}さん。</p>
4<p>今日の天気は{{ $weather }}です。</p>

1{{< greet >}}
2->
3<p>おはようございます、タロウさん。</p>
4<p>今日の天気は晴れです。</p>

関連記事【Hugo】.Scratch とは？

タグで囲まれた範囲をショートコードとする

ショートコードの開始タグと終了タグで囲まれた範囲を取得することもできます。

内容は{{ .Inner }}で呼び出します。

/layouts/shortcodes/greet.html1<p>おはようございます。</p>
2{{ .Inner }}
3<p>調子はどうですか。</p>

1{{% greet %}}
2本日はお日柄もよく、
3**たいへん気持ちのいい朝**ですね。
4{{% /greet %}}
5
6->
7<p>おはようございます。</p>
8<p>本日はお日柄もよく、
9<strong>たいへん気持ちのいい朝</strong>ですね。</p>
10<p>調子はどうですか。</p>

こちらでも引数を指定することができます。

ショートコードをネストする

開始タグと終了タグを指定するブロック型のショートコードの中に、

別のブロック型ショートコードやインライン型ショートコードを入れることもできます。

/layouts/shortcodes/greet.html1おはようございます、
2{{ .Inner }}
3調子はどうですか。

/layouts/shortcodes/name-weather.html1{{ .Get "name" }}さん。
2今日の天気は{{ .Get "weather" }}です。

1{{% greet %}}
2
3{{% name-weather name="ジロウ" weather="快晴" %}}
4
5{{% /greet %}}
6
7->
8<p>おはようございます、</p>
9<p>ジロウさん。
10今日の天気は快晴です。</p>
11<p>調子はどうですか。</p>

{{ .Parent }}を使えば、親のショートコードから情報を取得することもできます。

/layouts/shortcodes/name-weather.html1{{ .Get "name" }}さん。
2{{ .Parent.Get 0 }}
3今日の天気は{{ .Get "weather" }}です。

1{{% greet "今日は暑いですね。" %}}
2
3{{% name-weather name="ジロウ" weather="快晴" %}}
4
5{{% /greet %}}
6
7->
8<p>おはようございます、</p>
9<p>ジロウさん。
10今日は暑いですね。
11今日の天気は快晴です。</p>
12<p>調子はどうですか。</p>

関連記事【Hugo】print・printf の使い方

この記事がお役に立てれば幸いです。

それでは