Gatsbyでカスタムfrontmatter属性を使う

Gatsby は、ページジェネレート時に使う graphql で Markdown の frontmatter を使うことができます。

frontmatter ってこんなやつ。

---
title: Gatsbyでカスタムfrontmatter属性を使う
tags: [Gatsby, frontmatter, markdown]
date: 2020-11-13 12:04:22
update:
draft: false
---

ページの先頭にメタ属性を書くことで、ページタイトルに使ったり処理の分岐に使うことができるんです！

カスタム属性は一手間かかる

デフォルトで使えるのはtitle、date 、 description です。
nuxt.js で作っていた md を再利用したいのでカスタム属性も使えるようにしたい。

実はかんたん、カスタム属性の追加方法

graphql の定義に追加してあげればよいだけです。
gatsby-node.js の createType にカスタム属性を追加します。

type Frontmatter {
  title: String
  description: String
  date: Date @dateformat
  update: Date @dateformat
  tags: [String]
  draft: Boolean
}

update、tags、draftフラグが今回追加したものです。
これで graphql の取得対象に含むことができたので使うことができます！

ちなみに、draft フラグが trueの場合は開発時には DRAFT マークつきで表示され、本番デプロイ時には載らないように改修しています。
自分でいろいろいじれるのがいいですね！