Hugo のショートコードの中からフロントマターのパラメータを参照する ($.Page.Params)

2017-10-02

Hugo のショートコードの中で $.Page.Params を参照すると、コンテンツファイルのフロントマターに記述したパラメータにアクセスすることができます。下記の hello ショートコードは、コンテンツファイル (.md) のフロントマターに記述された title パラメータと date パラメータの値を表示します。

layouts/shortcodes/title-and-date.html

{{ $.Page.Params.title }}<br>
{{ $.Page.Params.date | dateFormat "Mon, 02 Jan 2006" }}

☝️ ワンポイント

時刻情報は dateFormat 関数に渡すことで、任意のフォーマットで出力することができます。パイプで渡すのではなく、関数の第 2 パラメータとして次のように渡すこともできます。

{{ dateFormat "Mon, 02 Jan 2006" $.Page.Params.date }}

Go 言語の時刻の扱いに関してはこちらを参照してください。

作成した title-and-date ショートコードは、コンテンツファイルの中から次のように使用します。

content/page1.md

---
title: "ページタイトル"
date: "2017-10-02"
---

{{< title-and-date >}}

上記のショートコードの部分は、HTML ファイル出力時に次のように展開されます。

Page1 Title<br>
Mon, 02 Oct 2017

2017-10-02