Question

我正在创建我的投资组合，在这里我想为我的博客和项目提供两个单独的选项卡。理想情况下，我应该以编程方式为这些标签中的每个项目创建页面。

然后，我可以按照Gatsby官方教程，对我的博客标签中的项目执行此操作。但是，当我尝试对“项目”选项卡上的项目执行相同的操作时，我能够使它正常工作，但是以某种方式，我的“博客”选项卡的初始设置停止了同时工作。

const path= require('path')

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

const blogPost= path.resolve('./src/components/blogComponents/blog-post.js')
return new Promise((resolve,reject)=>{
    graphql(`
    {
        allContentfulBlog{
            edges{
              node{
                slug
              }
            }
          }
    }
`).then(results=>{
    // console.log(results)
    if(results.error){
        reject(results.error)
    }
      // create blog post pages
const posts=results.data.allContentfulBlog.edges
// console.log(post)

posts.forEach((post,index)=>{
    console.log(`showing slugs: ${post.node.slug}`)
    // const previous= index === posts.length-1?null: posts[index+1].node
    // const next= index === 0?null: posts[index-1].node

   createPage({
        path:`/${post.node.slug}`,
        component:blogPost ,
        context:{
            slug:post.node.slug,
            // previous,
            // next
        } 
    })

    })

}) .then(resolve)
}) }



//creating pages for projects


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

    const projectPage= path.resolve('./src/components/projectComponents/project.js')
    return new Promise((resolve,reject)=>{
        graphql(`
        {
            allContentfulProjects{
                edges{
                    node{
                        slug
                      }
                }   
              }
        }
    `).then(results=>{
        if(results.error){
            reject(results.error)
        }

        projects= results.data.allContentfulProjects.edges

        projects.forEach(project=>{
            createPage({
                path:`/${project.node.slug}`,
                component:projectPage ,
                context:{
                    slug:project.node.slug,

                } 
            })
        })

      }).then(resolve)

    }) 

}

我当时的假设是，对于每个要设置的程序化页面，导出单独的createPages API都是必经之路，但是最终却遇到了这个问题。我搜索了文档，但是找不到解决我的问题的部分。

Answer 1

exports.createPages =是一个赋值，因此在编写第二个函数时，实际上是在覆盖第一个函数。

当我不得不创建两种不同类型的页面时，我只是将所有内容都放入一个查询中，然后对嵌套对象进行了foreach。

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  return graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
      allRatsJson {
        edges {
          node {
            name
            img
          }
        }
      }
    }
  `).then(result => {
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.fields.slug,
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          slug: node.fields.slug
        }
      });
    });

    result.data.allRatsJson.edges.forEach(({ node }) => {
      createPage({
        path: node.name.toLowerCase(),
        component: path.resolve(`./src/templates/rat.js`),
        context: {
          name: node.name,
          img_url: node.img
        }
      });
    });
  });
};

如何正确使用createPages API以编程方式创建页面？

1 个答案: