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