更换畅言社会评论系统

背景

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

安装使用

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

<!--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。
具体代码如下：

<% 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:

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，至此成功集成畅言评论。