在Hexo中给文章加目录(Table Of Contents)

发表于 | | 阅读次数

关于Hexo版本

Hexo 2.4.1之后的版本才有 TOC 功能，所以….更新吧

添加目录

比如说我用的yilia的主题，就在/themes/yilia/layout/_partial/article.ejs里修改。将下面代码放在<%- post.content %>之上

<% if(post.toc == true){ %>
<div id="toc" class="toc-article">
  <strong class="toc-title">文章目录</strong>
<%- toc(post.content, {list_number: false}) %>
</div>
<% } %>

这其中加了一个判断，默认是不加目录的（当然你也可以改成post.toc == false，这样默认就是添加目录的情况啦），如果想在文章中使用目录的话，可以在 front-matter里加上 toc: true 即可. 像这样子：

title: "在Hexo中给文章加目录(Table Of Contents)"
date: 2015-07-15 22:40:42
tags: [Hexo]
toc: true
---

修改目录样式

在/themes/yilia/source/css/_partial/article.styl中的末尾加上：

.toc-article {
    background: #eee;
    margin: 0 0 0 .5em;
    padding: 1em
}
.toc-article strong {
    padding: .3em 0
}

#toc {
    line-height: 1.6em;
    font-size: .8em;
    float: right
}
#toc .toc {
    padding: 0
}
#toc .toc li {
    list-style-type: none
}
#toc ol {
    margin-left: 0
}
#toc .toc-child {
    padding-left: 1.5em
}

最终的样式请参考本篇文章的目录

Reference