AfarX

A Rookie of R.

为Hexo模板添加目录

Menu
  1. 1. 文章页面添加toc
  2. 2. 添加目录样式

我使用的模板是Hacker,添加目录用了很久,因为网上的参考地址里表示文章用的都是post,但是该模板用的是item,所以要统一改过来。

以下操作主要参考该地址:http://www.cnblogs.com/peihao/p/5269131.html

文章页面添加toc

文件目录是themes/Hacker/layout/components/article.ejs
找到<div class="article-content">,将这段话修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="article-content">
<div class="entry">
<% if (item.excerpt && index){ %>
<%- item.excerpt %>
<% } else { %>
<!-- Table of Contents -->
<% if (!index && item.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">Menu</strong>
<%- toc(item.content) %>
</div>
<% } %>
<%- item.content %>
<% } %>
</div>

这样的话,就在文章内容前添加了目录,还给目录添加了标题Menu。如果toc:true,则显示目录界面。

添加目录样式

添加好目录之后,对目录样式进行自定义:
themes/Hacker/source/css/components下新建目录的样式文件toc.ejs,文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*toc*/
.toc-article {
background: #ffffff; /*目录背景*/
border 1px solid #f15b6c; /*目录边框*/
border-radius 10px; /*目录圆角*/
padding: 1em;
max-width 50%;
position: fixed; /*固定目录位置,不随页面滚动而滚动*/
margin:-10em 1em 50em 90em; /*目录在页面的绝对位置*/
left:2em;
z-index:2; /*目录在页面的放置次序(是否置顶)*/
}

.toc-article .toc-title{
font-size 120%; /*Menu的字号*/
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 /*二级目录缩进量*/
}