简介
Hexo 是一个快速、简单、强大的静态博客框架，而 hexo-invision 则是一个可以为 Hexo 生成文章目录的 npm 包。通过简单的安装和配置，能够在文章中方便地生成文章目录，方便用户快速浏览。
安装
首先需要确保安装了 Node.js 和 Hexo。在 Hexo 的工作目录下，通过以下命令来安装 hexo-invision：
npm install hexo-invision --save
配置
在 Hexo 的配置文件 _config.yml 中，需要添加以下配置：
-- -------------------- ---- -------
---------
------- ----
--------
-----------
- ---- - --------
-----
- ---------- - --------
------ - - ----
--------- ---- - --------------
------------ ------ - ----enable：是否启用 hexo-invisionexclude：排除不需要生成目录的分类和标签depth：目录深度，即需要显示的标题级别separate：是否对分类和标签生成单独的目录defaultText：目录的标题文本
使用
在需要生成目录的文章中，需要添加以下内容：
<%- toc() %> <!-- 生成目录需要的标记 -->
例如，在文章头部添加以下内容：
-- -------------------- ---- ------- --- ------ ------ ----- ---------- ----------- - -- ----- - ---- --- --- ----- --
在生成的 html 中，会自动在文章中的标题下生成目录。
示例代码
以下是一个简单的示例，用来展示如何使用 hexo-invision。
安装 Hexo
首先需要安装 Hexo。
npm install hexo-cli -g
新建 Hexo 项目
hexo init my-blog cd my-blog npm install
安装 hexo-invision
npm install hexo-invision --save
配置 hexo-invision
打开 Hexo 的配置文件 _config.yml，添加以下内容。
invision: enable: true depth: 3 separate: true defaultText: '文章目录'
新建文章并使用 hexo-invision
在 Hexo 项目中新建一篇文章 source/_posts/hello-world.md，并添加以下内容：
-- -------------------- ---- ------- --- ------ ------ ------ ----- ---------- ----------- - -- ----- - ---- --- --- ----- -- - ---- ---- - ---- -- - ---- -- -- -- ------- -- -- ----
运行 hexo server，访问 http://localhost:4000/hello-world/ 即可查看文章目录。
总结
通过以上步骤，可以很方便地使用 hexo-invision 为 Hexo 生成文章目录。在撰写较长的文章时，有目录的支持可以让读者更方便地浏览和阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672681e8991b448e3a21