Question

默认情况下，Gatsby使用frontmatter来定义路径，例如：

---
path: /example-page
---

然后通过GraphQL使用它。

通过不在每个文件中编写frontmatter部分来定义所有markdown文件的路径的最佳方法是什么，但在一个文件中，作为一个实例，如下所示：

[
    {
        "title": "Example",
        "path": "/example-page.md"
    }
]

Answer 1

您可以通过在创建页面时添加路径来实现此目的。

在gatsby-node：

中添加此内容

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

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

  const { createNodeField } = boundActionCreators

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

    const slug = createFilePath({
      node,
      getNode,
      basePath: `pages`
    })

    createNodeField({
      node,
      name: `slug`,
      value: `/pages${slug}`
    })

  }

};

createFilePath将pages目录中的markdown文件转为/pages/slug。

createNodeField创建名为＆＃39; slug＆＃39;的新查询能力字段。

现在在graphql你可以访问slug：

{
  allMarkdownRemark {
    edges {
      node {
        fields {
          slug
        }
      }
    }
  }
}

然后您可以像往常一样使用新的段塞字段作为页面路径来创建页面。

通过它，您可以在graphql中访问的数据中添加标题和所需的全部内容。

此处示例：https://www.gatsbyjs.org/tutorial/part-seven/

如何在一个文件中定义Gatsby降价页面路径？

1 个答案: