为 Hexo 的 Indigo 主题增加畅言评论系统

image
Indigo 主题并没有内置 畅言 的评论系统，我按照内置其余主题的方式增加了畅言，还是比较简单的，下面是配置过程。

1. 获取畅言的 APPID 等参数

这个过程不多说了，进入 畅言 网站去注册客户，增加网站，而后可以获取到 appid 和 conf 这两个参数。

2. 增加配置信息

打开 themes\indigo\_config.yml 文件，在 hyper_id: false 这一行的下一行增加畅言的配置信息，这样多个评论配置集中到一起。

# 畅言 https://changyan.kuaizhan.com/changyan:  enable: true  appid: cyrKR7poQ  conf: prod_0c82d8a819e99315df4f23a81edd7377  sid: urlname # 文章唯一标识，设置为页面头部变量，如不启用 sid，设为：false

仿照了 valine 的配置方式，可以方便的启用或者禁用。其中的 appid 和 conf 是第 1 步拿到的那两个参数，sid 为文章唯一标识，能设置为：

• 页面头部（Front-matter，就是文件最上方以 --- 分隔的区域）信息中的某一参数，但要求这个参数要能够唯一标识这篇文章。
• 不启用设置为 false，这时畅言会自动以当前文章 URL 作为标识，但畅言提到强烈要求设置 sid。
• 上面示例代码中的 urlname 是我自己设置的参数来作为永久链接。

关于 sid，畅言是这样说明的：
畅言默认通过文章url进行评论框匹配，因而，你可能会遇到以下两种问题：
1）同一文章显示不同评论框：同一篇文章有多个URL地址，但每个页面显示不同的评论框；
2）评论错乱：文章链接发生变动导致评论错乱。

3. 创立 chanyan.ejs 文件

在 themes\indigo\layout\_partial\plugins\changyan.ejs 这个路径下创立文件，完整程序代码如下：

<% if (theme.changyan.enable) { %><style>  .comments {    margin-top: 40px;    padding: 30px;    background: #fff;    box-shadow: 0 0 4px rgba(0, 0, 0, .2);    border-radius: 4px;  }  #pop_ad,  #feedAv {    margin-top: -250px !important;    transform: scale(0);  }</style><section class="comments" id="comments">  <% if (theme.changyan.sid) { %>  <div id="SOHUCS" sid="<%= page[theme.changyan.sid] %>"></div>  <% } else { %>  <div id="SOHUCS"></div>  <% } %>  <script>    (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('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></section><% } %>

以上代码中，大部分是畅言后端给出的安装代码，这是电脑端/手机端自适应代码，把其中的 appid 和 conf 替换成了变量，其余的安装代码没有动。其中有几点特别解释下：

• 代码完全可以不用任何修改直接复制，可配置的参数都放到 themes\indigo\_config.yml 了。
• 畅言后端可以选择评论框的颜色主题，但没有边框和背景，所以我把 valine 的样式复制过来了。
• 至于样式里面的 #pop_ad 和 #feedAv 两个，就是谁用谁知道了，不可说。

4. 修改 comment.ejs 文件

打开 themes\indigo\layout\_partial\post\comment.ejs，在文件末尾 <%} %> 的前面增加一行代码：

<%- partial('../plugins/changyan') %>

一律完成，赶快 F5 看看效果吧。

不过，最终我可能不会选择畅言，由于有这些使用限制：

• 需要填入备案号且审核通过，否则只能用 15 天，本想找一下 coding.me 的备案号，结果这个域名也没备案，这就尴尬了；
• 客户发表评论要绑定手机号；
• 有广告。

原文在：https://ziyue.life/201812/ad52hc4b.html