Hexo搭建博客NexT主题之LeanCloud+Valine评论系统的配置

效果图：

LeanCloud官网

1. 搭建评论系统需要先注册LeanCloud账号获取一些必要信息。

2. 注册成功后，点击右上角`控制台`,进入控制台创建应用，应用名称随意选择开发版，创建应用并点击所创建的应用名称进入管理界面。

3.创建Class名称`必须为`Comment的Class方可存储评论内容。当然可以定义其他的Class但是无效，系统会自动创建`Comment`Class来存储。

4.按照图示，第一步进入设置页面，第二步除服务开关的数据存储以外其他的全部关闭，第三步设置你的网站的地址（Https://xxxx.github.io）。

5.在同一界面，选择应用Key选项，这里的 App ID 、App Key是我们接下来的主题配置文件所需要的。

Valine配置

1.首先下载最新的 Valine.min.js 核心代码库到本地。在页面上js上方右键链接另存为某一位置，最终`Valine.min.js` 放置于`next\source\js\src\`

2.打开valine配置文件进行配置

valine配置文件路径：next\layout\_third-party\comments\valine.swig

{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unjkp.com/valine/dist/Valine.min.js"></script>  //删除Valine核心代码库外链调用
  <script src="/js/src/Valine.min.js"></script>  //调用刚下载的本地文件以加速加载速度

  {% set valine_uri = '/js/src/Valine.min.js' %}  //这里改为从本地加载
  {% if theme.vendors.valine %}
    {% set valine_uri = theme.vendors.valine %}
  {% endif %}
  <script src="{{ valine_uri }}"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = '{{ theme.valine.guest_info }}';
    guest = guest.split(',').filter(function (item) {
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: {{ theme.valine.verify }},
        notify: {{ theme.valine.notify }},
        appId: '{{ theme.valine.appid }}',
        appKey: '{{ theme.valine.appkey }}',
        placeholder: '{{ theme.valine.placeholder }}',
        avatar:'{{ theme.valine.avatar }}',
        guest_info:['nick'] ,  //评论者只需要提供评论的昵称即可
        pageSize:'{{ theme.valine.pageSize }}' || 10,
    });
    //增加以下六行代码去除 power by valine
    var infoEle = document.querySelector('#comments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
      infoEle.childNodes.forEach(function(item) {
        item.parentNode.removeChild(item);
      });
    }
  </script>
{% endif %}

主题配置文件配置

主题配置文件路径：next\_config.yml
打开_config.yml使用Ctrl+F搜索到valine
进行如下配置：

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true //打开valine评论功能
  appid: 你的leancloud appid 
  appkey: 你的leancloud appkey 
  notify: false //邮件提醒
  verify: true //评论时是否有验证码，需要在Leancloud 设置->安全中心 中打开
  placeholder: 说点什么吧！ //评论框默认显示
  avatar: hide //评论者的头像,我这里设置的不显示
  guest_info: nick # custom comment header
  pageSize: 10 # pagination size

附加内容

评论者头像可以进行如下设置：

Valine目前使用的是Gravatar作为评论列表头像。

请自行登录或注册Gravatar，然后修改自己的头像。

评论的时候，留下在的Gravatar注册时所使用的邮箱即可。

感谢gravatar.cat.net提供的它的镜像就是服务。

如果你修改了头像后发现没有更新，请不要慌张，因为gravatar.cat.net有七天的缓存网络出版总库，安静的等待吧〜

Over Ending（结束语）

注:

如果还有不了解的，可以在右下方与博主在线沟通