简介
remark-behead 是一个用于 Markdown 文档头部解析的 npm 包。它能够解析 Markdown 文档中以 --- 开始和结束的头部注释，提供文档的元信息，例如标题，标签和作者等。
这个工具非常适合在构建文档网站时使用，由于大多数静态网站生成器（static site generator）都支持 Markdown 文档，因此可用于针对文章元素进行功能分组，按作者查找等使用场景。
在接下来的学习中，你将学习如何使用 remark-behead，对它进行配置，以及如何从 Markdown 文档中解析元信息。
安装
可以使用 npm 包管理器来安装 remark-behead。
npm install remark-behead
配置
要使用 remark-behead，你需要在你的项目中引入它，并将其添加到你的 Markdown 处理器。
const unified = require("unified");
const markdown = require("remark-parse");
const behead = require("remark-behead");
const converter = unified().use(markdown).use(behead);此配置将创建一个 unified 处理器，使用 remark-parse 进行 Markdown 解析，并将 remark-behead 添加到流中。
使用
一旦你创建了 converter，你就可以使用它来解析 Markdown 文档并提取头信息。
-- -------------------- ---- -------
----- ---- - -
---
------ -- ----- -------
-----
- ----------
- -------
---
- -- ----- -------
---- ------- -------
--
----------------------- ----- ------- -- -
-- ----- -
-------------------
-------
-
-------------------------------------
---在这个例子中，file 变量包含一个 Markdown 文档，带有一个头注释。这个文档解析后，将输出以下内容：
{
title: "My great article",
tags: ["JavaScript", "Node.js"]
}示例
让我们看一下一个完整的示例，演示如何在静态网站生成器中使用 remark-behead。
配置
假设我们正在使用 eleventy 作为静态网站生成器，我们需要将 remark-behead 添加到 eleventyConfig 并用于解析文档。在我们的配置文件中，我们可以添加以下内容：
-- -------------------- ---- ------- ----- ------ - ------------------------- ----- ------- - ------------------- ----- -------- - ------------------------ -- --- -------------------------- ----- -------------------------------------------- --
请注意，我们将 remark-behead 添加到 unified 处理器并冻结它，这是为了避免在每次解析 Markdown 文件时重新创建代码。
文档
现在我们可以在我们的 Markdown 文件头上添加注释来定义阅读自定义信息。下面是一个示例文档：
-- -------------------- ---- ------- --- ------ -- ---- ---- ------- ---- --- ----- - ---------- - ------- --- - -- ---- ---- ---- ------- -------
生成
最后，我们可以指示 eleventy 将元信息转换为 HTML。我们可以创建自定义 nunjucks 模板来完成这项工作。例如，以下代码片段将元数据输出到 HTML：
<h1>{{ title }}</h1>
{{ author }}
<ul>
{% for tag in tags %}
<li>{{ tag }}</li>
{% endfor %}
</ul>这样我们就可以创建静态网站并在页面中显示元信息。
结论
在这篇文章中，我们学习了如何使用 remark-behead 实现Markdown文档中的头信息解析，这对于构建具有元信息的文档非常有用。我们还演示了如何将 remark-behead 添加到静态网站生成器中，并在生成的静态网站中使用元信息。现在，我们可以开始利用 remark-behead 来更好地管理我们的文档，使我们的网站更易于管理和导航。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72709