GatsbyJSのfrontmatterについて調べる

公開日: 2020年05月30日最終更新日: 2022年01月28日

実はfrontmatterについてまだよく分かっていなかったので調べてみました。記事のmarkdownの先頭に記述している以下の部分です。

---
title: frontmatter
date: 2020-05-30
slug: 2020-05-30-frontmatter
---

frontmatterとは、markdownにメタデータを追加する手段です。 YAML形式で記載します。
frontmatterはブロック形式の記述方法で連想配列を定義していることが分かります。

frontmatterは特定のページ（markdownファイル）に紐づくkey-valueデータとしてコードから参照することができます。 Frontmatter for metadata in Markdown filesに記載がありますが、サイトをビルドするときにGraphQLを使ってfrontmatterに追加した情報を読み取るっています。前の記事で調べたslugは、ビルド時に値を参照することでページのURLに反映しているんですね。

frontmatterの値はprops.pageContext.frontmatterを使うことでMDX内のJSXから参照することもできるそうなのですが、"TypeError: Cannot read property 'frontmatter' of undefined"になります。参考

frontmatterを調べていて気付きましたが、slugと同じ役割をするpathというkeyもありました。Creating slugs for pages参照。

ちなみにgatsby-theme-blogテーマでは以下のものがfrontmatterで指定できます。

Field	Type	description
id	String	ページを一意に識別するためのID。ページ検索のキーに使われる。
title	String	一覧ページと記事のページで表示されるタイトルを指定する。
slug	String	記事のパス（URL）を指定できる。
date	Date	表示する記事の日付。
tags	String[]	ブログ記事につけられるタグ。
keywords	String[]	SEOのキーワードに利用される。
excerpt	String	記事の抜粋。一覧ページに表示する内容を指定できる。指定しない場合は本文の冒頭部分が使用される。
image	String	記事のトップおよびsocial card（SNSなどにリンクを張ったときに表示されるカード）に表示される画像を指定できる。
imageAlt	String	上記画像が利用できない場合の代替文字列を指定できる。
socialImage	String	imageで指定した画像とは別の画像をsocial cardに表示したい場合に画像を指定できる。

タグが指定できるようなので、今後はタグをつけて管理したいですね。そしてタグを一覧で見られるページを用意したいです。
それと、frontmatterをformatterに空目します。間違えて文字を打っていないか心配です。