在 Gatsby 中，使用 Wordpress 作为数据源，使用不同的模板创建不同的页面答案

【问题标题】：In Gatsby, using Wordpress as a data source, create different pages with different templates在 Gatsby 中，使用 Wordpress 作为数据源，使用不同的模板创建不同的页面
【发布时间】：2019-08-18 18:33:24
【问题描述】：

我有一个 Gatsby 网站，它正在从另一个 Wordpress 网站提取数据。它可以为帖子动态创建页面，但是一旦我添加了新的自定义帖子类型，它只会为这个创建页面，而不是帖子。所以基本上，它只为我添加到“gatsby-node.js”文件的最新帖子创建页面。看起来像这样：

const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`
    {
      allWordpressPost(sort: { fields: [date] }) {
        edges {
          node {
            title
            excerpt
            content
            slug
          }
        }
      }
    }
  `).then(result => {
    result.data.allWordpressPost.edges.forEach(({ node }) => {
      createPage({
        path: node.slug,
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          // This is the $slug variable
          // passed to blog-post.js
          slug: node.slug
        },
      })
    })
  })
}

//Create a page for each Property Post type
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`
    {
      allWordpressWpProperty {
        edges {
          node {
            slug
            title
            content
            featured_media {
              localFile {
                childImageSharp {
                  original {
                    width
                    height
                    src
                  }
                  }
              }
            }
            acf {
              size
            }
          }
        }
      }
    }
  `).then(result => {
    result.data.allWordpressWpProperty.edges.forEach(({ node }) => {
      createPage({
        path: node.slug,
        component: path.resolve(`./src/templates/property.js`),
        context: {
          // This is the $slug variable
          // passed to property.js
          slug: node.slug
        },
      })
    })
  })
}

当我尝试访问博客文章时，我得到的错误是“无法读取未定义的“页面”。有没有办法为两者创建页面？

【问题讨论】：

标签： wordpress gatsby wordpress-rest-api

【解决方案1】：

所以我认为您不应该将createPages 导出两次。

而是将其导出一次并在同一功能中为两种类型的帖子创建页面。您可以轻松地将它们抽象为各自独立的 async 函数和 await createPages 中的它们，只是为了给您这种分离，以便您知道每一步都在创建哪些页面。

类似这样的：

import createBlogPosts from "../somewhere";
import createPropertyPosts from "../somewhere";

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

  await createBlogPosts({ graphql, createPage });
  await createPropertyPosts({ graphql, createPage });
}

【讨论】：

【解决方案2】：

最终在同一个函数下添加了两个查询，并两次使用 createPage 函数得到不同的结果：

const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`
    query {
      allWordpressPost {
        edges {
          node {
            title
            excerpt
            slug
            link
          }
        }
      }

      allWordpressWpProperty {
        edges {
          node {
            slug
            title
            content
            featured_media {
              localFile {
                childImageSharp {
                  original {
                    width
                    height
                    src
                  }
                  }
              }
            }
            acf {
              size
            }
          }
        }
      }
    }
  `).then(result => {
    result.data.allWordpressPost.edges.forEach(({ node }) => {
      createPage({
        path: node.slug,
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          // This is the $slug variable
          // passed to blog-post.js
          slug: node.slug
        },
      })
    });

    result.data.allWordpressWpProperty.edges.forEach(({ node }) => {
      createPage({
        path: node.slug,
        component: path.resolve(`./src/templates/property.js`),
        context: {
          // This is the $slug variable
          // passed to property.js
          slug: node.slug
        },
      })
    });
  })
}

【讨论】：