盖茨比创建页面

Question

我正在尝试创建一个 gatsby 站点，其中我有项目 posted，每个项目都有标签。我遵循了关于创建 gatsby 博客的基本教程，现在正在使用他们网站上记录的 gatsby 标签。在将变量名从路径更改为 slug 以避免保留字的过程中，我似乎搞砸了，因为我无法再创建 blogpost 页面，也无法创建标签页面。每个 post 都包含在一个以 post 标题命名的文件夹中，其中包含一个定义其内容、日期、标签等的 index.md 文件。

尝试运行 gatsby develop时输出如下错误，

错误 #11323

Your site's "gatsby-node.js" must set the page path when creating a page.

The page object passed to createPage:
{
    "slug": "/an-example-post",
    "component": "C:\Users\Monolith\Documents\programming\webdev\Gatsby-Portfolio\src\templates\post.js",
    "context": {
        "slug": "/an-example-post"
    }
}

我的gatsby-node.js

const path = require('path');

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

     const postTemplate = path.resolve('src/templates/post.js');
     const tagTemplate = path.resolve("src/templates/tags.js")
     //const postTemplate = require.resolve('src/templates/post.js');
     //const tagTemplate = require.resolve("src/templates/tags.js")
     
     return graphql(`{
        allMarkdownRemark{
            edges{
                node {
                    html
                    id
                    frontmatter{
                        slug
                        title
                    }
                }
            }
        }
    
        tagsGroup: allMarkdownRemark(limit: 2000) {
            group(field: frontmatter___tags) {
              fieldValue
            }
          }

    }`)
    .then(res => {
        if(res.errors){
            return Promise.reject(res.errors);
        }


        
        res.data.allMarkdownRemark.edges.forEach( ({node}) => {
            createPage({
                slug: node.frontmatter.slug,
                component: postTemplate,
                context: {
                    slug:node.frontmatter.slug
                },
            })
        })

          // Extract tag data from query
        const tags = res.data.tagsGroup.group

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

    }) 
}

如前所述，我担心路径变量是一个保留字可能是个问题，但我进一步使用它而不是省略它，所以现在它保留了下来。

示例post.js

import React from 'react';
import { graphql } from 'gatsby';
import Layout from "../components/layout"

export default function Template({data}) {
    const {markdownRemark: post} = data;

    return(
        <Layout>
        <div>
            <h1 className="postTitle">{post.frontmatter.title}</h1>
            <div className="tagGroup">
                {post.frontmatter.tags.map((tag, index) => (
                    <div key={index}>
                        <h2 className = "tagStyle">{tag}</h2>
                    </div>
                ))}
            </div>
            <p>{post.frontmatter.description}</p>
            <p>{post.frontmatter.date}</p>            
            {/* <h2 className="tagStyle">{post.frontmatter.tags + " "}</h2> */}
            <div dangerouslySetInnerHTML={{__html: post.html}} />
        </div>
        </Layout>
    )
}


export const postQuery = graphql`
    #query BlogPostByPath($slug: String!) {
    query($slug: String!) {
        markdownRemark(frontmatter: { slug: {eq: $slug} }) {
            html
            frontmatter {
                slug
                title
                description
                date
                tags
            }
        }
    }
`

tags.js 与 gatsby 的默认设置非常相似，只是内容略有改动。这是我正在使用的 Graphql 查询。

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,
           //   slug: 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
          }
        }
      }
    }
  }
`

如果有人有任何信息可以帮助我指明正确的方向，我将不胜感激。我已经运行阅读 gatsby 的文档几个小时了，但尚未取得实质性进展。

Answer 1

您在您的上下文中传递 tag 但期望 slug:

    createPage({
        slug: `/tags/${(tag.fieldValue)}/`,
        component: tagTemplate,
        context: {
            tag: tag.fieldValue,
        },
    })

并且：

   query($slug: String!) {}

上下文是一种将数据传递到组件模板以使用它来过滤数据的方法。理想情况下应该是一个唯一的参数（如 slug、id 等）。这样，在您的 gatsby-node.js 中，您应该获取所有 post，通过上下文传递一个唯一字段，并在您的模板中使用该变量来获取每个 post 所需的所有数据.

此外，您必须为您的函数提供 path，而不是 slug。

您应该将 createPage 函数更改为：

    createPage({
        path: `/tags/${tag.fieldValue}/`,
        component: tagTemplate,
        context: {
            slug: tag.fieldValue,
        },
    })

请记住，尽管命名不同，fieldValue 应该是一个 slug（或某种）。

我建议阅读 Gatsby 的教程：https://www.gatsbyjs.com/tutorial/part-seven/

盖茨比创建页面

Gatsby Create Pages

javascript

node.js

graphql

gatsby

express-graphql