Gatsbyでgatsby-plugin-categoriesを利用してカテゴリ機能を追加する方法

当ブログはGatsbyで制作されています。 らいもふです。

このブログにカテゴリ機能を追加したため、その方法をまとめておきます。

必要なこと

• gatsby-plugin-categoriesのインストール
• src/components/PostsList.jsとsrc/components/PostsListCard.jsの追加
• src/templates/category.jsの追加
• gatsby-config.jsの編集
• 全ての記事にcategory欄を追加
• src/components/blog-post.jsにカテゴリページへのリンクを追加

インストールと基本設定

まずはpluginのインストール。

npm install gatsby-plugin-categoriesかyarn install gatsby-plugin-categories

その次の3つの項目は、コピペで大丈夫です。

こちらのリポジトリにexampleがあります。 ライセンスはMITですので、著作者表示があればコピペ可能です。

その後全ての記事にcategoryの項目を追記します。

---
title: "かっこいいタイトル"
date: "2021-07-18T12:00:32.00+09:00"
category: programming
---

こんな感じです。

カテゴリページへのリンクを作成

ここまででカテゴリページの実装は終わりです。 buildが通ると思います。

しかし、まだサイト内にカテゴリページへのリンクがないため、blog-post.jsに追記していきます。 blog-post.jsは使用しているstarter次第で別の名前になっているかもしれません。

gatsby-starter-blogを採用している場合には、exampleのこの行を参考にします。

blog-post.js下方の、クエリ内でfrontmatterの次に以下を挿入します。

fields {
  category
}

その後、blog-postにリンクを生成します。 このブログの場合は、article内のfooterの直前に以下のコードを挿入しました。

{post.fields.category && (
  <Card>
    カテゴリー：
    <Link to={`/category/${post.fields.category}`}>
      {post.fields.category}
    </Link>
  </Card>
)}

完了！

これでカテゴリ機能の作成は終了です。 お疲れさまでした！