Hexo博客系统的核心支持生成目录(Table of Contents),但其默认的主题Landscape并不支持目录的显示。我们只需对Landscape的主题文件稍作修改并添加一点目录的CSS就可以在文章前面显示友好的目录了。
修改Landscape主题的ejs文件
我们首先要编辑文章显示页面的模板,也就是
themes/landscape/layout/_partial/article.ejs
文件。为了将目录生成在正文之前,我们首先在这个文件中找到,并在这一行之前加入如下代码:
文章目录
这段代码的含义清晰明了,if
语句中有两个条件,!index
是为了不在首页的文章摘要中生成目录,post.toc
确保了只在显式地标记了toc: true
的文章中生成目录。若这两个条件满足,则创建一个目录的div
。
修改完这个文件之后,找一篇包含了多个子标题的文章,并在文章开头的front-matter
中添加一句toc: true
,在浏览器中访问这篇文章,应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看,我们还需要添加相应的CSS来将其指定为我们想要的样式。
为目录编写CSS文件
要指定目录的样式,我们要修改的文件是
themes/landscape/source/css/_partial/