gatsby-node 沒有構建標簽頁面

Question

我正在嘗試使用本教程為來自 gatsbyjs.org 的博客帖子創建標簽頁面來實現該網站博客的標簽。 復制並粘貼 /templates/tags.js 和 /pages/tags.js，僅使用指南建議的部分代碼編輯 gatsby-node.js。 我這樣做是因為我已經在使用不同的代碼以編程方式生成博客文章頁面。 整個 repo 可以在這里找到。

問題是有一個頁面可以顯示 graphQL 收集的所有標簽，但根本沒有頁面可以顯示帶有此類標記的帖子。 第一個中的鏈接將您帶到默認的 404 頁面。 我不確定有什么問題。

/templates/tags.js

import React from "react"
import PropTypes from "prop-types"
// Components
import { Link, graphql } from "gatsby"
const Tags = ({ pageContext, data }) => {
  const { tag } = pageContext
  const { edges, totalCount } = data.allMarkdownRemark
  const tagHeader = `${totalCount} post${
    totalCount === 1 ? "" : "s"
  } tagged with "${tag}"`
  return (
    <div>
      <h1>{tagHeader}</h1>
      <ul>
        {edges.map(({ node }) => {
          const { slug } = node.fields
          const { title } = node.frontmatter
          return (
            <li key={slug}>
              <Link to={slug}>{title}</Link>
            </li>
          )
        })}
      </ul>
      {/*
              This links to a page that does not yet exist.
              You'll come back to it!
            */}
      <Link to="/tags">All tags</Link>
    </div>
  )
}
Tags.propTypes = {
  pageContext: PropTypes.shape({
    tag: PropTypes.string.isRequired,
  }),
  data: PropTypes.shape({
    allMarkdownRemark: PropTypes.shape({
      totalCount: PropTypes.number.isRequired,
      edges: PropTypes.arrayOf(
        PropTypes.shape({
          node: PropTypes.shape({
            frontmatter: PropTypes.shape({
              title: PropTypes.string.isRequired,
            }),
            fields: PropTypes.shape({
              slug: PropTypes.string.isRequired,
            }),
          }),
        }).isRequired
      ),
    }),
  }),
}
export default Tags
export const pageQuery = graphql`
  query($tag: String) {
    allMarkdownRemark(
      limit: 2000
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { tags: { in: [$tag] } } }
    ) {
      totalCount
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
          }
        }
      }
    }
  }
`

看一下 /templates/tags.js 文件，有一段代碼說這鏈接到一個尚不存在的頁面。 你會回來的！ 這使我認為缺少一些東西，也許在另一個指南中，但我並沒有真正設法找到或意識到它是什么。

蓋茨比-node.js

const path = require(`path`)
const _ = require("lodash")

exports.createPages = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions

  const blogPostTemplate = path.resolve(`src/templates/blogPost.js`)
  const tagTemplate = path.resolve(`src/templates/tags.js`)


  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              tags
            }
          }
        }
      }
      tagsGroup: allMarkdownRemark(limit: 2000) {
        group(field: frontmatter___tags) {
          fieldValue
        }
      }
    }
  `)

  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  // Extract blog data from query
  const blogPage = result.data.allMarkdownRemark

  blogPage.edges.forEach(({ node }) => {
    createPage({
      path: `/blog/${_.kebabCase(node.fields.slug)}`,
      component: blogPostTemplate,
      context: {}, // additional data can be passed via context
    })
  })

  // Extract tag data from query
  const tags = result.data.tagsGroup.tagsGroup

  // Make tag pages
  tags.forEach(tag => {
    createPage({
      path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
      component: tagTemplate,
      context: {
        tag: tag.fieldValue,
      },
    })
  })
}

我已經調用了 allMarkdownRemark.edges.node.frontmatter.tags，因為它在指南中被調用。 不確定它的去向，因為它沒有在此代碼中的任何地方引用，但我相信它用於構建標簽頁面。

任何意見、提示、請求和幫助將不勝感激。 感謝您的閱讀！

Answer 1

在你的gatsby-node.js替換：

// Extract tag data from query
const tags = result.data.tagsGroup.tagsGroup

和：

const tags = result.data.tagsGroup.group

您的 Graphql 查詢正在查詢：

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

因此，您感興趣的數據位於tagsGroup.group 。 通過此更改，您的構建工作正常並且頁面生成正確。 您可以通過導航到localhost:8000/tags來測試它。