ショートコード作成の解説

こんにちはnasustです。

今回は、Hugoでショートコード作成の解説をします。

ショートコードとは

Makrdown文章中に {{< ショートコードテンプレート名 >}} と入力するとテンプレートをHTMLにレンダリングしてくれます。

WordPressと同じ機能ですね。

see also: Create Your Own Shortcodes | Hugo

ショートコードの作成

以下の簡単なショートコードのテンプレートを作成します。 以下の内容を/layouts/shortcodes/warning.htmlに作成します。

<div class="warning">
    <i class="material-icons">warning</i> Warning
    <div>
        {{ .Inner | markdownify }}
    </div>
</div>
html

以下のようにショートコードを指定すると

{{< warning >}}
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
{{< /warning >}}

warningWarning

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

このように上記のようにレンダリングしてくます。

テンプレートの内容は普通のHugoのテンプレートと同じです。 ただしショートコード特有の関数と変数があります。それを紹介します。

ショートコードの関数と変数

ショートコードの関数と変数を解説します。

.Inner

これはショートコードのタグに囲まれた文章が格納されている変数です。

see also: Create Your Own Shortcodes | Hugo

markdownify

ショートコード特有では無いですが、併用することが多いと思いますので紹介します。この関数に渡された文字列をMarkdownとして扱いHTMLに変換します。

warningショートコードの例では以下の内容になります。

<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

<p>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
html

1行空けての改行がpタグで囲まれています。

.Get “key”

{{< shortcode attr=“value” >}}

のように属性と値がある場合、.Get "属性名"で取得できます・

{{ $attr := .Get "attr" }}
html

$attrの中身は”value”という文字列になります。

.Get 0

{{< shortcode “value” >}}

のように値がある場合、.Get indexで取得できます。indexは位置の数値を指定します。

{{ $zero := .Get 0 }}
html

$zeroの中身は”value”という文字列になります。

プログラミングの配列の位置指定と同じように0から始まります。

$.Page.Params

ショートコードテンプレートの中でPage変数にアクセスしたい場合は、$.でアクセスできます。

{{ $title := $.Page.Title }}
html

$titleの中身はページのタイトルの文字列になります。

まとめ

ショートコードはHTMLのカスタムタグの様に定義できます。 ショートコードを用意することによって、文章やメディアをリッチに表現できます。

prevnext