在前端开发中，我们常常需要快速生成文档目录，rehype-toc 是一个可以自动生成文档目录的 npm 包。它可以方便地将 HTML 页面转换为一个带有目录的静态 HTML 页面。
rehype-toc 简介
rehype-toc 是一个基于 rehype 和 mdast 的 npm 包。rehype-toc 可以从 HTML 标题中自动生成目录。同时，它还提供了灵活的选项来控制生成的目录的深度和样式。
rehype-toc 安装
可以使用 npm 包管理器来安装 rehype-toc：
npm install rehype-toc
使用 rehype-toc
使用 rehype-toc 的第一步是将 HTML 文档转换为 mdast AST。然后，我们可以使用 rehype-toc 插件将 AST 转换为带有目录的 HTML：
-- -------------------- ---- -------
----- ------ - ------------------
----- --- - ----------------------
----- ---- - ------------ ----------------- ----------------- --------
----- --------- - --------
------- -- ---- -- -
-- ---- ---- ----- ----- -
------ -
----- -------
--------- -------------
--
--
--------- - --------- ------ ----- ----- ---
----- ------ - ----------------------------
-----------------------------在上述例子中，我们创建了一个 rehype 处理器，并使用了 rehype-toc 插件来生成目录。options.headings 参数指定了标题的级别。
rehype-toc 选项
rehype-toc 提供了以下选项：
- headings: 指定标题的级别（默认为 ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']）
- cssClasses: 为目录添加 CSS 类名（默认为空）
- cssClass: 为整个目录添加 CSS 类名（默认为空）
- wrapper: 用指定元素包裹目录（默认为 div）
- maxDepth: 控制目录的最大深度（默认为 6）
- tight: 控制目录列表项之间是否有空行（默认为 false）
rehype-toc 示例
下面是一个简单的示例，展示了如何使用 rehype-toc 通过 HTML 标题生成目录：
-- -------------------- ---- -------
--------- -----
------
------
----------------- ----------
-------
------
-------------
-----------------
-------- ------
--------- - --------
-------- -------
--------- -- --------
-------- ------
--------- - --------
-------- -------
--------- -- --------
-------
-------我们可以通过以下代码将上面的 HTML 文档转换为带有目录的 HTML：
-- -------------------- ---- -------
----- -- - --------------
----- ------ - ------------------
----- --- - ----------------------
----- ---- - ---------------------------- --------
----- --------- - --------
------- -- ---- -- -
------ -
----- -------
--------- -------------
--
--
--------- - --------- ------ ----- ----- ---
----- ------ - ----------------------------
-----------------------------执行以上代码后生成的输出如下：
-- -------------------- ---- -------
--------- -----
------
------
----------------- ----------
-------
------
---- ------------
-----
--- --------------------
--- -----------------
-- ---------------- ---------------------
--- --------------------
--- -----------------
-- ---------------- ------------------- -----
--- --------------------
--- -----------------
-- ---------------- -------------------- ------
-----
-----
-----
--- -----------------
-- ---------------- ------------------- -----
--- --------------------
--- -----------------
-- ---------------- -------------------- ------
-----
-----
-----
-----
-----
-----
------
--- -------------------
-----------------
--- ---------------- ------
--------- - --------
--- ----------------- -------
--------- -- --------
--- ---------------- ------
--------- - --------
--- ----------------- -------
--------- -- --------
-------
-------可以看到，目录已经被生成并添加到了文档的开头，而且目录链结构非常清晰易于理解。
总结
rehype-toc 是一个非常方便的 npm 包，可以帮助我们快速生成文档目录。在使用过程中只需要掌握基本的 API 和选项即可。希望本篇文章对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0588bb403f2923b035bef2