一、关于Valine

Valine 诞生于2017年8月7日，是一款基于 Leancloud 的快速、简洁且高效的无后端评论系统，支持但不限于静态博客。
具有以下特性：

快速、安全
Emoji
无后端实现
MarkDown 全语法支持
轻量易用(~15kb gzipped)
文章阅读量统计 v1.2.0+

二、配置Leancloud账号

Valine 是基于 leancloud的评论模块，评论数据都存储在 Leancloud 平台，因此需要先在 leancloud 申请帐号。
官网：https://leancloud.cn/

1.注册Leancloud 账号
2.创建应用
【控制台】->【创建应用】
应用名称自己填写，选择默认的【开发版】，应用描述自己写，直接【创建】。

3.获取应用的AppID和AppKey
创建完成后，进入该应用。
【设置】->【应用Keys】，得到AppID和AppKey。这个后面配置博客主题文件时会用到。

4.配置安全域名
【设置】->【安全中心】，在【Web安全域名】中填写自己博客的域名后保存。比如我这里是：

http://i007it.com/
http://www.i007it.com/
http://localhost:4000

三、Hexo中添加Valine评论

首先，看看你用的Hexo主题是否已添加Valine模块，如果添加了的话就很简单了。
查看地址：https://valine.js.org/hexo.html
比如 hexo-theme-landscape，hexo-theme-next 就都已经添加了（当然要安装支持的版本，最新版）

（一）、主题已经添加了Valine模块

只需要直接在主题下面的_config.yml 配置文件中填写valine相关内容就行。

# valine comment system. https://valine.js.org
valine: 
  enable: true # if you want use valine,please set this value is true
  appId: U******************************z # leancloud application app id
  appKey: y************************7 # leancloud application app key
  notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
  verify: false # valine verify code (true/false)
  pageSize: 10 # comment list page size
  avatar: mm # gravatar style https://valine.js.org/#/avatar
  lang: zh-cn # i18n: zh-cn/en
  placeholder: Just go go # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info

enable设置为true；填写应用的appId和appKey就行了（注意填写的时候冒号后面有一个空格）。

（二）、主题未添加Valine模块

我用的是paperbox主题，是landscape 的一个优化版本（作者几年也没更新了，所以也没更新评论系统，原来主题中配置的还是已经关闭了的duoshuo的评论系统），那就需要自己添加了。

然后我也顺便删除了duoshuo评论的模块，如果你用的主题原来没有的，直接添加相关文件的valine部分内容就行，不用改别的地方。

因为landscape 最新版本已经内置了 valine模块了，那我直接把 landscape 主题下载下来，查看一下里面的 valine相关内容，再复制到我自己的主题里就可以啦。

所以几个文件的修改添加，都是直接参考 landscape主题那边搬过来的。

1.在主题的配置文件中添加valine内容

hexo-theme-paperbox_config.yml

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
    enable: true
    appId:
    appKey:
    placeholder: 请在此输入您的留言
    notify: false   # 新留言是否需要通知 https://github.com/xCss/Valine/wiki
    verify: false   # 是否需要验证，验证比较反人类建议false关闭
    avatar: mm # 默认头像
    lang: zh-cn
    guest_info: nick,mail,link  # 默认留言框的头部需要访问者输入的信息
    pageSize: 10                # 默认单页的留言条数

2.article.ejs文件中添加内容

hexo-theme-paperbox\layout_partial\article.ejs

有两个部分有添加，都在文件的最后面。

1).第一部分，`<footer>`部分修改

其实添加的就是valine有关的这一块，因为我paperbox主题原来还有duoshuo的部分，我也直接删掉了。

改成如下：

<footer class="article-footer">      
    <div class="article-footer-content">
        <%- partial('post/tag') %>
        <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %><</a>
        <% if (post.comments && config.disqus_shortname){ %>
          <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
        <% } %>
       <% if (post.comments && theme.valine.enable && theme.valine.appId && theme.valine.appKey ){ %>
          <a href="<%- url_for(post.path) %>#comments" class="article-comment-link">
            <span class="post-comments-count valine-comment-count" data-xid="<%- url_for(post.path) %>" itemprop="commentCount"></span>
            <%= __('comment') %>
          </a>
        <% } %>
      </div>
    </footer>

2).第二部分，文件最下面

添加的也就是最后valine相关的这一段。

改成如下：

<% if (!index && post.comments && config.disqus_shortname){ %>

  <section id="comments">
    <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>

  <% } %>
<% if (!index && post.comments && theme.valine.enable && theme.valine.appId && theme.valine.appKey){ %>
    <section id="comments" class="vcomment">

    </section>

  <% } %>

3.添加valine.ejs文件

为了看着更方便，就直接把valine单独拎了个文件出来，当然，这部分内容直接写在 after-footer.ejs文件里也是一样的。

添加 hexo-theme-paperbox\layout_partial\post\valine.ejs 文件，内容如下：

<% if(theme.valine.enable && theme.valine.appId && theme.valine.appKey){ %>
    <%- js('https://unpkg.com/valine@latest/dist/Valine.min.js') %>

  <script>
      var GUEST_INFO = ['nick','mail','link'];
      var guest_info = '<%= theme.valine.guest_info %>'.split(',').filter(function(item){
          return GUEST_INFO.indexOf(item) > -1
      });
      var notify = '<%= theme.valine.notify %>' == true;
      var verify = '<%= theme.valine.verify %>' == true;
      new Valine({
          el: '.vcomment',
          notify: notify,
          verify: verify,
          appId: "<%= theme.valine.appId %>",
          appKey: "<%= theme.valine.appKey %>",
          placeholder: "<%= theme.valine.placeholder %>",
          pageSize:'<%= theme.valine.pageSize %>',
          avatar:'<%= theme.valine.avatar %>',
          lang:'<%= theme.valine.lang %>'
      });
  </script>

  <% } %>

在 hexo-theme-paperbox\layout_partial\after-footer.ejs 文件中找一块内容添加如下代码：

1
2
3

<!-- valine start -->
<%- partial('post/valine') %>
<!-- valine end -->

这段代码，第一句和和第三句都是注释，所以其实就是中间一句，调用post目录下的valine.ejs文件的内容。所以把文件的内容全部扔这里也行。

因为删除duoshuo的评论模块，所以相关代码删掉后就改成了：

<% if (config.disqus_shortname){ %>

  <script>
    var disqus_shortname = '<%= config.disqus_shortname %>';
    <% if (page.permalink){ %>
    var disqus_url = '<%= page.permalink %>';
    <% } %>
    (function(){
      var dsq = document.createElement('script');
      dsq.async = true;
      dsq.src = 'https://' + disqus_shortname + '.disqus.com/<% if (page.comments) { %>embed.js<% } else { %>count.js<% } %>';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
  </script>

  <% } %>

以上就成功使用了 Valine 模块最基本的评论功能。

然后需要关于评论的更多功能的话，就用Valine Admin，这是 Valine 评论系统的扩展和增强，主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。