什么是@jsdevtools/rehype-toc
@jsdevtools/rehype-toc是一款基于rehype工具的npm包，它可以自动为你的文章或页面生成目录结构，加强了你页面的导航与阅读体验。
安装和引用@jsdevtools/rehype-toc
安装@jsdevtools/rehype-toc非常简单，只需要执行以下命令即可：
npm install @jsdevtools/rehype-toc
安装完成后，你可以在你的项目中引用它：
-- -------------------- ---- -------
----- ------ - ------------------
----- --- - ----------------------------------
-- --------
--------
---------
------------------ ----- ----- -- -
-- ----- ----- ----
--------------------------
---使用@jsdevtools/rehype-toc
@jsdevtools/rehype-toc提供了一些配置选项，来满足你在使用时的不同需求。
depth
depth是生成目录结构的深度，控制着目录结构的层级。默认值为3。
rehype()
.use(toc, { depth: 2 })cssClasses
cssClasses是为目录结构增加自定义类名，方便用户自定义样式。（如果需要的话）
rehype()
.use(toc, { cssClasses: { tocWrapper: "my-wrapper", listItem: "my-item" } })position
position是目录结构的插入位置，支持beforebegin、afterbegin、beforeend、afterend4 种位置可选。默认值为beforeend。
rehype()
.use(toc, { position: "beforeend" })slugify
slugify可以自定义标题的id，方便开发者针对不同的目录节点实现一些特殊样式或逻辑。默认使用github-slugger。这里提供了一个简单的使用slugify的示例：
-- -------------------- ---- -------
----- ------ - ------------------
----- -- - ----------------------------
-----------
--------
--------------------------------------- -
--------- ------------
----------- - ---- ----- --
-------- ------- -- --------------------------
--示例代码
以下为一个完整的示例代码，将markdown转换成HTML并生成目录结构：
-- -------------------- ---- -------
----- ------ - ------------------
----- --- - ----------------------------------
--------
--------- - ------ -- ----------- - ---- ----- -- --------- ----------- --
----------- ----- -
-- ----- ---
--- ----- -----
- ----- -
-- ----- ---
--- ----- ------- ----- ----- -- -
-- ----- ----- ----
--------------------------
---总结
通过本文，你已经学会了如何使用@jsdevtools/rehype-toc来为你的markdown文档添加自动生成的目录结构，便于浏览与阅读。同时，我们也掌握了目录结构的深度、类名、插入位置等配置方法，可以更好地满足不同需求。我相信这个npm包在未来的前端开发中会得到越来越广泛的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0590ef403f2923b035befe