11tyのfront matter内でテンプレート処理をして変数を使うのイメージ画像

本日も11ty(Eleventy)の小ネタです。
front matterはタイトルとかディスクリプション等のメタデータの扱いが楽になって良いのですが、残念ながらテンプレートとして処理はしてくれないので変数を扱ったり出来ません。
そこで、front matter内で変数を扱えるようにする方法のご紹介です。

front matterでこんな感じに書いたとして、

---
title: ページタイトル
parent: 親ページのタイトル
eleventyNavigation:
  key: "ページタイトル"
  parent: "親ページのタイトル"
---

この場合、eleventyNavigationkeyparenttitle や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ページくらいだと体感的には特に変わらない感じもしたけど、どうなんでしょ。

そんな感じで小ネタでした。

参考にしたページ