タグページの作成

SEO対応と記事閲覧の観点から、タグごとの記事一覧ページを作成します。
記事ごとにつけられているタグを使って、タグを使った記事絞り込みを行えるようにしました。

Gatsbyのドキュメントにざっくり実装方法書いてあります。参考にしながら実装していきます。

mdファイル側にタグを設定

マークダウンのfrontmatterにtagsを追加します。

私は勝手にカンマ区切りで設定していましたが、ドキュメントでは配列で指定するように説明されてました。
これまでの記事についても配列に直しておきます。

---
title: "A Trip To the Zoo"
tags: ["animals", "Chicago", "zoos"]
---

タグページのテンプレート作成

以下にタグページ用のテンプレートを作成します。いったんドキュメントに記載の内容で試してみました。

src/templates/tags.js

GraphQL で以下のように取得します。 tagの文字列を受け取って、filter: { frontmatter: { tags: { in: [$tag] } } }の部分で絞り込みの条件にしてます。

	query($tag: String) {
		allMarkdownRemark(
			filter: { frontmatter: { tags: { in: [$tag] } } }
	) {
		totalCount
		edges {
			node {
			  id
			  frontmatter {
				title
				date(formatString: "YYYY/MM/DD")
			  }
			  excerpt
			}
	   }
   }

gatsby-node.js でページを生成するように記述

もともと、記事詳細を作成していた処理に追加します。

• graphQLでfrontmatterのtagsも取得
• tagsの内容を配列にして保持し、これを使ってタグごとの一覧ページを作成

      let tags = []   
      tags = tags.concat(edge.node.frontmatter.tags)

      // Make tag pages
	  tags.forEach(tag => {
	    createPage({
	  	  path: `/tags/${_.kebabCase(tag)}/`,
          component: path.resolve(`./src/templates/tags.js`),
	  	  context: {
	  	    tag,
	  	  },
        })
      })

ドキュメントのまんまの実装で、タグに属する記事を表示するページができました。見た目はいまいちですね。

タグページ(gatsby)

/tags/ に すべてのタグをリストするページを作成

src/pages/tags.jsにページを作成

GraphQLで以下の指定を行いタグを取得。この配列を使って一覧を出力します。

query {
	allMarkdownRemark(
		limit: 2000
	) {
		group(field: frontmatter___tags) {
			fieldValue
			totalCount
		}
	}
}

こちらもドキュメントまんまの実装をして、マークダウンのtagsの部分を配列の形式で書き直したところ、以下のようにページができました。

タグ一覧ページ

タグページとタグリストページをデザイン反映

基本的にはトップページと同様の要素を並べます。
ヘッダーフッターとタグに該当する記事です。

見出しとかの要素をindexページに合わせて修正するくらいです。
先程作ったテンプレートを修正しました。

src/templates/tags.js