继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Hexo + Github pages 博客 yilia 主题使用畅言评论系统

qq_童年_1
关注TA
已关注
手记 11
粉丝 42
获赞 175

2017年初到年中,多说评论,网易云跟帖等评论系统相继倒下,Disqus等国外的评论系统因为服务器在国外,系统相对于国内的不稳定,没有这么流畅。现在国内还在运行的免费的博客评论系统就只剩下畅言评论系统了,下面就来说一下怎么将畅言评论系统应用到自己博客网站当中。

Hexo博客yilia 主题使用畅言评论系统

进入畅言官网,点击右上角“免费注册”,并填写注册信息

注册完成之后登录进入畅言系统管理的后台,点击:后台总览,可以看到畅言秘钥:APP ID和APP KEY,等一下需要用到这两个值

首先,进入Hexo博客根目录,然后依次进入themes\yilia\layout\_partial目录,找到article.ejs文件,把如下代码:

<% if (!index && post.comments && config.disqus_shortname){ %>
 <section id="comments">
   <div id="disqus_thread">
     这里还有很多省略掉的代码
   </div>
 </section>
 <% } %>

修改为:

<% if (!index && post.comments){ %>
  <section id="comments">
<!--高速版,加载速度快,使用前需测试页面的兼容性-->
<div id="SOHUCS" sid="<%= page.title %>"></div>
<script>
  (function(){
    var appid = '你的APP ID',
    conf = '你的APP KEY';
    var doc = document,
    s = doc.createElement('script'),
    h = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement;
    s.type = 'text/javascript';
    s.charset = 'utf-8';
    s.src =  'http://assets.changyan.sohu.com/upload/changyan.js?conf='+ conf +'&appid=' + appid;
    h.insertBefore(s,h.firstChild);
    window.SCS_NO_IFRAME = true;
  })()
</script>    
  </section>
  <% } %>

上面代码当中的:你的APP ID和你的APP KEY是你在畅言后台系统中得到的畅言秘钥的APP ID和APP KEY的值,这里需要注意一点的是:上面代码当中:sid="<%= page.title %>"> 这样的话畅言就可以直接根据对应的文章来识别,使得文章有对应的评论,不会都乱在一起

在每篇文章开头的 front-matter 中添加一句comments: true,然后回到博客根目录执行命令 hexo g -d ,重新生成博客并部署博客到github上面,然后刷新,任选一篇文章进入下拉,会发现评论功能可以使用了
<br>
打开主题配置文件_config.yml,更改设置畅言评论的代码如下:

changyan_appid: 'cyt6Pd3Qd'
changyan_conf: '55e8baae572c872a30594ac6734bcb4f'

上面的changyan_appid和changyan_conf的值也是畅言后台系统中得到的畅言秘钥的APP ID和APP KEY的值,复制过去就行了

来到博客页面的评论功能区,你会发现点击表情的时候没有反应,原因是被左侧的div层覆盖了,回到我们刚才改过的代码,找到<div id="SOHUCS"开头的一串代码。并做如下更改:

<div id="SOHUCS" sid="<%=title %>" style="padding: 0px 30px 0px 46px;"></div>

修改代码完成之后,重新执行命令:hexo g -d部署博客到github上面,刷新网站页面,评论系统的表情就可以看到了

参考文章:
Github pages + Hexo 博客 yilia 主题使用畅言评论系统
Hexo博客yilia主题更换畅言评论系统

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP