HEXO为主题插入文章目录和多说评论

文章目录 (toc,table of content)是tommy351在2.4.1以后的版本中增加的一个新功能,可以根据markdown语法指定的分级标题直接生产目录并显示出来。由于我使用的是ALEX主题,这款主题对toc的支持效果并不是很好,或者说不是我喜欢的样式,于是决定再次挑战一下css或者html或者javascript。幸好功夫不负有心人,顺利完成,最终的效果如下图所示在这行的右边就能看见了,比ALEX主题默认的效果好多了。


增加对文章目录的支持

ALEX默认的TOC效果

例如,我如果使用tommy351说的方法,修改themes/alex/layout/_partial/article.ejs

<%- post.content %>前面插入<%- toc(page.content) %>或者<%- toc(post.content) %>那么默认的效果会是这样的:

默认效果

首先标题上的序号存在重复,十分讨厌,其次更喜欢目录在侧边的显示方式。

借鉴他人经验无果

按照twiceyuan给出的方法,在ALEX主题上最终的效果如

不太完美

仍然有三个缺陷

  • 没有背景色
  • 过于拥挤
  • 并不能在文章中根据toctrue或者false来决定是否显示目录,相反,这种情况下,即使不存在目录依然会显示文章目录四个字,如

始终显示的文章目录

自我探索

过程还是一波三折。去抓取合适的CSS,结果放到我上面存在偏移,又去四处找解决偏移不对齐的方法,终于把CSS搞定了。看了半天article.ejs终于自己琢磨出了根据post中toctrue或者false来确定是否显示目录的写法。

最终的配置方法

修改article.ejs

编辑themes/alex/layout/_partial/article.ejs文件,在<%- post.content %>的前面插入:

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

修改article.styl

编辑themes/alex/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
.toc-article {
background: none repeat scroll 0 0 # eee;
margin: 2em 0 0 0.5em;
padding: 1em;
}
.toc-article strong {
padding: 0.3em 0;
}
# toc {
float: right;
font-size: 0.8em;
line-height: 1em;
}
# toc .toc {
padding: 0;
}
# toc .toc li {
list-style-type: none;
}
# toc .toc-child {
padding-left: 0.7em;
}
# toc {margin-top:0px}

使用方法

使用很简单,在写文章时在预处理段落加上toc,如

1
2
3
4
5
6
7
8
9
title:
date:
tags:
- hexo
categories:
- hexo
permalink: hexo-optimization
toc: true
---

true则是显示文章目录,false则不显示(此为默认)。

增加对多说评论的支持

HEXO默认使用的是Disqus,但在国内毕竟多说的用户人数和账户支持是最好的,在此添加多说评论系统

以下内容来自于多说官网。

_config.yml中添加多说的配置:

duoshuo_shortname: 你站点的short_name

short_name为注册多说时指定

编辑themes\alex\layout\_partial\article.ejs

1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>

修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (!index && post.comments && config.duoshuo_shortname){ %>
<section id="comments">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->
</section>
<% } %>

如果您觉得这篇文章对您有帮助,不妨支持我一下!