使用多说给Hexo生成的博客增加评论功能


前言

  文章的价值除了只是利用博客展示给他人阅读之外,更多地来自于阅读者之间的讨论。所以给自己的博客文章加入评论功能是非常必要的。然而Hexo只是个纯静态网站生成器,只生成浏览器可以解析的网页内容,并不涉及到服务端的东西,而自己也不想费时费力去搞一个评论功能的服务端逻辑。即使有服务端代码,Github也不允许你运行。所以对于像我这种纠结的人来说,使用国内的“多说”最好不过了╮(╯▽╰)╭。那为嘛不使用Hexo自带的Disqus呢?因为它的服务商在墙外呀,看着别人的博客用了Disqus,等了半天都加载不出来,2333333333。
  废话不多说,立刻开始。

创建多说站点

  如果是首次使用多说,你必须申请多说账号。如果是首次使用多说的插件,你必须创建多说站点。申请多说账号并登陆之后,点主页中的“我要安装”进入创建站点页面。

创建站点页面

“站点名称”随便填入一个好记的名称就行了,比如你博客的Title。“站点地址”就填入你博客的地址,注意分清是http还是https。“多说域名”里那个红箭头指的框框中填入的东西等下是要在博客配置中引用的。接下来的邮箱、QQ号、手机号啥的你自己搞定。

博客配置

  在博客根目录下的_config.yml的最后面加入:

1
duoshuo_shortname: lgcagithub

lgcagithub就是之前红箭头指的内容。

修改博客主题模板

  找到博客根目录下的themes/landscape/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>
<% } %>

上述代码来源于http://dev.duoshuo.com/threads/541d3b2b40b5abcd2e4df0e9

  至此,你已经完成给博客添加评论功能的工作。保存,生成,发布到Github Page吧。点进任意一篇文章,拉到最下面就能看到你的成果了,评论、点赞、喜欢、分享样样都行,是不是很爽~\(≧▽≦)/~。

代码分析

  上面那段代码居然有那么强大的功能,怎么做到的?让我们来分析分析。

  • 首先是<% %>括起来的代码是ejs的逻辑代码,这里主要判断了文章评论功能是否开启以及博客配置中是否有duoshuo_shortname这个属性,我们刚刚就配置了。判断通过就继续格式化处理接着的代码。
  • 跟着来的是<section>标签,这其实是跟原来Disqus的代码是一样的,我们改动的只是<section>标签对括起来的东西。
  • 首先是<div>标签对,属性class="ds-thread"代表这是评论框的所在,根据官方文档的说明,属性data-thread-key要求赋予当前文章的ID,没ID咋办?反正就给它一点能独一无二标志的值就行了,这里填的是post的布局名+横杠+文章Markdown文件名,属性data-title填入的就是文章的标题咯,属性data-url是为了让有分页的文章能显示同样的评论内容,这里赋予了文章的永久链接。
  • 接着是一段javascript代码,声明了一个字典,字典中的short_name属性引用了博客配置中的duoshuo_shortname,接着是一个自调用函数,该函数又创建了一个javascript标签,该标签引用到多说官方提供的插件js代码……所以,不是这小段代码实现了评论框,最终还是官方给力啊~官方提供的js利用配置中的shorname来得知是谁在用多说,然后所有东西都在那个js里实现了。多么好的一条龙服务。→▽→