前言
在大多数网站和文档中，目录对于读者而言是一个非常重要的导航和定位工具。但是，对于一些静态 HTML 文件来说，手动编写目录是一件非常繁琐且容易出错的事情。此时，我们可以借助一个 npm 包 wikic-html-toc 来自动生成目录。
wikic-html-toc 是一个用于在 HTML 中自动生成目录的 npm 包。它非常容易使用，只需简单的几个步骤即可实现目录的自动生成。
本文将为大家详细介绍如何使用 npm 包 wikic-html-toc 实现 HTML 页面目录的自动生成，希望能够对前端开发工程师们提供帮助。
安装
首先，在使用 wikic-html-toc 之前，我们需要先在本地安装它。在命令行中输入以下命令即可完成安装：
npm install wikic-html-toc --save
使用方法
wikic-html-toc 的使用非常简单，只需执行以下几个步骤即可完成。
第一步：引入 wikic-html-toc
在使用 wikic-html-toc 之前，我们需要首先在 HTML 文件中引入它：
<script src="./node_modules/wikic-html-toc/dist/wikic-html-toc.min.js"></script>
第二步：为目录元素设置 id
使用 wikic-html-toc 之前，我们需要为 HTML 页面中想要生成目录的元素设置 id，以便后续使用。
下面是一个示例代码：
-- -------------------- ---- ------- --- ----------------------- ------------- --- ------------------------- ------------- --- ------------------------- -------------
在上面的示例代码中，我们为每个标题元素都设置了一个唯一的 id。
第三步：为目录容器设置 id
在 HTML 页面中，我们需要为容纳生成目录的元素设置 id，以便后续使用。
下面是一个示例代码：
<div id="toc-container"></div>
在上面的示例代码中，我们使用一个 div 元素作为目录容器，并为其设置了一个唯一的 id。
第四步：调用 wikicHtmlToc.generate()
在 HTML 页面中，我们需要在载入页面时调用 wikicHtmlToc.generate() 方法来生成目录。
下面是一个示例代码：
<script>
wikicHtmlToc.generate({
container: '#toc-container',
selectors: 'h1,h2,h3'
});
</script>在上面的示例代码中，我们调用了 wikicHtmlToc.generate() 方法，并传入了一个配置对象。其中，container 属性表示目录容器的选择器，selectors 属性表示要生成目录的元素的选择器。
最后，我们就可以通过访问 HTML 页面来查看生成的目录了。
总结
在本文中，我们介绍了如何使用 npm 包 wikic-html-toc 来自动生成 HTML 页面的目录。
wikic-html-toc 使用简单，只需要几个简单的步骤即可完成目录的自动生成。通过使用 wikic-html-toc，我们可以大大提高编写 HTML 页面目录的效率。
希望本文对前端开发工程师们有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595e81e8991b448d6c54