盖茨比第二个布局模板

Question

我有一个我创建的模板，它用于显示单个产品的页面（blog-post.js）。现在我需要一种带有自己模板的新类型页面（category-post.js），它将显示某个类别中的所有产品。我不知道会有多少类别，所以我需要它们动态（以编程方式创建）。

要做到这一点，我想我应该使用onCreatePage API。在添加onCreatePage函数之前，代码工作正常。

我是按照www.gatsbyjs.org的these docs选择页面布局做到的。我希望至少我能走上正轨。

gatsby-node.js，问题似乎在这里：

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

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

    resolve(
      graphql(
        `
          {
            allContentfulBlog(limit: 200) {
              edges {
                node {
                  id
                  categories                  
                  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
      })
    )
  })
}

exports.onCreatePage = async ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  return new Promise((resolve, reject) => {
    if (page.path.match(/^\/category-post/)) {
      // I have created `category-post.js` in the `/layouts/` directory
      page.layout = 'category-post'    

      createPage(page)
    }

    resolve()
  })
}

终端

我还可以指定我正在使用Contentful CMS，这可能是以某种方式使用某些API来完成的吗？

有人做了类似的事情并希望提供帮助吗？

Answer 1

要动态创建页面，您仍然需要使用createPages API。人们错过的一件事是你可以拥有你想要的尽可能多的GraphQL查询。在这种情况下，onCreatePage是不必要的，因为您正在寻找未创建的页面

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

  return new Promise((resolve, reject) => {
    const blogPost = path.resolve('./src/templates/blog-post.js')        
    const categoryPost = path.resolve('./src/templates/category-post.js') 
    resolve(
      graphql(
        `
          {
            allContentfulBlog(limit: 200) {
              edges {
                node {
                  id
                  categories                  
                  slug
                }
              }
            }
            allContentfulCategory(limit: 200) {
              edges {
                node {
                  id
                  categories                  
                  slug
                }
              }
            }
          }
        `
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }
        result.data.allContentfulCategory.edges.forEach(edge => {
         createPage({
            path: `categories/${edge.node.slug}`,
            component: categoryPost,
            context: {
              slug: edge.node.slug,
            },
          })
        })
        result.data.allContentfulBlog.edges.forEach(edge => {         
          createPage({
            path: edge.node.slug,
            component: blogPost,
            context: {
              slug: edge.node.slug,
            },
          })
        })
        return
      })
    )
  })
}