将本地降价文件添加到 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/源文件系统

将文件转换为可以在组件中使用 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必填

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

类型名称

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

GraphQL 类型和模板名称。 src/templates 中的 .vue 文件必须与 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 文件。如果定义了多个索引名称，请确保每个目录只有一个可能的索引文件。