フロントセンセイ

記事一覧にカテゴリーの表示 | Gatsbyブログカスタマイズ

Webサイト高速化のための 静的サイトジェネレーター活用入門を通じて作成したこのブログのカスタマイズとして、記事一覧にカテゴリーの表示を加えました。
すでに記事ページで実装されている内容を流用することができたため、比較的容易に対応が可能でした。

対応が必要なファイル

記事一覧は、3箇所存在するため、3つのファイルに対応が必要です。
いずれも同じ記述なので、1つにだけしっかりと対応すれば、あとは流用することで対応可能です。

▼HOME
src/pages/index.js

▼すべての記事一覧
src/templates/blog-template.js

▼カテゴリー別記事一覧
src/templates/cat-template.js

具体的な対応

HOMEを一例として、具体的な対応をご紹介します。

カテゴリー表示用のアイコン定義

カテゴリー表示用のアイコン（faFolderOpen）を定義します。
ファイル上部あたりの記述です。

// Before
import { faClock, faSyncAlt } from "@fortawesome/free-solid-svg-icons"

// After
import { faClock, faSyncAlt, faFolderOpen } from "@fortawesome/free-solid-svg-icons"

カテゴリー表示用のHTML要素を記述

カテゴリー表示をするHTMLの要素を記述します。
記事一覧では、それぞれの記事自体がリンクになっているため、その子要素であるカテゴリーからはリンクを削除しました。
ファイルの中頃、aside内のtimeの次に追記します。

// Before
<aside>
  <time dateTime={node.publishDate}>
    <FontAwesomeIcon icon={faClock} />
    {node.publishDateJP}
  </time>
</aside>

// After
<aside>
  <time dateTime={node.publishDate}>
    <FontAwesomeIcon icon={faClock} />
    {node.publishDateJP}
  </time>
  <div className="cat">
    <FontAwesomeIcon icon={faFolderOpen} />
    <ul>
      {node.category.map(cat => (
        <li className={cat.categorySlug} key={cat.id}>{cat.category}</li>
      ))}
    </ul>
  </div>
</aside>

カテゴリーをGraphQLで呼び出し

カテゴリー名などを表示させるために、記述を追記して定義します。
ファイル下部あたりのqueryへの記述です。

// Before
publishDate
id

// After
publishDate
category {
  category
  categorySlug
  id
}
id

スタイル調整

ここまででHTML要素の出力が実現できます。
あとはお好みでCSSによるスタイル調整を行ってください。
スタイル調整にはSCSSを利用するとやりやすいので、オススメです。

関連記事