使用 frontmatter

如果你要书写博文，那么你一定不会错过 frontmatter。这能为你的博文添加更多有效信息。

一个典型的 frontmatter 是这样的：

---
title: "Hello World"
date: "2020-08-08"
image： “2020-08-08/1.png”
---

＃ your title

content here

这样，前面的 title 属性就能作为我们归档等页面的检索信息。

要了解更多 frontmatter 的信息，可以自行百度。

添加 filesystem 模块

这里使用 yarn，npm 与 yarn 非常相近，可以快速上手。

先理解下的需求：你书写的是一个个 markdown 文件。现在你需要将他们转化为一个个页面。

那么你自然少不了 gatsby-source-filesystem 模块了。它可以让 gatsby 读取你的文件。

yarn add gastby-source-filesystem

然后修改你的 gatsby-config.js:

plugins:[{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `static`,
        path: `${__dirname}/markdown`,
      },
    }
        // other plugins
]

上面的 __dirname 表示的是你的项目的根目录，你需要将 path 配置到你的对应 markdown 存放文件夹。

这里不得不吐槽下。虽然 gatsby 宣称使用 react，可以轻易使用 react 模块与任何兼容的 npm 模块，但是由于其环境与 react 差别很大，所以很多插件兼容性不是那么好。

举例来说，gatsby 基于 react 的 server side render（ssr）。那么你就不能使用不支持 ssr 的模块，同时开发时需要小心避免踩到雷。

此外，似乎 gatsby 的生命周期与 react 有一定区别，事实上我看到的官网教程也很少用到。

总之，一个 gatsby 项目下来，打开你的 package.json，你会发现几乎全都是 gatsby 开头的插件。如果你期望搜寻一个包，你需要做的第一件事是看看官方有没有提供，这样兼容性最好。

添加 transformer-remark 模块

这个是用来将 markdown 转化为 html 的。而我们的 frontmatter 也自然在这里被解析。

yarn add gatsby-transformer-remar

然后配置：

plugins:[{
    resolve: `gatsby-transformer-remark`,
    options:{
        plugins:[]
    }
    }
        // other plugins
]

在 gatsby 里为 markdown 添加代码高亮等插件也很容易。只要在 plugins 内加入插件配制即可。本篇主要讲述 front matter。

使用完毕后，你可能需要检测下是否成功，在你 source-filesystem 目录下添加一个 markdown：

---
title: "Hello World"
date: "2020-08-08"
image： “2020-08-08/1.png”
---

＃ your title

content here

然后按照官方说明进行操作即可。官方说明写的十分详细，可以直接翻阅，这里不赘述了。

重要的是下一部分。

为　frontmatter 添加类型约束

gatsby 本身具有强大推断能力，比如你的一个 markdown frontmatter是这样的：

---
title: "Hello World"
date: "2020-08-08"
images：
    - src： “2020-08-08/1.png”
      alt： “hello world”
    - src： “2020-08-08/2.png”
---

那么 gatsby 会自动识别变量 title 为 String 类型，date 为 Date 类型。

这里需要注意 Date 似乎不是 Graphql 内置的类型，这个是 gatsby 内置的。所以使用这个 field 也许也会遇到下面问题。

但是看看我们的 images 属性，转化为 json 大概是这样的：

{
    “images”：[{
        "src": "2020-08-08/1.png",
        "alt": "hello world"
    },{
        "src": "2020-08-08/2.png"
    }]
}

结构复杂且不论，你的 src 属性应该如何理解？gatsby 提供了强大的图片处理能力，显然不可能不用。

那么 gatsby 如何能准确的把你的 src 正确识别 File 类型而不是 String 类型？显然我们不能依赖 gatsby 的推断。我们需要显式声明，确保这是 File 而不是 String。

这就是类型声明了。

声明内置属性

内置属性是指 graphql 内置的属性，如 Boolen， String 等等。详细可以查看文档。

要声明属性，我们需要在 gastby-node.js 中加入我们的类型。

比如对于 title 与 date 属性：

