前言
在前端开发中,我们经常需要生成文档或者博客等静态页面,此时使用静态站点生成器是非常方便的。而 metalsmith-doctoc-jsdom 就是其中一个比较实用的 npm 包,它能够自动生成 TOC(Table of Contents)并且支持自定义样式。在这篇文章中,我们将深入浅出地介绍 metalsmith-doctoc-jsdom 的使用方法。
安装
使用 npm 安装 metalsmith-doctoc-jsdom:
--- ------- ----------------------- ----------
配置
在配置文件中引入 metalsmith-doctoc-jsdom 包:
----- ---------- - ---------------------- ----- ------ - ----------------------------------- --------------------- ---------------
在这个配置中,__dirname
是指当前项目的根目录,doctoc()
的括号中可以指定自己的配置,我们将在下文中详细说明。
配置项
pattern
此选项指定需要处理的文档文件,可以是 glob 模式的文件名,例如:
--------------------- ------------- -------- --------- ----
selector
此选项指定生成 TOC 的位置,可以是任何一个 jQuery Selector。例如:
--------------------- ------------- --------- ------ ----
format
此选项指定 TOC 的格式,有两种可选格式:list
和 nested
。其中,list
是普通列表的形式,nested
是嵌套列表的形式。例如:
--------------------- ------------- ------- -------- -- -- ------ ----
style
此选项指定 TOC 的样式,可以是任何一个 CSS Selector。例如:
--------------------- ------------- ------ ----- ------- ------ ----
maxDepth
此选项指定 TOC 的最大深度。例如:
--------------------- ------------- --------- - -- ---- - - ----
skipLevel
此选项指定是否跳过某一层的 TOC。例如:
--------------------- ------------- ---------- - -- ------ --- ----
title
此选项指定 TOC 的标题。例如:
--------------------- ------------- ------ ---- ----
ignore
此选项指定不需要处理的文档文件,可以是 glob 模式的文件名,例如:
--------------------- ------------- ------- -------------------- ----
示例代码
下面是一个完整的示例代码:
----- ---------- - ---------------------- ----- ------ - ----------------------------------- --------------------- ------------ ---------------- ------------- -------- ---------- --------- ------- ------- --------- ------ ----- ------- ------- --------- -- ---------- -- ------ ----- ------- -------------------- --- ---------------------- -------------------- - -- ----- ----- ---- ---
结语
metalsmith-doctoc-jsdom 是一个非常实用的 npm 包,它可以让我们在静态页面生成时,快速地生成 TOC 并且支持自定义样式。希望本文能够对您有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600559d581e8991b448d757d