Hexo—如何设置文章目录(TOC)

目录
  1. 0. 导语
  2. 1. 修改主题的article.ejs文件
    1. 1.1 找到article.ejs文件路径
    2. 1.2 修改article.ejs文件
  3. 2. 修改主题的article.styl文件
    1. 2.1 找到article.styl文件路径
    2. 2.2 修改article.styl文件
  4. 3. 文章中添加toc: true
  5. 4. 其他注意事项

0. 导语

写博客的时候有些写的比较啰嗦,加上图也多,难免会很长,所以设置个文章目录,看起来还是要方便很多;来,让我们开始面向谷歌编程吧~~
经过google后发现,在Hexo 2.4.1之后的版本才有 TOC 功能,在这之前要实现TOC目录需要借助hexo-toc插件才行,好在目前使用的已经是含有toc的版本。但是请注意:hexo-toc与已具备toc功能的Hexo版本不能共存,如果安装过hexo-toc的,还是建议删掉hexo-toc。

1. 修改主题的article.ejs文件

1.1 找到article.ejs文件路径

要找到当前使用的主题(theme)文件夹,一般在hexo\themes下,我使用的是landscape-plus主题,所以在hexo\themes\landscape-plus\layout\_partial中。如下图
article.ejs

1.2 修改article.ejs文件

主要是在文件中增加toc的设置,使用notepad++可以直接打开该文件,添加如下代码至<%- post.content %>之前。

1
2
3
4
5
6
7
<!-- Table of Contents -->
<% if(post.toc == true){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">目录</strong>
<%- toc(post.content,{list_number:false}) %>
</div>
<% } %>

ejs文件添加代码后的状态
注意if(post.toc == true)是配合文章里面设置的,后续我们会专门说明,判断为true时显示目录,当然也不是所有文章都需要目录;{list_number:false}是我综合调试后加的,即自行设置目录序号,非自动生成序号,主要考虑是避免文章内无序号导致的难看,如在github论坛中就有人在帖子中反馈出现下图的问题:
目录序号乱码问题

2. 修改主题的article.styl文件

2.1 找到article.styl文件路径

该文件一般在主题的source\css文件夹下,我使用的landscape-plus主题的路径是hexo\themes\landscape-plus\source\css\_partial 如下图:
article.styl

2.2 修改article.styl文件

仍旧以notepad++打开该文档,在该文档的最后添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*toc*/
.toc-article
background #eee
border 1px solid #bbb
border-radius 10px
margin 1.5em 0 0.3em 1.5em
padding 1.2em 1em 0 1em
max-width 28%
.toc-title
font-size 120%
#toc
line-height 1em
font-size 0.9em
float right
.toc
padding 0
margin 1em
line-height 1.8em
li
list-style-type none
.toc-child
margin-left 1em

styl文件添加代码后的状态
当然也可以根据实际需要修改css文件,调整格式。

3. 文章中添加toc: true

最后需要在文章的md文件中添加toc: true,像tags一样,注意hexo中文件的冒号之后有空格。添加后ejs文件中就可以根据此判断是否需要显示目录了。
md文章中修改toc
toc最终效果

4. 其他注意事项

hexo-toc插件会导致无法使用hexo新版本中的toc,如果已经安装过的,可以使用npm uninstall hexo-toc卸载该插件。因为我就遇到了,解决方法来自该页面的问题

————————————————————————————————————

参考文章:

1.《为Hexo博客添加目录》:http://kuangqi.me/tricks/enable-table-of-contents-on-hexo/#修改Landscape主题的ejs文件

2.《为Hexo博文添加文章目录》:http://jerry011235.github.io/2015/05/06/%E4%B8%BAHexo%E5%8D%9A%E6%96%87%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E7%9B%AE%E5%BD%95/#启用目录

3.《在Hexo中给文章加目录(Table Of Contents)》:http://morningchen.com/2015/07/15/Table-Of-Contents-for-hexo/