Hina-Blog

ブログの機能を少し追加しました

September 01, 2020

一応備忘録としてどのように分類機能つけたのかを書いておきます

gatsby-node.jsとtemplateを使用する

//folder生成
  const folderPage = path.resolve(`./src/templates/folder-template.js`)
  const yearMonth = await graphql(
    `
      {
        allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}) {
          edges {
            node {
              frontmatter {
                folder
              }
            }
          }
        }
      }
    `
  )
  if (yearMonth.errors) {
    throw yearMonth.errors
  }
  const folder = yearMonth.data.allMarkdownRemark.edges
  folder.forEach((post) => {
    createPage({
      path: post.node.frontmatter.folder,
      component: folderPage,
      context: {
        slug: post.node.frontmatter.folder,
      },
    })
  })

ポイントは

  1. 使うテンプレートを作成、指定します
  2. ページ分類に使用するquery書きます
  3. ページを作成するcreatPageにpathとテンプレート,そのページに渡す情報を記します 間違っていたらごめんなさい。今のところこれでエラーは起きてません。
    なので、この3つがわかっていれば大丈夫なはずです。
    今回はタグ別のページと、作成日とお知らせでの分類の2つで作成しましたが、今後わかりやすい形に変更するかもしれません。