hexo优化目录

这次主要介绍一下如何使用Hexo自带的帮助函数在站点中添加文章目录。功能使用了Hexo提供的帮助函数，创建对应局部模块之前，首先要想想这块内容应该属于哪个布局？要添加到哪个局部模块下？考虑这些是为了整洁性，当你添加的东西越来越多的时候才不至于令自己混乱。

文章目录

文章目录肯定是添加到

post

布局上，这个毋庸置疑，因为只有看文章详情页的时候才需要目录。那么我们在目录

layout/_partial/post/

下创建

toc.ejs

文件，代码如下：

<div id="toc" class="toc-article">
<div class="toc-title">目录</div>
<%- toc(item.content, {list_number: false}) %>
</div>

这里使用了Hexo提供的

toc()

帮助函数，它的使用方法如下：

<%- toc(str, [options]) %>

str

就是文章内容，

options

有两个参数，一个是

class

，也就是

html

标签的

class

值，默认为

toc

；一个是

list_number

，是否显示列表编号，默认值是

true

。

接下考虑把这个局部模块放到哪呢，既然属于

post

布局，那么就看看

layout/post.ejs

代码如下:

<%- partial('_partial/article', {item: page, index: false}) %>

很明显，我们要到

_partial/article.ejs

文件里添加

toc.ejs

，添加后

article.ejs

代码如下：

<div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% } else { %>
<!-- Table of Contents -->
<% if (!index && post.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<% } %>
<%- post.content %>
<% } %>
</div>

判断是否有摘要以及

index

值，显然

post.ejs

传过来的

index

值为

false

；

接下来判断

page.toc

是不是不等于

false

，这一块的主要作用是可以在文章的前置声明里设置

toc: false

来关闭目录功能。当没有设置

false

时，插入上面写的

toc.ejs

局部模块。

OK！完美嵌入进去，接下来就是设置样式了，进入

source/css/_partial/

目录下，创建

toc.styl

.最后别忘了在

source/css/style.styl

文件里加入这句了

@import '_partial/toc'

。显示如下图，样式可以自行调整。

toc.styl

.toc-article {
background: #eee;
padding: 1em;
position: relative;
left:2em;
}

.toc-article .toc-title{
padding-bottom: 0.8em;
font-weight: bold;
}

#toc {
line-height: 1.1em;
font-size: 0.8em;
float: right
}

#toc .toc {
padding: 0
}

#toc li , .toc li {
list-style-type: none
}

#toc ol {
margin: 0;
}

#toc .toc-child {
padding-left: 1.5em
}

效果如图