exports.sourceNodes = ({ actions, schema }) => {
  const { createTypes } = actions
  createTypes(`  
    type MarkdownRemarkUserFrontmatter {
      date: String!
      title: String
    }

    type MarkdownRemark implements Node @infer {
      frontmatter: MarkdownRemarkUserFrontmatter
    }
  `)
}

上面我们先声明了一个 MarkdownRemarkUserFrontmatter 类型，这个类型下有字段 date 与 title。它们的类型都是 String。区别在于 date 后面带有一个感叹号，这意味着这个字段是不可或缺的，如果缺少这个字段就会报错。而如果缺少 title，不会报错，对应的 title 会被置为 null。

然后我们让 frontmatter 应用这个类型就好了。这样 gatsby 就能准确的知道 date 与 title 字段的含义了。

一切都非常棒，直到你引用了 File 类型，因为你想让 gatsby 知道这是一个图片而不是字符串。

处理 File 类型

初见

你可能会这么写：

exports.sourceNodes = ({ actions, schema }) => {
  const { createTypes } = actions
  createTypes(`  
    type MarkdownRemarkUserFrontmatter {
      date: String!
      title: String
      image: File
    }

    type MarkdownRemark implements Node @infer {
      frontmatter: MarkdownRemarkUserFrontmatter
    }
  `)
}

然后启动你的 graphql。编译没有任何问题，直到你启动 graphiql。你试图去查询你的 image 属性，然后使用 childImageSharp 来处理它：

# ...
{
    absolutePath
    childImageSharp {
    fixed {
    srcWebp
}

报错了！提示你没有找到！这太迷惑了。然后你删除 image：File 这一行。

好了，你得到了经过 sharp 处理的图片！

什么鬼，，，

原因分析

File 不是 graphql 内置的类型，所以你的　graphql 无法理解它。

相对的， gatsby 的自动识别自然能优雅的处理它。问题是，你不能。

所以简单来说，你需要自己书写一个 File 类型。

这篇文章拯救了我，推荐大家去康康，这里只列出解决方法。

const path = require("path") // require path from nodejs

exports.createSchemaCustomization = ({ actions }) => {
  const { createFieldExtension } = actions
  createFieldExtension({
    name: 'imageFile',
    extend:()=>({
      resolve: function (src, args, context, info) {
        // look up original string, i.e img/photo.jpg
        const { fieldName } = info
        const partialPath = src[fieldName]
        if (!partialPath) {
          return null
        }

        // get the absolute path of the image file in the filesystem
        const filePath = path.join(
          __dirname,
          // !!!CHANGE THIS TO YOUR OWN PATH!!!
          'markdown',
          partialPath
        )

        // look for a node with matching path
        // check out the query object, it's the same as a regular query filter
        const fileNode = context.nodeModel.runQuery({
          firstOnly: true,
          type: 'File',
          query: {
            filter: {
              absolutePath: {
                eq: filePath
              }
            }
          }
        })

        // no node? return
        if (!fileNode) {
          return null
        }

        // else return the node
        return fileNode
      }
    })
  })
}

exports.sourceNodes = ({ actions, schema }) => {
  const { createTypes } = actions
  createTypes(`  
    type ImageUserInfo @infer {
        # !!!SHOW YOUR NAME HERE!!!
      src: File @imageFile
      alt: String
    }
    
    type MarkdownRemarkUserFrontmatter @infer {
      date: String!
      title: String
      motion: String
      tag: String
      weather: String
      images: [ImageUserInfo]
    }

    type MarkdownRemark implements Node @infer {
      frontmatter: MarkdownRemarkUserFrontmatter
    }
  `)
}

嗯，坑真多。

gatsby frontmatter 正确使用方法

gatsby frontmatter 正确使用方法

使用 frontmatter

添加 filesystem 模块

添加 transformer-remark 模块

为　frontmatter 添加类型约束

声明内置属性

处理 File 类型

初见

原因分析

gatsby frontmatter 正确使用方法

使用 frontmatter

添加 filesystem 模块

添加 transformer-remark 模块

为 frontmatter 添加类型约束

声明内置属性

处理 File 类型

初见

原因分析

为　frontmatter 添加类型约束