Hugo のショートコードの中から設定ファイルのパラメータを参照する ($.Site.Params)

2017-10-02

Hugo のショートコードの中で $.Site.Params を参照すると、設定ファイル (config.toml) の params セクションに記述した情報を取得することができます。例えば、設定ファイルに下記のように記述されていたとします。

config.toml

baseURL = "http://example.org/"
languageCode = "ja-jp"
title = "わたしのブログ"
theme = "my-theme"

[params]
  subtitle = "Hugo を使って日記を書いています"
  authors = [
    "Maku",
    "Ponyo"
  ]

上記の params セクションに記述した設定値は、ショートコードの中から $.Site.Params.<パラメータ名> で参照することができます。下記の site-info ショートコードは、サイトのタイトルとサブタイトル、筆者情報を表示するショートコードの実装例です。

layouts/shortcodes/site-info.html

<div class="title">{{ $.Site.Title }}</div>
<div class="subtitle">{{ $.Site.Params.subtitle }}</div>
<ul>
  {{ range $.Site.Params.authors }}
    <li>{{- . -}}</li>
  {{ end }}
</ul>

☝️ ワンポイント上記のコードの中で、{{- . -}} と書いてある部分は、ループ処理で取り出した著者の名前を出力することを示しています。 {{ . }} と記述する代わりに、前後にハイフンを入れておくことで、出力時に前後の余計なスペースを取り除いてくれます。

コンテンツファイル (.md) の中からは、下記のようにしてショートコードを呼び出すことができます。

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

{{< site-info >}}

ショートコードの部分は、下記のように展開されます。

<div class="title">わたしのブログ</div>
<div class="subtitle">Hugo を使って日記を書いています</div>
<ul>
    <li>Maku
    <li>Ponyo
</ul>

2017-10-02