Gatsbyでgatsby-plugin-categoriesを利用してカテゴリ機能を追加する方法
2021-07-18T12:00:32.00+09:00
当ブログは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>
)}
完了!
これでカテゴリ機能の作成は終了です。 お疲れさまでした!