为 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