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
      })
    )
  })
}

盖茨比第二布局模板

1 个答案: