在前端开发中，实现页面目录自动生成是一个常见需求。而 blear.ui.toc 就是一个实现这个功能的 npm 包。本文将详细介绍如何使用该 npm 包。
安装
安装 blear.ui.toc 前，你需要先安装 Node.js。安装完成后，可以在命令行终端中使用以下命令安装 blear.ui.toc：
npm install blear.ui.toc --save
基本用法
安装完成后，我们就可以在项目中使用该 npm 包了。以下是 blear.ui.toc 的基本使用方式：
-- -------------------- ---- ------- ------ --- ---- -------------- --- ----- --------- ---------- ---------------- -------------- ------ -- ------- ------------ ------ --- --
其中，各个参数的含义如下：
selector：目录容器的选择器。contentSelector：目标内容的选择器。level：目录展示的最大层级数。active：当前目录项被激活时的类名。speed：目录滚动到指定位置的动画速度，单位是毫秒，默认为 300ms。
进阶用法
除了基础用法，blear.ui.toc 还提供了丰富的选项，可以帮助你更好地适配你的网站。
转换标题文本
如果你想要转换标题文本，比如将标题文本全角化，可以使用 textConverter 选项。
-- -------------------- ---- -------
--- -----
--------- ----------
---------------- --------------
------ --
------- ------------
------ ----
-------------- -------------- -
------ ----------------------------- -------------- -
------ -------------------------------------- - -------
--
-
--支持锚点
如果你想要在点击目录项时直接跳转到对应位置，可以设置 scrollIntoView 选项为 true。
new Toc({
selector: '#my-toc',
contentSelector: '#my-content',
level: 3,
active: 'is-active',
speed: 300,
scrollIntoView: true
})自定义滚动容器
如果你想要将滚动容器指定为某个元素，你可以使用 scrollContainer 选项。
new Toc({
selector: '#my-toc',
contentSelector: '#my-content',
level: 3,
active: 'is-active',
speed: 300,
scrollContainer: document.querySelector('#my-scroll-container')
})其他选项
还有很多其他的选项可以配置，比如：
headerSelector：标题的选择器，默认为h1,h2,h3,h4,h5,h6。anchorPrefix：锚点的前缀，默认为toc-。listClass：目录列表的类名。
结论
通过本文的介绍，你可以掌握 blear.ui.toc 的基本使用方法，以及一些高级选项的使用。希望这篇文章能够帮助你实现页面目录自动生成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5451ab1864dac669ce