为hexo添加多说评论

hexo是基于Node.js的静态博客程序,可以方便的生成静态网页托管在github pages服务上,值得一提的是作者是台湾同胞。
hexo是在对比安装了所有可以安装的静态博客引擎之后的选择,octopress pelican liquidluke……
各种引擎并优劣之说,个个都是作者辛苦劳动的结晶,对于平台的选择完全在于个人的喜好。

###添加多说的原因
由于hexo是静态博客引擎,所以评论只能通过js加载外部网页实现。
hexo原生支持Disqus,但Disqus只支持G+ twitter等登陆,不符合兲朝的大国情,所以只能自己动手加。
另外多说好像口碑不太好……

###安装
代码的安装很简单,只需要修改

\hexo\themes\light\layout\_partial\comment.ejs

如果只打算使用多说,可以直接把Disqus部分删掉,加上获取的代码即可。
而打算同时使用Disqus和多说的同学可以参考以下代码,所有以<!--liakc xxxx begin end-->注释为添加的部分。
修改得不好,应该可以更模块化一下,就不提交到git上献丑了。

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<% if (config.disqus_shortname && page.comments){ %>
<!--likaci tab.js init begin-->
<script type="text/javascript" src="/js/tab.js"></script>
<script type="text/javascript">
window.onload=function(){
var tabtype={trigger:'mouseover',tabCurrentClass:'newclass',auto:false,timer:4000,delay:300 };
tabInit(tabtype,['Disqus_bt','disqus_thread'],['duoshuo_bt','ds-thread'])
}
</script>
<!--likaic tab.js init end-->
<!--likaci css style begin-->
<style type="text/css">
#Disqus_bt,#duoshuo_bt { padding: 5px 10px 5px 7px; line-height: 17px; display: block; float: left; margin: 0 7px 0 0; background-color: #f5f5f5; border: 1px solid #dedede; border-top: 1px solid #eee; border-left: 1px solid #eee; }
#Disqus_bt{color: #336699}
#duoshuo_bt{color: #d12f19}
#duoshuo_bt.newclass{background-color:#DFF4FF}
#Disqus_bt.newclass{background-color:#E6EFC2}
</style>
<!--likaci css style end-->
<section id="comment">
<h1 class="title"><%= __('comment') %></h1>
<!--likaci add button begin-->
<div id="duoshuo_bt">多说</div>
<div id="Disqus_bt" >Disqus</div>
<!--liakc add button end-->
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
<!--likaci add duoshuo begin-->
<div class="ds-thread"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"yourshotname"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = 'http://static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!--likaci add duoshuo end-->
</section>
<% } %>

注意,tab.js请参考脚本之家,稍有基础的人就能看懂。