hugoでdataをページパラメータと組み合わせて使う
静的サイトジェネレータであるHUGOは、実はデータも取り扱いことができます。今回は、データの単純な取り出し方と応用編としてページのパラメータと組み合わせた使い方をまとめました。
公開日:2019年9月27日
基礎編:HUGOでのdataの扱い
マークダウン記事を静的サイトに変換する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は普段使っていないので、作法がわからなくて苦労しました。
同じような課題に遭遇している方の手助けになれば幸いです。
新着ノート
-
NUXT3
公開日:2023年2月16日
-
NUXT3
公開日:2023年1月30日
新着コード
-
Vue.js
公開日:2022年4月18日
-
Vue.js
公開日:2022年4月13日