Hugo の Shortcodes を使ってみる。

Shortcodes って何？

Hugo では、簡潔に Markdown が書けるように、Shortcodes というものが用意されています。
記事中でよく使う表現なんかを、別ファイルとして HTML で用意しておき、必要に応じて呼び出す感じ。

Hugo 本体で用意されているもの 、各テーマの中に用意されているもの、自分で用意するもの（自作）の3つがあります。

他のテーマで気に入った Shortcodes があれば、それを別テーマに移植するのも手。
スタイルシートが絡みますので、ちょっとした編集は必要になります。
たまに、画像も使っていたりするので、それも見落とさずに必要があれば持っていきましょう。

テーマ内の Shortcodes はとても勉強になるので、よく眺めておきましょう（笑）
ちなみに置き場所は下記の通りです。

テーマの Shortcodes
/theme/hoge-theme/layouts/shortcodes/

自作の Shortcodes
/layouts/shortcodes

使い方

基本形

ごく標準的な書き方。

※Markdown でショートコードを書くと、バッククォートで囲んでも実行しちゃう・・・。ということで、gist を利用。この gist 読み込みも Shortcodes で行っています。
※% のところは、前を < で、後ろを > でも良いみたいです。

ショートコード名は、別途用意している HTML のファイル名（拡張子の .html を除いたもの）になり、これを読み込み、実行します。

例えば、red.html というファイルに下記が記述されていたとします。

<span style="color:red;">赤い字ですよ。</span>

Markdown の記事で、

と書きますと、

赤い字ですよ。

が出力されます。

変数を使う

また、{{.Get 0}} という変数を使って、値の代入も可能です。

color.html というファイルに下記が記述されていた場合、

<span sytle="color:{{.Get 0}};">文字の色を変えます。</span>

Markdown の記事で、

と書けば、{{.Get 0}} に blue が代入されて

<span style="color:blue;">文字の色を変えます。</span>

文字の色を変えます。

というように。

パラメーターは複数指定できますので、{{.Get 0}} {{.Get 1}} というように、数字を増やしていけばいくつでも対応できます。

変数を分かりやすく文字にする

数字だけだと数が増えた時にゴチャゴチャとしますので、分かりやすいように文字指定にするほうが良いかもしれません。

{{.Get "src"}} {{.Get "title"}} で、それぞれの値を取得することができます。

開始タグと終了タグを入れる

元となる文章「何かしらの文字列」の前後に開始タグと終了タグを入れる場合はこのようにします。

html側では、「何かしらの文字列」を取得するため {{.Inner}} を使い、下記のように記述します。

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

特定の文字列を置換する

Netlify のほうで使っているテーマ Cupper の中に、特定の文字列を置換する Shortcodes がありました。
使う機会もありそうなので、こちらに書いておきます。

概要

[[[ と ]]] で挟まれた文字列に対して、ハイライトを付けるという Shortcodes です。

[[[ という文字列を <span class='highlight'> に置換し、
]]] という文字列を </span> に置換します。

html の書き方

{{ $code := .Inner | htmlEscape }}
{{ $code := replace $code "[[[" "<span class='highlight'>" }}
{{ $code := replace $code "]]]" "</span>" }}

記事の書き方

こんな感じで。

結果

何かしらの<span class='highlight'>文字列</span>です。

これくらい覚えておけば、ある程度自作も出来そうですね。
また何かあれば追記します。

ちなみに、Youtube や Instagram の埋め込みについても、Hugo 標準の Shortcodes で、出来るようになっています。

Shortcodes用のHTMlについて

Shortcodes で利用する html の記述方法は紹介しましたが、ちょっとアレンジしたものを紹介します。

if文（条件分岐）

本文から受け取った値によって、1つの html 内で出力方法を変化させる方法です。

実際に行ったケース。
テキストの文字色を変化させる Shortcodes で、内容によって改行するものと、改行しないものを用意したくなりました。

• 改行するもの → 段落要素（p）
• 改行しないもの → 行内コンテナ（span）

Shortcodes での記述はこちら。

上の type=“p” が段落で、下の type=“s” が行内となります。

fr という html ファイルを読み込んでいます。その中身はこちらです。

{{- $han := .Get "type" -}}
{{ if $han | eq "p"}}
<p class="fr" style="font-size: {{.Get "size"}}%;">{{.Get "text"}}</p>
{{ else if $han | eq "s"}}
<span class="fr" style="font-size: {{.Get "size"}}%;">{{.Get "text"}}</span>
{{ end }}

ちょっと解説。

{{- $han := .Get "type" -}}

$han という変数に本文中から引っ張ってきた type の中身を代入します。

{{ if $han | eq "p"}}
<p class="fr" style="font-size: {{.Get "size"}}%;">{{.Get "text"}}</p>
{{ else if $han | eq "s"}}
<span class="fr" style="font-size: {{.Get "size"}}%;">{{.Get "text"}}</span>
{{ end }}

$han の中身が “p” だったら、<p class ... の行を実行します。
$han の中身が “s” だったら、<span ... の行を実行します。

eq というのは比較したものが 同じ という意味です。