在 Gatsby.js 中以编程方式创建多种类型的页面

Question

我正在使用 GatsbyJS 构建一个网站。我在两个不同的文件夹中有 markdown 文件：/content/collections并且/content/posts我希望 Gatsby 为每个 markdown 文件创建一个页面，并使用相应的模板（collection.js 和 post.js）。

所以我在 gatsby-node.js 文件中写了这个：

const path = require('path');

const { createFilePath } = require('gatsby-source-filesystem');

exports.onCreateNode = ({ node, getNode, actions }) => {

  const { createNodeField } = actions;

  if (node.internal.type === 'MarkdownRemark') {

    const longSlug = createFilePath({ node, getNode, basePath: 'content' });

    const slug = longSlug.split('/');

    createNodeField({

      node,

      name: 'slug',

      value: `/${slug[slug.length - 2]}/`,

    });

  }

};

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

  const { createPage } = actions;

  const result = await graphql(`

    query {

      allFile(filter: {relativeDirectory: {eq: "collections"}}) {

        edges {

          node {

            childMarkdownRemark {

              fields {

                slug

              }

            }

          }

        }

      }

    }

  `);

  result.data.allFile.edges.forEach(({ node }) => {

    createPage({

      path: node.childMarkdownRemark.fields.slug,

      component: path.resolve('./src/templates/collection.js'),

      context: {

        slug: node.childMarkdownRemark.fields.slug,

      },

    });

  });

};

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

  const { createPage } = actions;

  const result = await graphql(`

    query {

      allFile(filter: {relativeDirectory: {eq: "posts"}}) {

        edges {

          node {

            childMarkdownRemark {

              fields {

                slug

              }

            }

          }

        }

      }

    }

  `);

  result.data.allFile.edges.forEach(({ node }) => {

    createPage({

      path: node.childMarkdownRemark.fields.slug,

      component: path.resolve('./src/templates/post.js'),

      context: {

        slug: node.childMarkdownRemark.fields.slug,

      },

    });

  });

};

认为这会起作用。它确实适用于我放入的第二种类型。（在这种情况下，它创建帖子，但不创建集合。如果我颠倒调用 createPages 的顺序，它会交换，但它永远不会创建所有这些）

Answer 1

问题是您用第二个函数声明覆盖了第一个函数声明。有点像这样：var a = "hello"a = "world"createPage相反，您应该在单个函数中执行所有查询并调用要创建的所有页面，如下所示：exports.createPages = ({ graphql, actions }) => {  const { createPage } = actions;  const collections = graphql(`    query {      allFile(filter: {relativeDirectory: {eq: "collections"}}) {        edges {          node {            childMarkdownRemark {              fields {                slug              }            }          }        }      }    }  `).then(result => {    result.data.allFile.edges.forEach(({ node }) => {      createPage({        path: node.childMarkdownRemark.fields.slug,        component: path.resolve('./src/templates/collection.js'),        context: {          slug: node.childMarkdownRemark.fields.slug,        },      });    });  })  const posts = graphql(`    query {      allFile(filter: {relativeDirectory: {eq: "posts"}}) {        edges {          node {            childMarkdownRemark {              fields {                slug              }            }          }        }      }    }  `).then(result => {    result.data.allFile.edges.forEach(({ node }) => {      createPage({        path: node.childMarkdownRemark.fields.slug,        component: path.resolve('./src/templates/post.js'),        context: {          slug: node.childMarkdownRemark.fields.slug,        },      });    });  })  return Promise.all([collections, posts])};