什么是 anchorific
anchorific 是一个可以将 HTML 文档中的标题转换成锚点链接的 npm 包。它能够帮助我们快速生成目录，并且可以使用户更方便地进行导航。
安装
使用 npm 可以安装 anchorific：
--- ------- ---------- ----------
安装完成后，我们需要在代码中引入依赖：
----- ---------- - ----------------------
使用方法
- 创建一个 Anchorific 实例：
----- ---------- - --- -------------
- 调用实例的
parse方法并传入 HTML 字符串作为参数：
----- ---------- - - ------------- -------------- ------------- --------------- -- ----- ------ - -----------------------------
result 就是经过转换的 HTML 字符串，其中的标题已经被替换成了锚点链接。
- 在页面上展示结果：
-------------------------------------------- - -------
配置选项
在创建 Anchorific 实例时，可以传入一个选项对象来配置其行为。以下是可用的选项：
selectors：一个数组，包含要转换的标题元素的 CSS 选择器。默认值为['h1', 'h2', 'h3', 'h4', 'h5', 'h6']。prefix：一个字符串，作为锚点链接的前缀。默认值为''。suffix：一个字符串，作为锚点链接的后缀。默认值为''。
例如，如果我们只想将 h2 和 h3 转换成锚点链接，并且希望链接前缀为 #，后缀为 -anchor，可以这样配置实例：
----- ---------- - --- ------------ ---------- ------ ------ ------- ---- ------- --------- ---
示例代码
以下是一个完整的示例代码，该代码将页面中的所有标题元素转换成锚点链接并生成目录：
--------- -----
------
------
----------------- ------------
-------
------
--------
-------------- ---------
---------
------
---- ---------------
---- -------------
-------------
--------------
-------------
---------------
------
-------
------- ----------------------------------------------------------------
--------
----- ---------- - --- -------------
----- ----------- - -----------------------------------
----- ------- - -------------------------------
----- ---------- - ----------------------
----- ------ - -----------------------------
--------------------- - -------
----------------- - --------------------
---------
-------
-------在上面的代码中，我们首先创建了一个 Anchorific 实例，并将页面内容作为参数进行转换。接着，我们将转换后的内容插入到页面上，并使用 getTOC 方法生成目录并插入到页面上的 nav 元素中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/38352