Gatsby 在从 Contentful CMS 提供新变量时生成页面

Gatsby to generate pages when a new variable is served from Contentful CMS

所以我用产品构建了一个 Gatsby 博客,它可以以编程方式为每个产品生成页面。我想添加到这个项目,以便它也生成产品类别的页面。每个类别页面将显示该类别中的所有产品。 内容由 Contentful CMS 提供。

这可能吗?添加第二个布局模板并创建此类页面?

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

    return new Promise((resolve, reject) => {
        const blogPost = path.resolve('./src/templates/blog-post.js')
        const categoryPage = path.resolve('./src/templates/category-post.js')

        resolve(
            graphql(
                `
            {
              allContentfulBlog(limit: 200) {
                edges {
                  node {
                    id
                    categories
                    mainTitle
                    mainImg {
                      id
                    }
                    mainText {
                      childMarkdownRemark {
                        excerpt
                      }
                    }
                    slug
                  }
                }
              }
            }
          `
            )
                .then(result => {
                    if (result.errors) {
                        console.log(result.errors)
                        reject(result.errors)
                    }

                    result.data.allContentfulBlog.edges.forEach(edge => {
                        createPage({
                            path: edge.node.slug,
                            component: blogPost,
                            context: {
                                slug: edge.node.slug,
                            },
                        })
                    })
                    return
                })
                .then(result => {
                    result.forEach(category => {
                        createPage({
                            path: '/' + edge.node.category,
                            component: categoryPage,
                            context: {
                                slug: edge.node.category,
                            },
                        })
                    })
                })
        )
    })
}

promise 中的第一个 .then() 方法工作得很好,我的想法是简单地添加第二个 .then(),使用类别页面的模板。

终端显示:

您可以在产品页面循环后插入此内容,但您没有类别数据。可以从产品中收集它,但这将是一种古怪的解决方法。

您需要在顶层单独查询、单独承诺和组合承诺 (.all())。