【連載】Gatsbyブログのデザインをワードプレスちっくにする手順（その8）サイドバーにカテゴリー別リストを追加しました。
10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順
こんにちは、筋肉めがねです。
本ブログの体裁を少しずつワードプレスに近い形へ変更しております。今回はサイドバーにカテゴリー別の一覧を追加しました。
サイドバーを追加するにあたり、以下の記事がとても参考になりました。本当に感謝です。
以下、目次です。
CategoryList componentを作る
先ずは、/src/components直下に、CategoryList componentを作ります。
import React from "react"
import kebabCase from 'lodash/kebabCase'
import './style.scss'
import { Link, StaticQuery, graphql } from "gatsby"
const CategoryList = () => (
<StaticQuery
query={graphql`
query {
allMarkdownRemark(limit: 2000) {
group(field: frontmatter___category) {
fieldValue
totalCount
}
}
}
`}
render={data => (
<nav>
<h1 className="categorylist-header">カテゴリ一別</h1>
<ul className="category-list">
{data.allMarkdownRemark.group.map(category => (
<li className="category-list-item" key={category.fieldValue}>
<span className="category-list-icon"></span>
<Link className="category-list-item-link" to={`/categories/${kebabCase(category.fieldValue)}/`}>
{category.fieldValue} ({category.totalCount})
</Link>
</li>
))}
</ul>
</nav>
)}
/>
)
export default CategoryListkebabCaseが大事
今回、上のコードを実装した際に、最後まで引っかかっていた点は、kebabCaseの箇所です。
...
<Link className="category-list-item-link" to={`/categories/${kebabCase(category.fieldValue)}/`}>
{category.fieldValue} ({category.totalCount})
</Link>
...kebabCaseを使わずに、/categories/${category.fieldValue}/をリンク先として設定すると、例えば「30DaysTraining」というカテゴリの場合、パスが/categories/30DaysTrainingとなります。
「30DaysTraining」カテゴリの正しいパスは、/categories/30-days-trainingなので、kebabCaseを使って正しいパスへと変換する必要があります。
/categories/30DaysTraining/categories/30-days-trainingSidebar component内で、CategoryList componentを呼び出す。
続いて、作成したCategoryList componentをSidebar component内で呼び出します。
....
import Search from '../Search'
import ClientOnly from '../../hook/ClientOnly.js'
import CategoryList from '../CategoryList'
...
return (
<div className="sidebar">
<div className="sidebar__inner">
<div className="sidebar__author">{authorBlock}</div>
<div>
<Menu data={menu} />
{/* following is google search box */}
<ClientOnly>
<Search />
</ClientOnly>
<Links data={author} />
<CategoryList />
<Adsense />
</div>
</div>
...これで、以下のようにサイドバーにカテゴリーリストが追加されます。
以上です。
残りは、scssで、見た目を整えればオッケーです。
まとめ
だいぶとGatsbyの操作に慣れてきました。次は、月別アーカイブをサイドバーへ追加しようと思います。