Hexo站点中添加文章目录以及归档

通过前面的介绍，Hexo站点的布局应该了解得差不多了，这次主要介绍一下如何使用Hexo自带的帮助函数在站点中添加归档以及文章目录。添加这两块功能都是使用了Hexo提供的帮助函数，创建对应局部模块之前，首先要想想这两块内容应该属于哪个布局？要添加到哪个局部模块下？考虑这些是为了整洁性，当你添加的东西越来越多的时候才不至于令自己混乱。

一、文章目录

文章目录肯定是添加到post布局上，这个毋庸置疑，因为只有看文章详情页的时候才需要目录。那么我们在目录layout/_partial/post/下创建toc.ejs文件，代码如下：

1
2
3
4
<div id="toc" class="toc-article">
	<div class="toc-title">目录</div>
	<%- toc(item.content, {list_number: false}) %>
</div>

这里使用了Hexo提供的toc()帮助函数，它的使用方法如下：

<%- toc(str, [options]) %>

str就是文章内容，options有两个参数，一个是class，也就是html标签的class值，默认为toc；一个是list_number，是否显示列表编号，默认值是true。

接下考虑把这个局部模块放到哪呢，既然属于post布局，那么就看看layout/post.ejs代码如下:

<%- partial('_partial/article', {item: page, index: false}) %>

很明显，我们要到_partial/article.ejs文件里添加toc.ejs，添加后article.ejs代码如下：

1
2
3
4
5
6
7
8
9
10
11
......
    <div class="entry">
      <% if (item.excerpt && index){ %>   <!--01-->
        <%- item.excerpt %>
      <% } else { if (item.toc !== false) {%>   <!--02-->
        <%- partial('post/toc') %>
      <% } %>
        <%- item.content %>
      <% } %>
    </div>
......

01、判断是否有摘要以及index值，显然post.ejs传过来的index值为false；
02、接下来判断page.toc是不是不等于false，这一块的主要作用是可以在文章的前置声明里设置toc: false来关闭目录功能。当没有设置false时，插入上面写的toc.ejs局部模块。

OK！完美嵌入进去，接下来就是设置样式了，进入source/css/_partial/目录下，创建toc.styl，代码这里就不贴出了，具体查看github。最后别忘了在source/css/style.styl文件里加入这句了@import '_partial/toc'。显示如下图，样式可以自行调整。

二、归档sidebar

默认的hexo-theme-light主题没有添加归档的sidebar挂件，于是我将该widget添加到了主题light-ch中。先看一下效果如下图：

sidebar中的局部模块都在layout/_widget中，于是在该文件夹下创建archive.ejs，代码如下：

1
2
3
4
5
6
<% if (site.posts.length){ %>
  <div class="widget tag">
    <h3 class="title">归档</h3>
	<%- list_archives({format: "YYYY年MM月"}) %>
  </div>
<% } %>

然后在主题的配置文件中_config.yml中加入该widget，如下所示：

widgets:
    - category
    - archive
    - tagcloud
    - weibo

最后就是设置样式了，在source/css/_partial/sidebar.styl文件中加入了这么一段就能如上显示了。

1
2
3
4
5
6
7
8
9
10
11
.archive-list
	font-size 0.9em
	padding 15px 20px 
	.archive-list-count
		margin-left 8px
		font-size 0.8em
		color color-meta
		&:before
			content '('
		&:after
			content ')'

这段样式是为了和分类列表保持一致。详细代码参照github来自定义样式。

总结

这里通过添加文章目录以及归档侧边栏的实战练习，大致了解了如何在Hexo站点中添加局部模块和widget，基本上也就这两种类型。
诸如添加百度统计、多说评论以及微博小插件等等，都可以归属为上述两类，这里就不再赘述，详情可以参照github上代码，有什么问题可以随时向我提issue。

技术, Hexo
hexo, toc, archive