Gridsome 中的 Transformer 轉換器

Transformer 轉換器是用來解析文件內容的。只要在 package.json 中安裝了 transformer，Gridsome 就會自動使用這個轉換器。

Transformer API

指定 Mime 類型

transformer.mimeTypes()

一個轉換器必須具備靜態 mimeTypes() 方法，該方法返回一個數組，數組的值是轉換器可以解析的 mime 類型。

解析內容

transformer.parse(source)

一個轉換器還必須有一個 parse() 方法，該方法用來解析內容。

自定義 GraphQL 字段

transformer.extendNodeType()

轉換器也能夠經過實現 extendNodeType() 方法來擴展 GraphQL 中的字段。

示例

class Transformer {
  static mimeTypes () {
    return ['application/json']
  }

  parse (source) {
    const { title, ...fields } = JSON.parse(source)
    return { title, fields }
  }

  extendNodeType ({ graphql }) {
    return {
      // custom GraphQL fields for transformed node
    }
  }
}

module.exports = Transformer

@gridsome/transformer-remark 插件源碼解析

Gridsome 經過 remark 轉換 Markdown 的轉換器。

經過解析 @gridsome/transformer-remark 插件的源碼，便可知道在頁面中能夠經過 graphql 查詢語句獲取到 markdown 文件中的那些信息。

parse() 方法

const parse = require('gray-matter')

class RemarkTransformer {
  parse (source) {
    const { data, content, excerpt } = parse(source, this.options.grayMatter || {})

    // if no title was found by gray-matter,
    // try to find the first one in the content
    if (!data.title) {
      const title = content.trim().match(/^#+\s+(.*)/)
      if (title) data.title = title[1]
    }

    return { content, excerpt, ...data }
  }
}

由 RemarkTransformer 的 parse() 方法，可知 @gridsome/transformer-remark 插件是經過另一個插件 gray-matter 來解析 markdown 內容的。

關於 gray-matter

gray-matter 的做用是從字符串或文件中解析 front-matter 前置內容的。默認狀況下解析的是 YAML 格式的前置內容。且可設置自定義解析選項。

front-matter 的 YAML 格式以下：

---
title: Hello
author: dora
---
<h1>Hello world!</h1>

經過 gray-matter 解析後返回：

{
  content: '<h1>Hello world!</h1>',
  data: { 
    title: 'Hello', 
    author: 'dora' 
  }
}

gray-matter 也可解析 JSON 格式的前置內容：

---
{
  title: 'Hello',
  author: 'dora'
}
---
# Hello world!

解析後返回：

{
  content: '# Hello world!',
  data: { 
    title: 'Hello', 
    author: 'dora' 
  }
}

extendNodeType() 方法

extendNodeType () {
  return {
    content: {
      // 經過 remark-parse 以及，
      // gridsome.config.js 文件中傳入的 transformer 選項，
      // 處理 gray-matter 解析完的 content 內容。
    },
    headings: {
      // 獲取 content 內容中的全部的標題數據，
      // 包含字段爲 { depth, anchor, value }
    },
    timeToRead: {
      // 閱讀時間，默認一分鐘 230 個字
    }
  }
}

轉換示例

markdown 內容以下：

---
title: Test
date: 2019-12-26
author: Dora
---

# H1 Test Title

這是 **markdown** 文件的內容區，請 `在此` 將您出衆的思想分享給你們！

graphQL 查詢語句以下：

<!-- templates/Post.vue -->
<page-query>
  query ($id: ID!) {
    post(id: $id) {
      title
      content
      date (format: "YYYY-MM-DD")
      headings {
        depth
        anchor
        value
      }
    }
  }
</page-query>

轉換後返回的數據：

data: {
  post: {
    title: "Test",
    content: `<h1 id="h1-test-title"><a href="#h1-test-title" aria-hidden="true"><span class="icon icon-link"></span></a>H1 Test Title</h1>↵<p>這是 <strong>markdown</strong> 文件的內容區，請 <code>在此</code> 將您出衆的思想分享給你們！</p>↵`,
    date: "2019-12-26",
    headings: [{
      depth: 1, 
      anchor: "#h1-test-title", 
      value: "H1 Test Title"
    }],
  }
}

一通百通

關於 gridsome 中轉換其它文件類型的 transformer 轉換器。

• @gridsome/transformer-yaml：Gridsome 的 YAML 轉換器
• @gridsome/transformer-json：Gridsome 的 JSON 轉換器
• gridsome-transformer-vue：Gridsome 的 VUE 轉換器
• ...