カテゴリボタン押下によって、カテゴリごとにフィルタリンガされ記事知覧を表示できるように機能を追加しました。
⇩画像のようなカテゴリ名がボタンになっています。
実装例
以下のように、urlパラメータからcategoryのkeyで値を取得し、その値を元に全権取得した記事データをフィルタリングしています。
const Index = ({ data, location }) => {
const siteTitle = `Title`
const posts = data.allMicrocmsBlogs.nodes
// URLパラメータの取得
// URLSerchParamsは、クエリパラメータを解析するためのJS標準API
const searchParams = new URLSearchParams(location.search)
const categoryName = searchParams.get("category")
// フィルタリングロジック
const filteredPosts = categoryName
? posts.filter(post =>
post.category.some(category => category.name === categoryName)
)
: posts
...
}ボタンコンポーネントは、propsで受け取ったカテゴリ名を表示するとともに、urlパラメータにカテゴリ名を渡し、記事一覧を表示するページへのリンクを持ちます。
import { Link } from "gatsby"
import React from "react"
export const CategoryButtons = ({ category }) => {
return (
<>
{category.map(category => {
return (
<Link to={`/blogIndex?category=${encodeURIComponent(category.name)}`}>
<div
className="mx-0.5 btn btn-sm p-1 shadow-md font-sans"
key={category.id}
>
{category.name}
</div>
</Link>
)
})}
</>
)
}
余談
機能として実装はできましたが、実際にサイトに訪れたユーザーにこの事を知ってもらうのはなかなか工夫が必要と感じ先人のUXは偉大だなと感じたりしました。