Question

我有一个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
        },
      })
    })
  })
}

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

Answer 1

因此，我认为您不应该两次导出createPages。

改为导出一次，并在同一函数中为两种类型的帖子创建页面。您可以轻松地将它们分别抽象到它们各自独立的async函数中，并在await中将它们createPages抽象出来，只是为了给您带来这种分离，以便您了解在此过程的每个步骤中正在创建什么页面。 / p>

类似这样的东西：

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

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

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

Answer 2

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

getDealStatusInfo(dealid) {
            var statusRes
            DealApiControllers.GetDealStatus(dealid,
                (response) => {
                    statusRes = response;
                    console.log(statusRes)
                },
                (error) => {
                    console.error(error);
                });

        }

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

2 个答案: