Hexo博客添加畅言评论框

和以前一样,捣鼓捣鼓一件事情成功以后写一篇博客总结一下经验!免得大家和我一样再次踩坑。这一次需要记录的是6月1号(2017-06-01)多说平台关闭事件。以前一直使用多说,后来发了一封邮件,说“由于公司业务调整,多说社会化评论插件将会与6月1号关闭,请知悉!”因此消息一出,我就把多说关闭了,换成了友言,但是后来某一天友言也打不开了,莫名其妙。于是一狠心,就直接将博客的评论关闭了。但是细细想想,写博客是为了什么,其实是记录自己的感悟和总结自己的经验,与大家交流的,关闭评论不等于直接切断了这个通道么?所以决定还是得重新打开评论,但是选择哪一个呢?网易跟帖和搜狐畅言摆在了面前,博主一直都在逛网易,神评论太多,不想把自己的博客搞得像新闻客户端一样,所以选择了畅言。推荐大家也是用这个,功能非常强大!

博主使用的是PPOffice提供的hueman主题。因此本博客的所有操作针对这个博客有效,大家对照着主题结构修改对应的文件即可。

畅言工作台

进入畅言的官网http://changyan.kuaizhan.com/,注册一个账号,然后登录进入畅言的工作台,如下:

看到上面红框标注的内容,是我们待会需要使用到的数据,一个是App ID,一个是App Key。

修改主题config.yml文件

在主题文件config.yml中添加如下代码:

1
2
3
4
5
6
7
8
9
# Comment
comment:
disqus: # enter disqus shortname here
duoshuo: # enter duoshuo shortname here qinjiangbo
youyan: # 2127917 # enter youyan uid here 2127917
changyan:
appId: [APP ID]
appKey: [APP KEY]
on: #表示是否开启畅言评论,随便写什么,不为空就行

在上面的代码中,我们添加了APP ID和APP KEY两个字段,这两个字段非常重要!

创建changyan.ejs文件

在hueman主题的/hueman/layout/comment/目录下新建一个changyan.ejs文件,照着disqus.ejs写一份自己的评论框插件。

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
<% if (typeof(script) !== 'undefined' && script) { %>
<script type="text/javascript">
(function() {
var appid = '<%= theme.comment.changyan.appId %>';
var conf = '<%= theme.comment.changyan.appKey %>';
var width = window.innerWidth || document.documentElement.clientWidth;
if (width < 960) {
window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>');
} else {
var loadJs = function(d, a) {
var c = document.getElementsByTagName("head")[0] || document.head || document.documentElement;
var b = document.createElement("script");
b.setAttribute("type", "text/javascript");
b.setAttribute("charset", "UTF-8");
b.setAttribute("src", d);
if (typeof a === "function") {
if (window.attachEvent) {
b.onreadystatechange = function() {
var e = b.readyState;
if (e === "loaded" || e === "complete") {
b.onreadystatechange = null;
a()
}
}
} else {
b.onload = a
}
}
c.appendChild(b)
};
loadJs("https://changyan.sohu.com/upload/changyan.js", function() {
window.changyan.api.config({
appid: appid,
conf: conf
})
});
}
})();
</script>
<% } else { %>
<div id="SOHUCS" sid="<%= page.permalink %>"></div>
<% } %>

注意上面第一行代码中is_home()这个方法一定要在这个文件里面加上,否则你的博客首页最底下会出现畅言的评论框,这是我们所不希望看到的。

修改scripts.ejs文件

scripts.ejs文件在changyan.ejs文件的相同目录下,编辑scripts.ejs文件并作如下修改:

1
2
3
4
5
6
7
8
9
<% if (theme.comment.disqus) { %>
<%- partial('comment/disqus', { script: true }) %>
<% } else if (theme.comment.duoshuo) { %>
<%- partial('comment/duoshuo', { script: true }) %>
<% } else if (theme.comment.youyan) { %>
<%- partial('comment/youyan', { script: true }) %>
<% } else if (theme.comment.changyan.on) { %>
<%- partial('comment/changyan', { script: true }) %>
<% } %>

修改index.ejs文件

index.ejs文件也在changyan.ejs文件的相同目录下,同样编辑它,

1
2
3
4
5
6
7
8
9
10
11
12
13
<% if (post.comments) { %>
<section id="comments">
<% if (theme.comment.disqus) { %>
<%- partial('comment/disqus') %>
<% } else if (theme.comment.duoshuo) { %>
<%- partial('comment/duoshuo') %>
<% } else if (theme.comment.youyan) { %>
<%- partial('comment/youyan') %>
<% } else if (theme.comment.changyan.on) { %>
<%- partial('comment/changyan') %>
<% } %>
</section>
<% } %>

注意其实一开始是想在这个文件第一行添加is_post()方法,但是不奏效,首页依然会显示畅言评论框,所以,没有在这儿添加,如果你知道原因欢迎在下面评论!

总结

畅言是一个非常不错的社会化评论插件平台,提供了非常丰富的功能,支持非常多的平台,唯独没有hexo,是不是很囧。不过大家自己动手搭博客平台的也一定都是动手能力特别强的同学,所以,自己琢磨琢磨就出来啦!

Bingo

目前将这个插件已经发Pull Request到官方的Github啦,很高兴已经被采纳了!大家后面可以直接使用这个主题而不需要自己再额外地去找啦!

Pull Request

更新这里的is_post()方法的问题已经解决!

Pull Request

分享到