时间戳

首页 > 解决方案 > gatsby-node 没有构建标签页面

javascript - gatsby-node 没有构建标签页面

问题描述

我正在尝试使用本教程为来自 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，因为它在指南中被调用。不确定它的去向，因为它没有在此代码中的任何地方引用，但我相信它用于构建标签页面。

任何意见、提示、请求和帮助将不胜感激。感谢您的阅读！

标签： javascriptreactjsgatsby

解决方案

在你的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。

推荐阅读