将本地Markdown文件添加到Gridsome中的GraphQL层

Question

在Gridsome中，如何将本地markdown文件添加到GraphQL层，以便可以add graphql to vue components？

在撰写本文时，adding data from local files的Gridsome文档为空。

Answer 1

入门博客也有一个有效的实现：https://github.com/gridsome/gridsome-starter-blog/blob/master/gridsome.config.js

source-filesystem的网格仓库有一些文档可以帮助您：https://github.com/gridsome/gridsome/tree/master/packages/source-filesystem

此处导入的文档以防将来链接断开（但链接可能是最新的）。

@ gridsome / source-filesystem

  

将文件转换为可以在组件中使用GraphQL获取的内容。

安装

• yarn add @gridsome/source-filesystem
• npm install @gridsome/source-filesystem

用法

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        typeName: 'BlogPost',
        route: '/blog/:year/:month/:day/:slug'
      }
    }
  ]
}

文件系统源还需要一个转换器才能解析文件。上面的示例正在寻找一组Markdown文件，因此为了使Gridsome了解文件的内容，必须在项目中安装@gridsome/transformer-remark作为开发依赖项。只要在package.json中找到支持文件的转换器，Gridsome就会自动为您转换文件。

选项

路径

• 类型：string 必填

在哪里查找文件。应该是全局路径。

typeName

• 类型：string
• 默认：'FileNode'

GraphQL类型和模板名称。 .vue中的src/templates文件必须与typeName匹配才能具有模板。

路线

• 类型：string

如果源能够具有特定的路径名​​结构，则定义动态路由。这将为该来源的所有节点生成一条路由。可能的路径参数是year，month，day，slug或任何自定义字段值。如果省略，则会根据每个文件的路径和文件名生成一个路由。进一步了解route params。

裁判

• 类型：object

定义将引用另一个节点的字段。引用的typeName应该存在。但是，如果您设置create: true，也可以自动创建内容类型。进一步了解references。

{
  refs: {
    // Reference to existing authors by id.
    author: 'Author',
    // Create a Tag content type and its nodes automatically.
    tags: {
      typeName: 'Tag',
      route: '/tag/:id',
      create: true
    }
  }
}

指数

• 类型：Array
• 默认：['index']

定义将哪些文件视为索引文件。这些文件的文件名不会出现在其路由路径中，并且将成为目录的主index.html文件。如果定义了多个索引名称，请确保每个目录只有一个可能的索引文件。