0

在Gatsby 教程第 6 部分中，您可以找到多次提及“节点类型”：

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

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

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

我的目标是创建一个页面树，如：

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

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

但我不知道如何创建我应该使用的命名节点类型，mdx如{mdx.slug}.js.

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

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

2 回答 2

0

根据文档：

gatsby-plugin-mdx自动slug向每个 MDX 节点添加一个字段，其中包含文件的.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 访问），因此您将能够使用文件系统路由 API（如blog/{article.slug}.tsx.

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

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

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

于 2021-11-19T06:02:13.210 回答
-1

我认为您实际上将文件名称{mdx.slug}.js为src/pages/{mdx.slug}.js. 这是一种告诉 gatsy 该文件将用于动态mdx.slug.

于 2021-11-18T22:13:25.393 回答