如何在Gatsby-node.js中动态创建多种页面类型 [英] How to create multiple page types dynamically in Gatsby-node.js

问题描述

我在Gatsby-node.js中为博客文章的故事书内容创建一个新页面，如下所示:

I create a new page per post for my blogpost storybook content in my Gatsby-node.js like so:

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

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

    resolve(
      graphql(
        `{
          stories: allStoryblokEntry(filter: {field_component: {eq: "blogpost"}}) {
            edges {
              node {
                id
                name
                slug
                field_component
                full_slug
                content
              }
            }
          }
        }`
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }

        const entries = result.data.stories.edges

        entries.forEach((entry) => {
          const page = {
            path: `/${entry.node.full_slug}`,
            component: storyblokEntry,
            context: {
              story: entry.node
            }
          }
          createPage(page)
        })
      })
    )
  })
}

但是我还想为每个帖子创建一个页面，用于另一种称为位置的内容类型，该页面的设置方法相同:

But I also want to create a page per post for another content type called locations which is set up in the same way:

组件 src/templates/locations.js

Component src/templates/locations.js

Storyblok字段组件 位置"

如何在Gatsby-node.js中创建两种页面类型?任何帮助将不胜感激！

How do I create both the page types inside Gatsby-node.js? Any help would be hugely appreciated!

推荐答案

您需要重构您的方法，为每个查询结果分配一个变量，为entries(result1)分配一个变量，为locations(locations c3>).下一步将以相同的方式进行，对每个结果进行迭代，并对每个所需的值调用createPage.

You need to refactor your approach, assigning one variable for each query result, one for entries (result1) and one for locations (result2). The next step is to proceed in the same way, iterating for each result and calling createPage for each desired value.

 const path = require(`path`)
    const { createFilePath } = require(`gatsby-source-filesystem`)
    
    exports.createPages = async ({ graphql, actions, reporter }) => {
      const { createPage } = actions
      const storyblokEntry = path.resolve('src/templates/blog-entry.js')
      const storyblokLocation = path.resolve('src/templates/locations.js')

      const result1 = await graphql(`{
              stories: allStoryblokEntry(filter: {field_component: {eq: "blogpost"}}) {
                edges {
                  node {
                    id
                    name
                    slug
                    field_component
                    full_slug
                    content
                  }
                }
              }
            }`
      )
    
      if (result1.errors) {
        reporter.panicOnBuild(
          `There was an error loading your blog posts`,
          result.errors
        )
        return
      }
    
      const entries = result1.data.stories.edges
    
      entries.forEach((entry) => {
        const page = {
          path: `/${entry.node.full_slug}`,
          component: storyblokEntry,
          context: {
            story: entry.node
          }
        }
        createPage(page)
      })
    
      //add here your query to locations schema. I've used your previous one
      const result2 = await graphql(`{ //
              stories: allStoryblokEntry(filter: {field_component: {eq: "blogpost"}}) {
                edges {
                  node {
                    id
                    name
                    slug
                    field_component
                    full_slug
                    content
                  }
                }
              }
            }`
      )
      if (result2.errors) {
        reporter.panicOnBuild(
          `There was an error loading your blog posts`,
          result.errors
        )
        return
      }
    
      const locations = result2.data.stories.edges
      locations.forEach((entry) => {
        const page = {
          path: `/${entry.node.full_slug}`, //customize with your data
          component: storyblokLocation, //customize with your data
          context: {
            story: entry.node //customize with your data
          }
        }
        createPage(page)
      })
    }

这篇关于如何在Gatsby-node.js中动态创建多种页面类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！