npm 包 metalsmith-headings 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，常常需要对文档进行处理，比如生成文档目录，按目录进行分割等等。Metalsmith-headings 是一个可以帮助前端开发人员对文档进行处理的 npm 包，本文就详细介绍如何使用它进行文档处理。

安装

在终端中运行以下 npm 命令安装 metalsmith-headings：

npm install metalsmith-headings --save-dev

使用方法

在你的 Metalsmith 配置文件中引入 metalsmith-headings：

const headings = require('metalsmith-headings');

metalsmith.use(headings(options));

options 是一个对象，用于定制化处理的方式。比如：

const options = {
  pattern: 'h2,h3', // 根据哪些标签生成目录
  linkTemplate: '<a href="#{id}">{text}</a>' // 标题链接的模版
}

metalsmith.use(headings(options));

在模板文件中，使用 {{toc}} 代表将生成的目录插入到模板中。

<div class="sidebar">
  {{toc}}
</div>
<div class="content">
  {{content}}
</div>

参数说明

pattern: 用于指定生成目录的哪些标签，可以对文档进行灵活的处理。默认为 h2,h3,h4
linkTemplate: 用于定义标题链接的生成方式，同样可以进行灵活的处理。这里使用了元素插入的方式，将链接插入到每个标题中：
```
const options = {
  linkTemplate: '<a href="#{id}">{text}</a>'
}
```

示例代码

-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------

---------------------
  ----------------
  ----------------------
  -----
    ----------
      -------- --------
      ------------- --- ------------------------
    --
  -
  -------------------- -
    -- ----- ----- ----
    ------------------ ------------
  ---

在上面的示例代码中，我们将会处理 ./src 目录下的所有文档，生成的目录将会根据 h2 和 h3 标签进行生成，并且将链接插入到每个标题中。

总结

使用 Metalsmith-headings 可以帮助前端开发人员对文档进行处理，从而更好地进行文档管理和维护。本文介绍了 metalsmith-headings 的安装和使用方法，并提供了详细的示例代码。希望本文能够对前端开发人员有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5ef2b97f8c4ce90ee4ca3b5e