生成目录

以landscape-plus主题为例,编辑D:\hexo\themes\landscape-plus\layout\_partial\article.ejs文件,ctrl+f查找<%- post.content %>,然后在这一行之前加入如下代码:

1
2
3
4
5
6
7
<!-- Table of Contents -->
<% if (!index && post.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<% } %>

插入后为(第2行到第8行为插入代码):

1
2
3
4
5
6
7
8
9
      <% } 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 %>

设置目录样式

保存,然后编辑D:\hexo\themes\landscape-plus\source\css\_partial\article.styl,在文件的最后,添加如下代码:

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

2015-11-17更新目录代码样式为以下:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
//toc
#toc.toc-article
background color-background
border-radius 4px
margin 1.6em 0 1.6em 2em
line-height 1.5em
font-size 0.9em
-webkit-border-radius 4px

h2, ol
padding 0 0.4em
margin 0
h2
cursor pointer
@media mq-mobile
margin 1.6em 0
width 100%
@media mq-tablet
margin 1.6em 0
width 100%
#toc
line-height 1.3em
font-size 0.8em
float right
.toc
li
list-style-type none
a
&:hover
color color-font
text-decoration none !important
.toc-child
padding-left 1.5em
#toc.toc-aside
display none
width 13%
position fixed
right 2%
top 360px
line-height 1.5em
max-height: 68%
overflow: auto
font-size 1em
color color-heading
opacity .6
transition opacity 1s ease-out
@media mq-mobile
width 60%
height 40%
right 58px
padding 0 20px
background #fff
overflow auto
@media mq-tablet
width 60%
height 40%
right 58px
padding 0 20px
background #fff
overflow auto
h2
padding 0.3em 0
color color-font
&:hover
transition opacity .3s ease-out
opacity 1
a
transition color 1s ease-out
text-decoration none
color color-link
&:hover
color color-theme
transition color .3s ease-out

/*! css3 animate */
.animated
animation-fill-mode both
animation-duration 1s

@-webkit-keyframes fadeIn
0%
opacity 0
100%
opacity 1

.fadeIn
animation-name fadeIn

@keyframes fadeInDown
0%
opacity 0
transform translateY(-20px)
100%
opacity 1
transform translateY(0)

.fadeOut
animation-name fadeOut

.moveMain
margin-left 10% !important

启用目录

保存,最后打开在需要添加文章目录的的博文md文件,在tags下方和
— 上方添加一行:

1
toc: true

保存后重新部署即可。

如果不喜欢链接的颜色,可以编辑D:\hexo\themes\landscape-plus\source\css\_variables.styl文件的color-link那一栏,添加自己喜欢的颜色代码:

1
2
3
color-link = #5953F3
//color-link = #E32D40
//color-link = #258fb8

参考: