Javascript 如何在Gatsby-node.js中动态创建多个页面类型

我在Gatsby-node.js中为我的blogpost故事书内容创建一个新页面，如下所示：

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

但我还想为另一种称为位置的内容类型创建每篇文章的页面，其设置方式与此相同：

组件 src/templates/locations.js

Storyblok字段组件 “地点”

---

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

您需要重构您的方法，为每个查询结果分配一个变量，为

条目分配一个变量（
result1
），为
位置分配一个变量（
result2
）。下一步是以相同的方式进行，对每个结果进行迭代，并对每个所需的值调用
createPage

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

您需要重构您的方法，为每个查询结果分配一个变量，为
条目（
result1
）分配一个变量，为
位置（
result2
）分配一个变量。下一步是以相同的方式进行，对每个结果进行迭代，并对每个所需的值调用
createPage

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