ブログにカテゴリ機能を実装しました

ブログにカテゴリ機能を実装しました

1 分で読めます

JAMStackブログではWordPressに最初からついているような検索機能やカテゴライズ機能を自分で作る必要があります。

このブログのベースとなっているスターターも、簡易的なタグ付け機能はあってもカテゴリー一覧を表示するような機能は持っていませんでした。

そのため、今回独自にカテゴライズ機能を実装してみました。

ContentfulにTagsモデルを作成

contentful-tag-model

このようにコンテンツモデルを作成し 内部実装では

gatsby-node.jsに

  const tagsPost = path.resolve('./src/templates/tags.js')
  const result = await graphql(
    `
      {
        allContentfulBlogPost {
          nodes {
            title
            slug
          }
        }
        allContentfulTags {
          nodes {
            id
          }
        }
      }
    `
  )

  const tags = result.data.allContentfulTags.nodes;
  if(tags.length > 0){
    tags.forEach(tags =>{
      createPage({
        path: `/tags/${tags.id}/`,
        component: tagsPost,
        context: {
          id: tags.id
        },
      })
    })
  }

を追加しタグ表示用のテンプレートを作成して対応しました。

今後も機能を追加していきたいと思うので、もしあったら面白い機能などあったら教えてください

コメント機能や検索機能はあってもいいかなって今思ってます。

blog
tech
sudo

sudo

都内の某企業に勤めています。 趣味はドライブと天体観測、あと温泉。

Twitter

カテゴリ