如何在Gatsby中定义节点类型？ [英] How to define "node type" in Gatsby?

问题描述

在Gatsby tutorial part 6中，您可以找到多次提到"；节点类型"；：

根据接口，在创建采集路径之前，您需要决定两件事：

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

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

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

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

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

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

我甚至尝试使用name添加gatsby-source-filesystem的实例作为类型，但不起作用：

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

推荐答案

根据docs：

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

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

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文件夹下创建。

这篇关于如何在Gatsby中定义节点类型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！