从 gatsby-node.js 中的分页传递 slug 数组

Question

我有一个数组，可以根据 slug 或location.pathname 使布局的标题发生变化，现在我手动进行，这不好。

我是这样做的

let pathnames = [
      '/',
      '/kurikulum/',
      '/kurikulum/2',
      `/pengembangan-diri/`,
      '/pengembangan-diri/2',
      '/pengembangan-diri/3',
      '/pengembangan-diri/4',
      '/statistik/',
      '/teknologi/',
      '/ekonomi/',
      '/desain/',
      '/corona/',
      '/2',
      '/3',
      '/4'
    ]

if (pathnames.includes(location.pathname)) {
      header = ()}

这是我的gatsby-node.js

 const desainPageResults = graphql(`
        {
            desainPageResults: allCockpitMarkdown(filter: {childMarkdownRemark: {frontmatter: {title: {ne: ""}, tags: {eq: "desain"}}}}) {
        edges {
          node {
            childMarkdownRemark {
              frontmatter {
                title
                slug
              }
            }
          }
        }
      }
        }
    `).then(result => {
        if (result.errors) {
            Promise.reject(result.errors);
        }

        // Create blog pages
        paginate({
      createPage, 
      items: result.data.desainPageResults.edges, 
      itemsPerPage: 5, 
      pathPrefix: '/desain', 
      component: path.resolve('./src/templates/desain.jsx'),
      // const paginateTemplate = path.resolve('./src/templates/paginate.jsx')
  
    })
    });
    const teknologiPageResults = graphql(`
        {
            teknologiPageResults: allCockpitMarkdown(filter: {childMarkdownRemark: {frontmatter: {title: {ne: ""}, tags: {eq: "teknologi"}}}}) {
        edges {
          node {
            childMarkdownRemark {
              frontmatter {
                title
                slug
              }
            }
          }
        }
      }
        }
    `).then(result => {
        if (result.errors) {
            Promise.reject(result.errors);
        }

        // Create blog pages
        paginate({
      createPage, 
      items: result.data.teknologiPageResults.edges, 
      itemsPerPage: 5, 
      pathPrefix: '/teknologi', 
      component: path.resolve('./src/templates/teknologi.jsx'),
      // const paginateTemplate = path.resolve('./src/templates/paginate.jsx')
  
    })
    });
    const coronaPageResults = graphql(`
        {
            coronaPageResults: allCockpitMarkdown(filter: {childMarkdownRemark: {frontmatter: {title: {ne: ""}, tags: {eq: "desain"}}}}) {
        edges {
          node {
            childMarkdownRemark {
              frontmatter {
                title
                slug
              }
            }
          }
        }
      }
        }
    `).then(result => {
        if (result.errors) {
            Promise.reject(result.errors);
        }

        // Create blog pages
        paginate({
      createPage, 
      items: result.data.coronaPageResults.edges, 
      itemsPerPage: 5, 
      pathPrefix: '/corona', 
      component: path.resolve('./src/templates/corona.jsx'),
      // const paginateTemplate = path.resolve('./src/templates/paginate.jsx')
  
    })
    });
    const statistikPageResults = graphql(`
        {
            statistikPageResults: allCockpitMarkdown(filter: {childMarkdownRemark: {frontmatter: {title: {ne: ""}, tags: {eq: "statistik"}}}}) {
        edges {
          node {
            childMarkdownRemark {
              frontmatter {
                title
                slug
              }
            }
          }
        }
      }
        }
    `).then(result => {
        if (result.errors) {
            Promise.reject(result.errors);
        }


        paginate({
      createPage, 
      items: result.data.statistikPageResults.edges, 
      itemsPerPage: 5, 
      pathPrefix: '/statistik', 
      component: path.resolve('./src/templates/statistik.jsx'),

  
    })  
    });
    const kurikulumPageResults = graphql(`
        {
            kurikulumPageResults: allCockpitMarkdown(filter: {childMarkdownRemark: {frontmatter: {title: {ne: ""}, tags: {eq: "kurikulum"}}}}) {
        edges {
          node {
            childMarkdownRemark {
              frontmatter {
                title
                slug
              }
            }
          }
        }
      }
        }
    `).then(result => {
        if (result.errors) {
            Promise.reject(result.errors);
        }


        paginate({
      createPage, 
      items: result.data.kurikulumPageResults.edges, 
      itemsPerPage: 5, 
      pathPrefix: '/kurikulum', 
      component: path.resolve('./src/templates/kurikulum.jsx'),

  
    })  
    });
    const ekonomiPageResults = graphql(`
        {
            ekonomiPageResults: allCockpitMarkdown(filter: {childMarkdownRemark: {frontmatter: {title: {ne: ""}, tags: {eq: "ekonomi"}}}}) {
        edges {
          node {
            childMarkdownRemark {
              frontmatter {
                title
                slug
              }
            }
          }
        }
      }
        }
    `).then(result => {
        if (result.errors) {
            Promise.reject(result.errors);
        }


        paginate({
      createPage, 
      items: result.data.ekonomiPageResults.edges, 
      itemsPerPage: 5, 
      pathPrefix: '/ekonomi', 
      component: path.resolve('./src/templates/ekonomi.jsx'),

  
    })  
    });
    const pengembanganDiriPageResults = graphql(`
        {
            pengembanganDiriPageResults: allCockpitMarkdown(filter: {childMarkdownRemark: {frontmatter: {title: {ne: ""}, tags: {eq: "pengembangan-diri"}}}}) {
        edges {
          node {
            childMarkdownRemark {
              frontmatter {
                title
                slug
              }
            }
          }
        }
      }
        }
    `).then(result => {
    
        if (result.errors) {
            Promise.reject(result.errors);
        }


        paginate({
      createPage, 
      items: result.data.pengembanganDiriPageResults.edges, 
      itemsPerPage: 5, 
      pathPrefix: '/pengembangan-diri', 
      component: path.resolve('./src/templates/pengembangan-diri.jsx'),

  
    })
    });

    const allItems = graphql(
        `{
          allCockpitMarkdown(filter: {childMarkdownRemark: {frontmatter: {title: {ne: ""}}}}) {
            edges {
              node {
                childMarkdownRemark {
                  frontmatter {
                    title
                    slug
                  }
                }
              }
            }
          }
            allMarkdownRemark(filter: {frontmatter: {title: {ne: ""}}}) {
              edges {
                node {
                  frontmatter {
                    title
                    slug
                  }
                }
              }
            }
          allCockpitAuthors(filter: {lang: {eq: "id"}}) {
            edges {
              node {
                title {
                  slug
                  value
                }
              }
            }
          }
        
        allCockpitOldpage(filter: {lang: {eq: "id"}}) {
          edges {
            node {
              title {
                value
              }
            }
          }
        }
        }
          `
         ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }

        
        paginate({
          createPage, 
          items: result.data.allCockpitMarkdown.edges, 
          itemsPerPage: 10, 
          pathPrefix: '/',  
          component: PaginateTemplate,
        })

        const pages = result.data.allMarkdownRemark.edges
        pages.forEach(( post,index ) => {
          createPage({
            path: `/${post.node.frontmatter.slug}/`,
            component: markdown,
            context: {
              slug: post.node.frontmatter.slug,
              previous: index === 0 ? null : pages[index - 1].node,
              next: index === (pages.length - 1) ? null : pages[index + 1].node,
            },
          });
          createPage({
            path: `${post.node.frontmatter.slug}/amp/`,
            component: amp,
            context: {
              slug: post.node.frontmatter.slug,
              previous: index === 0 ? null : pages[index - 1].node,
              next: index === (pages.length - 1) ? null : pages[index + 1].node,
            }
          });
        })
        const oldpage = result.data.allCockpitOldpage.edges
        oldpage.forEach(( {node} ) => {
          createPage({
            path: `/${node.title.value}`,
            component: oldPageTemplate,
            context: {
              slug: node.title.value
            },
          })
        })
    
      })
    
  return Promise.all([allItems, desainPageResults,statistikPageResults, kurikulumPageResults, ekonomiPageResults,pengembanganDiriPageResults,coronaPageResults,teknologiPageResults ]);
}

我不知道该怎么做。

Answer 1

您的gatsby-node.js 让我有点困惑。但是，我会尝试在您的createPage 之前检查页面slug 是否存在于您的pathnames 数组中。如果是这样，您应该通过pageContextApi 发送一个参数来渲染或不渲染<Header> 组件。

举个例子：

paginate({
  createPage, 
  items: result.data.allCockpitMarkdown.edges, 
  itemsPerPage: 10, 
  pathPrefix: '/',  
  component: PaginateTemplate,
  context: {
    shouldRenderHeader: pathnames.includes(slug)
    // other stuff
   }
})

这将设置为布尔值 (true/false) shouldRenderHeader 上下文。在之前的 sn-p 中，PaginateTemplate 将在 props.pageContext 中包含此信息。