2020-11-13

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

Gatsby
frontmatter
markdown

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

frontmatter ってこんなやつ。

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

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

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

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

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

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

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

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

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


猫派 / 基本インドア / ガジェット大好き / RDP推進派
コロナ禍の趣味はPC+VRでゲーム。
最近のゲーム:Factorio / BeatSaber / にゃんこ大戦争

→ Policy