盖茨比第二个布局模板

Question

我创建了一个模板，它用于显示单个产品的页面 (blog-post.js)。现在我需要一种带有自己模板（类别-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
      })
    )
  })
}

盖茨比第二个布局模板

Gatsby second layout template

javascript

reactjs

contentful

gatsby