Hugoで独自のShortcodeを作成する

参考資料

Create Your Own Shortcodes | HUGO

基本手順

HTMLのテンプレートを作成する

下記shortcodesディレクトリに、HTMLファイルを作成します。
作成したファイルの拡張子を除いた文字列が、Shortcode名になります。

/layouts/shortcodes/<SHORTCODE>.html

Shortcodeを使用する

Markdownファイル内で以下のように記述すると、Shortcodeを使用できます。

{{< SHORTCODE >}}

応用　値を受け渡す方法

方針として、ざっくり以下の2つ。

  • Positional Parameters … 要するに位置で指定する方針
  • Named Parameters … 要するに名前で指定する方針

以下の応用例では、
Shortcode名はmyshortcodeとします。
つまり、/layouts/shortcodes/myshortcode.htmlをHTMLテンプレートとして用意した想定です。

すべての出力結果は以下の通りです。

miajimyu
100

応用例　.Getを使用する例

パターン1: Positional Parameters

Shortcode使用側

/content/markdown.mdの中に、
以下の様に記述する。

{{< myshortcode miajimyu 100 >}}

HTMLのテンプレート側

/layouts/shortcodes/myshortcode.html

{{ .Get 0 }}
<br>
{{ .Get 1 }}

パターン2: Named Parameters

Shortcode使用側

/content/markdown.md

{{< myshortcode user=“miajimyu” id=“100” >}}

HTMLのテンプレート側

/layouts/shortcodes/myshortcode.html

{{ .Get "user" }}
<br>
{{ .Get "id" }}

応用例　index .Paramsを使用する例

Positional Parameters

Shortcode使用側

/content/markdown.mdの中に、
以下の様に記述する。

{{< myshortcode miajimyu 100 >}}

HTMLのテンプレート側

/layouts/shortcodes/myshortcode.html

{{ index .Params 0 }}
<br>
{{ index .Params 1 }}

Named Parameters

Shortcode使用側

/content/markdown.md

{{< myshortcode user=“miajimyu” id=“100” >}}

HTMLのテンプレート側

/layouts/shortcodes/myshortcode.html

{{ index .Params "user" }}
<br>
{{ index .Params "id" }}

スポンサーリンク