如何在 Gatsby 中定义“节点类型”？

Question

在Gatsby tutorial part 6，您可以找到多次提及“节点类型”：

根据 API，您需要在创建收集路由之前确定两件事：

• 从哪种类型的节点创建页面。
• 要在 URL 中使用该节点类型中的哪个字段。

要创建新的收集路径，请将文件命名为 {nodeType.field}.js，其中 nodeType 是您要从中创建页面的节点类型，field 是您要创建的该节点类型的数据字段在该页面的 URL 中使用。

我的目标是创建一个像这样的页面树：

• index.tsx
• blog/{article.slug}.tsx
• projects/{project.slug}.tsx
• tags/{tag.id}.tsx

所有文章、项目和标签都是MDX文件，但在特定位置或frontmatter prop查询。

但是我不知道如何创建命名节点类型，我应该像 mdx in {mdx.slug}.js 那样使用它。

我什至尝试添加 gatsby-source-filesystem 的实例和 name 以用作类型，但它不起作用：

plugins: [
  // ...
  {
    resolve: "gatsby-source-filesystem",
    options: {
      path: `${__dirname}/_data`,
      name: "instances",
      __key: 'instances'
    }
  },
  "gatsby-plugin-mdx"
}

Answer 1

根据docs：

gatsby-plugin-mdx 自动为每个 MDX 添加一个slug 字段 节点，其中包含.mdx 文件的文件名字符串 （删除了 .mdx 扩展名）。您可以看到slug 字段的 GraphiQL 中每个 MDX 节点的值。如果您运行以下查询：

所以你只需要使用gatsby-plugin-mdx 根据文件名创建一个slug：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts/`,
      },
    },
    {
      resolve: "gatsby-plugin-page-creator",
      options: {
        path: `${__dirname}/src/posts`,
      },
    },
    `gatsby-plugin-mdx`,
  ],
}

注意：gatsby-plugin-page-creator 可能是必需的，具体取决于您所需的文件夹结构/来源

一旦您正确设置了文件夹结构，您的 slug 字段 will 就可用（因为该节点将从插件中推断出来并可由 GraphQL 访问），因此您将能够使用 Filesystem Route API 创建页面，例如blog/{article.slug}.tsx.

应用于您的代码，这意味着您只需要使用/pages/blog/{mdx.slug}.js。

根据您所说，您需要创建多个gatsby-source-filesystem 的实例来创建多个源。

由于你的index.tsx不会被动态创建，你可以直接在/pages文件夹下创建。

Answer 2

我认为您实际上将文件名称为{mdx.slug}.js，就像在src/pages/{mdx.slug}.js 中一样。 这是一种告诉 gatsy 该文件将用于动态mdx.slug 的方法。