在进行前端开发的过程中，我们经常会使用到一些开源的工具或者库，其中 npm 是开发者最为熟悉的包管理工具之一。在 npm 中，有很多优秀的包用于辅助开发者完成各种工作。本文主要介绍的是一个 npm 包，那就是 Metalsmith-Headings-Identifier。
Metalsmith-Headings-Identifier 是一个能够自动为 HTML 文档中的标题元素生成一个唯一的标识符的插件。通过该插件的使用，开发者可以自动化地在 HTML 中生成锚点、面包屑导航等内容。在这篇文章中，我们将会介绍该插件的具体使用方法，并配合示例代码来演示它的实际应用。
安装 Metalsmith-Headings-Identifier
要使用 Metalsmith-Headings-Identifier，我们首先需要在全局环境下安装 Node.js 和 npm，这里就不再赘述了。接着，在项目中使用以下命令来安装该插件：
npm install metalsmith-headings-identifier
安装完成后，我们需要将该插件添加到 Metalsmith 的插件列表中使用。
配置 Metalsmith-Headings-Identifier
在使用 Metalsmith-Headings-Identifier 之前，我们需要了解一下该插件支持的选项。下面是该插件的配置项：
pattern：指定哪些文件需要被处理，默认为**/*.htmlselector：指定哪些元素需要被处理，默认为h1,h2,h3,h4,h5,h6attribute：指定生成的唯一标识符的属性名，默认为idseparator：指定生成的唯一标识符的分隔符，默认为-lowercase：指定生成的唯一标识符是否需要转为小写，默认为truesanitize：指定是否需要对生成的唯一标识符进行清理，默认为false
在了解了这些选项之后，我们可以通过以下代码来配置 Metalsmith-Headings-Identifier：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------------------ - ------------------------------------------
---------------------
-------------------------
-------- ------------
--------- --------------------
---------- -----
---------- ----
---------- -----
--------- -----
---
------------ -- -
-- ----- ----- ----
---在这段代码中，我们使用了 metalsmith-headings-identifier 插件来处理当前文件夹中的所有 .html 文件，并将生成的唯一标识符添加到每个标题元素的 id 属性中。输出结果与输入文件夹结构完全一致，并且在 HTML 文档中的标题元素都会拥有一个唯一的标识符。
示例代码
在上一节中，我们已经简单地介绍了 Metalsmith-Headings-Identifier 的用法。下面，我们将会通过实际的示例代码来深入了解它的应用。
假设我们有一个 HTML 页面，它包含三个标题元素以及一些正文内容。现在，我们需要自动为该页面的标题元素生成一个唯一的标识符，并将其添加到 id 属性中。示例如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- ------------ ------- ------ ------------ ----------- ------------ ----------- ------------ ----------- ------- -------
当我们使用 Metalsmith-Headings-Identifier 之后，该页面就会变成下面这个样子：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- ------------ ------- ------ --- ----------------- ----------- --- ----------------- ----------- --- ----------------- ----------- ------- -------
在这段示例代码中，我们可以看到每个标题元素都拥有一个唯一的标识符。此时，我们就可以通过该标识符来实现一些其他的需求，比如为每个标题生成相应的锚点、生成面包屑导航等等。
结语
通过本篇文章，我们了解了 npm 包 Metalsmith-Headings-Identifier 的用法。使用该插件可以自动化地为 HTML 页面中的标题元素生成唯一的标识符，并且支持多种选项进行配置。在编写前端页面时，如果需要为标题元素添加标识符，推荐使用该插件进行处理，可以极大地提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/metalsmith-headings-identifier