当Content CMS提供新变量时,Gatsby会生成页面

时间:2018-08-31 08:53:57

标签: reactjs gatsby contentful

因此,我用产品构建了一个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()和类别页面的模板。

终端显示: terminal

1 个答案:

答案 0 :(得分:1)

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

您需要单独的查询,单独的promise,并在顶层编写promise(.all())。