如何使用remark-frontmatter访问Markdown文档中的Frontmatter？

你需要借助remark-frontmatter识别Frontmatter节点，再通过遍历语法树解析节点内容，具体步骤如下：

1. 安装依赖 #

需要安装核心处理包、Frontmatter识别包、YAML解析包，以及语法树遍历工具：

npm install remark remark-frontmatter remark-rehype rehype-stringify yaml unist-util-visit

2. 编写处理代码 #

通过remark构建处理流程，先识别Frontmatter节点，再遍历语法树提取并解析内容，最后转换HTML：

import { remark } from 'remark';
import remarkFrontmatter from 'remark-frontmatter';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
import { parse } from 'yaml';
import { visit } from 'unist-util-visit';

// 你的Markdown内容
const mdContent = `---
title: Title
---

# This is a heading`;

async function processMarkdown() {
  // 用来存储解析后的Frontmatter
  let frontmatter = {};

  const htmlResult = await remark()
    // 第一步：让remark识别YAML格式的Frontmatter
    .use(remarkFrontmatter)
    // 第二步：自定义插件遍历语法树，提取并解析Frontmatter
    .use(() => (tree) => {
      // 遍历语法树，找到类型为yaml的节点
      visit(tree, 'yaml', (node) => {
        // 用yaml包解析节点中的文本内容
        frontmatter = parse(node.value);
      });
    })
    // 后续步骤：把Markdown转成HTML
    .use(remarkRehype)
    .use(rehypeStringify)
    .process(mdContent);

  // 输出结果
  console.log('提取的Frontmatter:', frontmatter);
  console.log('转换后的HTML:', htmlResult.toString());
}

processMarkdown();

关键说明 #

• remark-frontmatter的作用只是让remark把---包裹的内容识别为语法树中的yaml节点，不会自动解析内容；
• 我们通过unist-util-visit遍历语法树，找到yaml节点后，用yaml包解析节点的value属性，就能得到结构化的Frontmatter对象；
• 转换HTML时，yaml节点会被自动忽略，不会出现在最终的HTML输出里。

内容的提问来源于stack exchange，提问作者muell