首页 > 技术 > 技巧经验 > Hexo添加文章目录
2016
11-04

Hexo添加文章目录

为Hexo博客添加目录。平时写类似添加功能的东西我都是看一遍网上的教程,自己理解后按自己的方法做然后写成文章的,这次全文摘抄是因为我TM根本看不懂,不会改…不过以后在学好前端后也会回来做修改(先挖好坑)个人更喜欢MOxFIVE建站日志这种类型的文章目录,不过那是修改好的主题,直接拿来用就没什么意思了。废话就这样,以下全文转载。

本文的转载符合文章作者的版权声明

前言

Hexo博客系统的核心支持生成目录(Table of Contents),但其默认的主题Landscape并不支持目录的显示。我们只需对Landscape的主题文件稍作修改并添加一点目录的CSS就可以在文章前面显示友好的目录了。
ps1:我修改的不是默认主题Landscape而是主题yilia,经实验yilia主题也可以应用这个方法。

食用方法

修改Landscape主题的ejs文件

我们首先要编辑文章显示页面的模板,也就是

1
themes/landscape/layout/_partial/article.ejs

文件。为了将目录生成在正文之前,我们首先在这个文件中找到

1
<%- 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>
<% } %>

这段代码的含义清晰明了,if语句中有两个条件,

1
!index

是为了不在首页的文章摘要中生成目录,

1
post.toc

确保了只在显式地标记了

1
toc: true

的文章中生成目录。若这两个条件满足,则创建一个目录的

1
&lt;div&gt;

修改完这个文件之后,找一篇包含了多个子标题的文章,并在文章开头的

1
front-matter

中添加一句

1
toc: true

,在浏览器中访问这篇文章,应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看,我们还需要添加相应的CSS来将其指定为我们想要的样式。

为目录编写CSS文件

要指定目录的样式,我们要修改的文件是

1
themes/landscape/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
23
24
25
/*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

第一段的

1
toc-article

指定了目录整个

1
&lt;div&gt;

的背景色、边框色、倒角半径、各种间距以及最大的宽度。注意这里最好指定目录的最大宽度,我将其设为了28%,也就是文章正文那个框的宽度的28%,也可以设为一个固定的长度,比如在笔记本电脑上16em就是个不错的宽度,但为了能适配各种不同尺寸的屏幕,最好还是设置为百分比。如果不指定最大宽度,遇到比较长的标题时,生成的目录会非常难看。这个最大宽度的设置是我在网上其他添加目录的方法中没有见到的。

第二段的

1
toc-title

指的就是“文章目录”那四个字,这四个字要比其他字大一些,将其字号设为其他字的120%。

第三段的

1
#toc.toc

指定了目录列表的一些细节,将

1
font-size

设为0.9em会让目录的字比文章的字稍小一些。最后的

1
.toc-child

指定了二级目录的缩进量。

再次生成页面,应该已经可以显示比较美观的目录了。

参考资料

为Hexo博客添加目录
MOxFIVE建站日志

最后编辑:
作者:xyzardq
这个家伙有点懒,什么都没有写

留下一个回复

你的email不会被公开。