WhatAKitty Daily

A Programmer's Daily Record

更换畅言社会评论系统

WhatAKitty   阅读次数loading...

背景

由于多说下线,Disqus在国内的速度有点太过不堪;所以在查找了一番国内的社会评论系统后,决定采用搜狐的畅言。

安装使用

如果注册畅言这里不详细描述了,直接开始集成畅言代码:

1
2
3
4
5
6
7
8
9
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="请将此处替换为配置SourceID的语句" ></div>
<script type="text/javascript">
(function(){
var appid = 'xxx';
var conf = 'xxx';
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>

我这里选择的是畅言自适应版本,根据需要可以选择不同类型的评论代码
在自己的主题内找到comment.ejs文件,我使用的是hacker主题,文件位于/themes/Hacker/layout/components/comment.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<% if (theme.changyan){ %>
<!--PC和WAP自适应版-->
<div id="SOHUCS" <% if (theme.changyan_source_id){ %>sid="<%- md5(item.title + item.link) %>" <% } %>></div>
<script type="text/javascript">
(function(){
var appid = "<%= theme.changyan_appid %>";
var conf = "<%= theme.changyan_conf %>";
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 if (theme.duoshuo) {%>
<div id="comment">

<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%- config.root %><%- item.path%>" data-title="<%- item.title %>" data-url="<%- item.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"<%- theme.duoshuo_name %>"};
(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 -->

</div>
<% } else if (theme.disqus) {%>
<section id="comments" class="comment">
<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>

<script type="text/javascript">
var disqus_shortname = '<%= theme.disqus_shortname %>';
(function(){
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
(function(){
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>

<% } %>

在这里我配置了四个变量:

  • changyan: 是否启用畅言评论
  • changyan_appid: 畅言账户id
  • changyan_conf: 畅言账户密钥
  • changyan_source_id: 畅言是否启用SourceID

将四个变量配置在主题的_config.yml文件内。不过,如果需要开启SourceID,则需要使用辅助函数。在主题的根目录下找到scripts文件夹,没有的话新建。创建文件helper_md5.js:

1
2
3
4
5
var crypto = require('crypto');

hexo.extend.helper.register('md5', function(str){
return crypto.createHash('md5').update(str).digest('hex');
});

这样,在ejs模板内部就可以使用md5函数了,即在comment.ejs文件中的<% if (theme.changyan_source_id){ %>sid="<%- md5(item.title + item.link) %>" <% } %>这段代码。
现在,是通过文章的title和link的拼接字符串来计算文章的md5值作为sourceID。

结束语

OK,至此成功集成畅言评论。

本文已在版权印备案,如需转载请访问版权印16129654