beta

hugoでdataをページパラメータと組み合わせて使う

静的サイトジェネレータであるHUGOは、実はデータも取り扱いことができます。今回は、データの単純な取り出し方と応用編としてページのパラメータと組み合わせた使い方をまとめました。

公開日:2019年9月27日

基礎編:HUGOでのdataの扱い

マークダウン記事を静的サイトに変換するHUGOですが、実はデータも扱うことができます。

Data Templates | HUGO

データは、プロジェクトディレクトリ下の「data」ディレクトリに、下記のいずれかのフォーマットで入れます。

  • .yml
  • .yaml
  • .json
  • .toml

入れておいたデータは、「.Site.Data」変数でアクセスができます。

HUGO公式サイトの例

公式サイトの例では、discographyのマスターをループで表示させる方法が提示されています。

data/jazz/bass/jacopastorius.toml

と言うファイルを下記のような内容で保存して、

discography = [
"1974 – Modern American Music … Period! The Criteria Sessions",
"1974 – Jaco",
"1976 - Jaco Pastorius",
"1981 - Word of Mouth",
"1981 - The Birthday Concert (released in 1995)",
"1982 - Twins I & II (released in 1999)",
"1983 - Invitation",
"1986 - Broadway Blues (released in 1998)",
"1986 - Honestly Solo Live (released in 1990)",
"1986 - Live In Italy (released in 1991)",
"1986 - Heavy'n Jazz (released in 1992)",
"1991 - Live In New York City, Volumes 1-7.",
"1999 - Rare Collection (compilation)",
"2003 - Punk Jazz: The Jaco Pastorius Anthology (compilation)",
"2007 - The Essential Jaco Pastorius (compilation)"
]

このデータを、

{{ range $.Site.Data.jazz.bass }} // data/jazz/bass以下のデータをループ
  <ul>
  {{ range .discography }} // 各データの"discography"をループ
    <li>{{ . }}</li>
  {{ end }}
  </ul>
{{ end }}

こんな感じでループさせてます。

単純にループさせるだけなら簡単ですね。

応用編:データをページのデータと組み合わせて使う

さて、ここからが本番です。

公式のやり方では単純にデータをループさせているだけでしたが、dataディレクトリ内のファイルをマスターデータとして、ページパラメータと組み合わせて抽出してみます。

indexを使って、キー指定でデータを取り出す

やることは、

  • 記事ページのフロントマッターで指定した値をキーにして
  • マスターデータから対応した値を出す

という感じです。

プログラムを書いたことがある方ならよくやる方法ですが、ネット上のHUGOに関するサイトではあまり解説されたページがありませんが、HUGOのマスターデータは、キーを指定してデータを絞り込むことができます。

書き方は、indexを使います。

{{ (index (index $.Site.Data "データ名") キー) }}

となります。

例えば、下記のような都道府県データ(/data/prefecures.json)があったとして(一部データ省略)、

{
  "hokkaidou": "北海道",
  ,
  ,
  ,
  ,
  ,
  "tokyo": "東京都",
  ,
  ,
  ,
  ,
}

ページのフロントマッターが、

---
title: タイトル
date: 2019-09-17T09:53:38.138Z
prefecture: tokyo
---

という感じで、都道府県(prefecture)を「tokyo」としていた時に、tokyoに対応する値である「東京都」をテンプレート側で取り出したい時は、

{{ (index (index $.Site.Data "prefecures") .Params.prefecture) }}
// => 東京都

とすれば取り出せます。

データはローカルだけでなく、サイト上からも取ることができるので、組み合わせればいろんなことができますね。


わかってしまえば簡単なのですが、自分の場合はgolangは普段使っていないので、作法がわからなくて苦労しました。

同じような課題に遭遇している方の手助けになれば幸いです。

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード