npm 包 metalsmith-doctoc-jsdom 使用教程

前言

在前端开发中，我们经常需要生成文档或者博客等静态页面，此时使用静态站点生成器是非常方便的。而 metalsmith-doctoc-jsdom 就是其中一个比较实用的 npm 包，它能够自动生成 TOC（Table of Contents）并且支持自定义样式。在这篇文章中，我们将深入浅出地介绍 metalsmith-doctoc-jsdom 的使用方法。

安装

使用 npm 安装 metalsmith-doctoc-jsdom：

npm install metalsmith-doctoc-jsdom --save-dev

配置

在配置文件中引入 metalsmith-doctoc-jsdom 包：

const Metalsmith = require('metalsmith');
const doctoc = require('metalsmith-doctoc-jsdom');

Metalsmith(__dirname)
  .use(doctoc());

在这个配置中，__dirname 是指当前项目的根目录，doctoc() 的括号中可以指定自己的配置，我们将在下文中详细说明。

配置项

pattern

此选项指定需要处理的文档文件，可以是 glob 模式的文件名，例如：

Metalsmith(__dirname)
  .use(doctoc({
    pattern: "**/*.md"
  }));

selector

此选项指定生成 TOC 的位置，可以是任何一个 jQuery Selector。例如：

Metalsmith(__dirname)
  .use(doctoc({
    selector: '#toc'
  }));

format

此选项指定 TOC 的格式，有两种可选格式：list 和 nested。其中，list 是普通列表的形式，nested 是嵌套列表的形式。例如：

Metalsmith(__dirname)
  .use(doctoc({
    format: 'nested' // or 'list'
  }));

style

此选项指定 TOC 的样式，可以是任何一个 CSS Selector。例如：

Metalsmith(__dirname)
  .use(doctoc({
    style: '#toc {color: red;}'
  }));

maxDepth

此选项指定 TOC 的最大深度。例如：

Metalsmith(__dirname)
  .use(doctoc({
    maxDepth: 3 // 最多嵌套 3 层
  }));

skipLevel

此选项指定是否跳过某一层的 TOC。例如：

Metalsmith(__dirname)
  .use(doctoc({
    skipLevel: 2 // 跳过第二层的 TOC
  }));

title

此选项指定 TOC 的标题。例如：

Metalsmith(__dirname)
  .use(doctoc({
    title: '目录'
  }));

ignore

此选项指定不需要处理的文档文件，可以是 glob 模式的文件名，例如：

Metalsmith(__dirname)
  .use(doctoc({
    ignore: "**/node_modules/**"
  }));

示例代码

下面是一个完整的示例代码：

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

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

结语

metalsmith-doctoc-jsdom 是一个非常实用的 npm 包，它可以让我们在静态页面生成时，快速地生成 TOC 并且支持自定义样式。希望本文能够对您有所帮助。

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