Hexo博客默认主题的修改与美化3

文章目录

1. 1. 使Hexo博客根据文章标识自动添加目录
   1. 1.1. 如何自动生成目录

使Hexo博客根据文章标识自动添加目录

Hexo博客系统的核心支持生成目录（Table of Contents），但其默认的主题Landscape并不支持目录的显示。本文将详述如何使博文自动添加目录

如何自动生成目录

只需对Landscape的主题文件简单修改并添加目录的CSS样式，就可以在文章前面显示友好的目录了。
首先要编辑文章显示页面的模板，也就是themes/landscape/layout/_partial/article.ejs文件。为了将目录生成在正文之前，首先在这个文件中找到<%- post.content %>，并在这一行之前加入如下代码：

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

但仅仅如此，显示并不美观。接着修改themes/landscape/source/css/_partial/article.styl文件，在文件内容的最后，添加如下代码：

/*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

代码释义：toc-article指定了目录整个<div>的背景色、边框色、倒角半径、各种间距以及最大的宽度。注意这里最好指定目录的最大宽度，我将其设为了28%，也就是文章正文那个框的宽度的28%，也可以设为一个固定的长度，为了能适配各种不同尺寸的屏幕，最好还是设置为百分比。如果不指定最大宽度，遇到比较长的标题时，生成的目录会非常难看。toc-title指的就是“文章目录”那四个字，这四个字要比其他字大一些，将其字号设为其他字的120%。#toc.toc指定了目录列表的一些细节，将font-size设为0.9em会让目录的字比文章的字稍小一些。最后的.toc-child指定了二级目录的缩进量。

如果想使Markdown文件的博文生成目录，则需要在编辑MD文章开头的front-matter（—之前的区域）中添加一句toc: true 即可为此篇文章添加目录。

---

版权声明

Scholar’s Blog by scholargeek is licensed under a Creative Commons BY-NC-ND 4.0 International License.
由董仕麟创作并维护的scholargeek博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于Scholar’s Blog博客，版权所有，侵权必究。

本文永久链接：https://scholargeek.github.io/2019/07/17/Hexo%E5%8D%9A%E5%AE%A2%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%E7%9A%84%E4%BF%AE%E6%94%B9%E4%B8%8E%E7%BE%8E%E5%8C%963/