npm 包 wow-toc 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在前端开发过程中，经常需要写大量的文档。为了让文档更加易读易懂，我们经常需要在文档中添加目录。wow-toc 就是一个可以帮助我们自动生成目录的 npm 包。

wow-toc 将会根据 markdown 文本生成目录，支持多级标题，同时支持自定义样式和链接。

安装

你可以在 npm 中找到 wow-toc，通过以下命令在你的项目中安装 wow-toc：

npm install wow-toc --save-dev

使用

在 markdown 文档中，我们需要把要生成目录的标题文本用 '# ' 表示，wow-toc 会依据这些标题生成目录。

在你的项目中引入 wow-toc 并传入 markdown 文本即可生成目录。

import generateToc from 'wow-toc';

const yourMarkdownText = '# Hello World\n## Intro\n### First Paragraph\n### Second Paragraph\n## Body\n## Conclusion';

const toc = generateToc(yourMarkdownText);

以上代码将会生成以下 HTML：

-- -------------------- ---- -------
----
  ------ ------------------------- ---------
    ----
      ------ -----------------------
        ----
          ------ ----------------------------- ------------------
          ------ ------------------------------- ------------------
        -----
      -----
      ------ --------------------------
      ------ --------------------------------------
    -----
  -----
-----

可以看到以上代码生成了一个无序列表，其中包含了目录项和子目录项链接。

配置

wow-toc 还支持一些选项，这些选项可以通过在 generateToc 函数中传入一个选项对象来设置。

includes

用于设置需要在目录中包含的标题文本，如果没有设置 includes，wow-toc 将会包含所有的标题。

const options = {
  includes: ['Intro', 'First Paragraph']
};

const toc = generateToc(markdownText, options);

以上代码将会仅在目录中包含 'Intro' 和 'First Paragraph' 标题。

maximumLevel

用于限制生成目录中最大的标题级别，默认值为 3。

const options = {
  maximumLevel: 2
};

const toc = generateToc(markdownText, options);

以上代码将会仅在目录中包含最多两级标题。

linkTemplate

用于设置目录项链接生成模板。

const options = {
  linkTemplate: '<a href="#%ANCHOR%">%CONTENT%</a>'
};

const toc = generateToc(markdownText, options);

以上代码将会设置目录项链接为一个包含了锚点和内容的 a 标签。

anchorTemplate

用于设置目录项链接中的锚点生成模板。

const options = {
  anchorTemplate: '%LEVEL%-%CONTENT%'
};

const toc = generateToc(markdownText, options);

以上代码将会设置目录项链接中的锚点为由标题级别和标题文本组成的字符串。

listTemplate

用于设置目录元素包裹模板。

const options = {
  listTemplate: '<div class="toc"><ul>%LIST%</ul></div>'
};

const toc = generateToc(markdownText, options);

以上代码将会设置目录元素为一个包含在一个 div 容器中的无序列表。

总结

wow-toc 是一个非常实用的 npm 包，可以帮助我们自动生成目录。在写大量文档的时候，使用 wow-toc 可以节省我们很多时间。同时，wow-toc 还支持多种选项，可以根据我们的需要进行配置。建议大家在使用中多尝试一些不同的选项，并且根据你的项目需求自定义目录样式和链接。

如果你想查看更多 wow-toc 的配置选项和使用方法，可以查看官方文档 https://github.com/JustClear/wow-toc。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600671138dd3466f61ffe54a