如何使用 remark-frontmatter 访问 frontmatter？

Question

我正在尝试使用remarkjs生态系统来解析包含 markdown 和 frontmatter 的文件，并将其转换为 HTML。该文件可能如下所示：

---
title: Title
---

# This is a heading

我设法解析了markdown，这可以按照GitHub README文件中的示例来完成，而且我也知道有一个remark-frontmatter包。然而，仅仅使用前面提到的示例中的包就可以使解析器完全忽略 frontmatter 部分。当然，这部分不应该包含在 HTML 中，但我仍然想使用它。但据我所知，它不是输出的一部分。这让我想到了我的问题：如何使用这些包访问 frontmatter？我知道它正在过程中的某个地方被解析，但是我如何访问它？

Answer 1

我发现这些文档非常令人困惑，因为该插件最常见的用例remarkFrontmatter应该是使 frontmatter 在文件中可访问。然而，它并没有这样做，必须安装remarkParseFrontmatter才能获得该功能。

这里有几个工作版本。一种是 Unified，一种是 Remark。

import { unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkFrontmatter from 'remark-frontmatter'
import remarkParseFrontmatter from 'remark-parse-frontmatter'
import remarkStringify from 'remark-stringify'
import { remark } from 'remark';

// With Unified, which is a lower-level API that remark uses internally.

const fileOfUnified = unified()
  .use(remarkParse)
  .use(remarkStringify)
  .use(remarkFrontmatter, ['yaml', 'toml'])
  .use(remarkParseFrontmatter)
  .processSync(`---\ntitle: unified worked\n---`)

console.log(fileOfUnified.data.frontmatter); // {title: 'unified worked'}

// With Remark, which is built on top of Unified, basically by adding remarkParse and remarkStringify.

const fileOfRemark = remark()
  .use(remarkFrontmatter, ['yaml', 'toml'])
  .use(remarkParseFrontmatter)
  .processSync(`---\ntitle: remark worked\n---`)

console.log(fileOfRemark.data.frontmatter); // {title: 'remark worked'}