本日も11ty(Eleventy)の小ネタです。
front matterはタイトルとかディスクリプション等のメタデータの扱いが楽になって良いのですが、残念ながらテンプレートとして処理はしてくれないので変数を扱ったり出来ません。
そこで、front matter内で変数を扱えるようにする方法のご紹介です。
front matterでこんな感じに書いたとして、
---
title: ページタイトル
parent: 親ページのタイトル
eleventyNavigation:
key: "ページタイトル"
parent: "親ページのタイトル"
---この場合、eleventyNavigation の key や parent は title や3行目の parent を引っ張って来たいと思うのでこんな感じで書きたいと思います。
---
title: ページタイトル
parent: 親ページのタイトル
eleventyNavigation:
key: "{{ title }}"
parent: "{{ parent }}"
---でも、これじゃ処理してくれないので、そういった場合は eleventyComputed を使えばテンプレートとして処理されて変数を扱うことができます。
---
title: ページタイトル
parent: 親ページのタイトル
eleventyComputed:
eleventyNavigation:
key: "{{ title }}"
parent: "{{ parent }}"
---
簡単でいいですね。
eleventyComputed は、2020年5月頃リリースされた v0.11.0 から実装されたみたいなので、ちょっと古い11tyを使ってる場合使えないかも知れません。
この eleventyComputed を使えば、pagination を使ってる場合に title とかにも処理してくれるようになるので、次のような感じでもいけます。
---
pagination:
data: entries
size: 1
alias: item
addAllPagesToCollections: true
permalink: "{{ item.permalink }}"
eleventyComputed:
title: "{{ item.title }}"
description: "{{ item.entrySummary }}"
---ちなみに、11tyがv0.10.0までは、renderData を使えば出来ました。
---
renderData:
title: "{{ item.title }}"
---
<h1>{{ renderData.title or title }}</h1>front matterはさほど変わりませんが、{{ renderData.title or title }} みたいに renderData も書かなきゃいけなくてちょっと面倒でした。
話は戻って、この eleventyComputed はディレクトリデータファイル（xxx.11tydata.js）やグローバルデータファイル（_dataフォルダ）でも使えるので、次のようにすることもできます。
module.exports = {
eleventyComputed: {
title: "{{ post.title }}",
metaTitle: "{{ parent }}「{{ title }}」",
description: "実績「{{ title }}」の詳細です。",
eleventyNavigation: {
key: "{{ title }}",
parent: "{{ parent }}"
}
}
};
公式ドキュメントを見てると、front matterに書くよりJSの方が処理速いからな！みたいな事が書いてあるので、この方法の方が良いのかも知れません。
20ページくらいだと体感的には特に変わらない感じもしたけど、どうなんでしょ。
そんな感じで小ネタでした。