在前端开发中，我们经常会用到 markdown ，它是一种轻量级的标记语言，用以简化 HTML 的编写。我们可以使用一些 markdown 编辑器（如 VSCode、Typora 等）来编辑 markdown 文档，但是在将 markdown 渲染成 HTML 或者其他格式时，我们需要使用一些工具来进行转换。在这一过程中，Bisheng 是一个值得推荐的工具，它可以让我们采用 markdown 来编写文档，并快速渲染成静态 HTML 网站。Bisheng 提供了各种插件来扩展其功能，其中 bisheng-plugin-toc 是一个将 markdown 文档中的标题转换成目录的插件。
在本文中，我们将详细介绍如何使用 bisheng-plugin-toc 插件来为文档添加目录，并提供例子来帮助理解。
安装 bisheng-plugin-toc
使用 bisheng-plugin-toc 插件之前，我们需要先安装 Bisheng 及其他所需插件。
安装命令如下：
npm install --save-dev bisheng bisheng-plugin-react bisheng-plugin-toc
使用 bisheng-plugin-toc
在安装 bisheng-plugin-toc 之后，我们需要在 bisheng.config.js 中进行相应配置。以 bisheng.config.js 文件为例，我们可以将 bisheng-plugin-toc 插件配置为如下：
module.exports = {
plugins: ['bisheng-plugin-react', {
... //此处省略其他插件的配置
}, ['bisheng-plugin-toc', {
maxDepth: 6,
}]],
... //此处省略其他配置
}其中，maxDepth 为目录最大深度，默认为 3。
配置完成之后，我们只需要在 markdown 文件中添加标题即可自动生成目录。
示例
我们假设如下 test.md 文件为我们需要渲染成目录的 markdown 文件。
-- -------------------- ---- ------- - --- ------ -- ----- -------- --- ----- -------- --- ----- -------- -- ----- --------
我们将其渲染成静态页面仍需在 demo 目录下创建一个 index.md，代码如下：
-- -------------------- ---- ------- --- ------ ---- --- ---- ------ ------- ------------- --- -- -- ------- -------- --- ------------ - -- --- ------------------------------------------------- -- -- - ---- - -- --- ------------------------------------------------- -- -- - -- - --- ---------- -- -- -- ------- -------- --- ------------ - -- --- ------- -- -- - ---- - -- --- ------- -- -- - --
这样，通过执行 npm run bisheng 就可以生成静态网站了，具体操作见 Bisheng 的文档。
在该示例的渲染结果中，我们可以看到自动生成的目录信息，如下：
-- -------------------- ---- -------
----
------ -------------------
----
------ -----------------------
----
------ ----------------------------
------ ----------------------------
-----
-----
------ ----------------------------
-----
-----
-----从这里我们可以看到，经过 bisheng-plugin-toc 插件转换后，我们的 markdown 文件中的标题已经被转换成了嵌套的列表形式的目录，我们可以通过点击目录中的链接实现快速定位。
总结
在本文中，我们学习了如何使用 npm 包 bisheng-plugin-toc 来将 markdown 的标题自动生成为目录以方便用户定位内容。我们详细介绍了插件的安装和配置，还提供了一个示例来演示如何使用该插件。希望本文能对您学习前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64185