前言

之前使用 Disqus，必须翻墙才能显示，而且 Disqus 会产生大量请求，一直想换个评论系统但是好用的好像都倒了 (:зゝ∠)

后来无意间看到 Valine 评论系统，好像很好用，而且简单简洁，试了一下感觉还行，但是这种自建的评论系统消息存储和提醒是问题。

wildfire 跟 Valine 差不多，不过使用的是 firebase (国内无法访问)和野狗（已倒）作为后端服务，界面更好看但是很久没更新了，而且在 yelee 添加会报错，我只在单独的 html 中试了一下: wildfire page

最后使用了一段时间 valine 后还是打算改为 gitalk

Yelee 添加 Valine 方法

Valine 配置官网

使用前还需要注册一个 LeanCloud 账户，然后创建一个应用来存储管理评论内容。

1. 然后修改 Yelee 主题配置文件 _config.yml

添加：

valine:
  on: true
  appid: *** # LeanCloud 应用 AppID
  appkey: *** # LeanCloud 应用 AppKey
  verify: false # 验证码
  notify: false # 评论回复邮箱提醒
  avatar: retro # 评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide，自定义头像可以到 https://cn.gravatar.com/ 注册一下
  placeholder: Just do it ! # 评论框占位符

CDN:
  ...
  valine: //unpkg.com/valine@1.2.0-beta1/dist/Valine.min.js

2. 修改 yelee/layout/_partial/article.ejs

<% if (!index && post.comments){ %>
    <% if (theme.duoshuo.on) { %>
      <%- partial('comments/duoshuo', {
          key: post.path,
          title: post.title,
          url: config.url+url_for(post.path),
          }) %>
    <% } else if (theme.youyan.on) { %>
        <%- partial('comments/youyan') %>
    <% } else if (theme.disqus.on) { %>
        <%- partial('comments/disqus', {
            shortname: theme.disqus.shortname
          }) %>
    <% } else if (config.disqus_shortname) { %>
        <%- partial('comments/disqus', {
            shortname: config.disqus_shortname
          }) %>
+   <% } else if (theme.valine.on){ %>
+       <%- partial('comments/valine', {
+           key: post.slug,
+           title: post.title,
+           url: config.url+url_for(post.path)
+       }) %>
    <% } %>
<% } %>

3. 创建 layout/_partial/comments/valine.ejs 文件

<section id="comments" style="margin: 2em; padding: 2em; background: rgba(255, 255, 255, 0.5)">
    <div id="vcomment" class="comment"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="<%- theme.CDN.valine %>"></script>
    <script>
      new Valine({
        el: '#vcomment',
        notify: '<%= theme.valine.notify %>',
        verify: '<%= theme.valine.verify %>',
        app_id: "<%= theme.valine.appid %>",
        app_key: "<%= theme.valine.appkey %>",
        placeholder: "<%= theme.valine.placeholder %>",
        avatar: "<%= theme.valine.avatar %>"
      });
    </script>
</section>

4. 在 yelee/source/css/_partial/mobile.styl 中添加

#comments {
    margin: (10/16)rem 10px !important;
    padding: 1rem !important;
}

Yelee 添加 gitalk 方法

1、注册一个 Github OAuth application: https://github.com/settings/applications/new

记下 clientID 和 clientSecret

2、在主题配置文件 _config.yml 中添加

gitalk:
  on: true
  clientID: 'your clientID'
  clientSecret: 'your clientSecret'
  repo: 'wangriyu.github.io' # 仓库地址
  owner: 'wangriyu' # 拥有者
  admin: ['wangriyu'] # admin 用户

3、_partial/comments 下创建 gitalk.ejs

<section id='comments' style='margin: 2em; padding: 2em; background: rgba(255, 255, 255, 0.5)'>
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>
  <div id="gitalk-container"></div>
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '<%= theme.gitalk.clientID %>',
      clientSecret: '<%= theme.gitalk.clientSecret %>',
      repo: '<%= theme.gitalk.repo %>',
      owner: '<%= theme.gitalk.owner %>',
      admin: ['<%= theme.gitalk.owner %>'],
      id: window.location.pathname
    })
    gitalk.render('gitalk-container')
  </script>
</section>

4、修改 _partial/article.ejs

<% if (!index && post.comments){ %>
    <% if (theme.duoshuo.on) { %>
      <%- partial('comments/duoshuo', {
          key: post.path,
          title: post.title,
          url: config.url+url_for(post.path),
          }) %>
    <% } else if (theme.youyan.on) { %>
        <%- partial('comments/youyan') %>
    <% } else if (theme.disqus.on) { %>
        <%- partial('comments/disqus', {
            shortname: theme.disqus.shortname
          }) %>
    <% } else if (config.disqus_shortname) { %>
        <%- partial('comments/disqus', {
            shortname: config.disqus_shortname
          }) %>
    <% } else if (theme.valine.on) { %>
        <%- partial('comments/valine', {
          key: post.slug,
          title: post.title,
          url: config.url+url_for(post.path)
        }) %>
+   <% } else if (theme.gitalk.on) { %>
+       <%- partial('comments/gitalk') %>
    <% } %>
<% } %>