添加留言功能

今天想在博客中添加留言功能，发现网上以前的一些方法已经被淘汰，在一阵查询中发现使用valine是可以实现的

我用的是Next 主题，本身就已经集成了valine，直接配置即可
下面网上搜来的其余系统,请自行搜索教程，划横线的是因为官方已经不允许使用了

多说
~~网易云跟帖~~
畅言
来必力（LiveRe）
Disqus
Hypercomments
valine

开启Valine

注册Leancloud

我们的评论系统其实是放在Leancloud上的，因此首先需要去注册一个账号点我注册

1、注册完以后需要创建一个应用，名字可以随便起，然后进入应用->设置->应用key ,获取你的 appid 和 appkey
2、打开主题下的配置文件搜索 valine，填入appid 和 appkey，

以下是我的配置，空白处即为你的appid和appkey。别忘记加空格

valine:
  enable: true
  appid:                                         # your leancloud application appid
  appkey:                                       # your leancloud application appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: welcome write your comment! # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  visitors: true
  comment_count: true

2、在Leancloud -> 设置 -> 安全中心 -> Web 安全域名把你的域名加进去

可以加你买的域名，也可以是你的github仓库名，也可以是你的本机地址也就是localhost：4000

Valine配置

首先下载最新的Valine.min.js核心代码库到本地（下面是链接）
https://cdn.jsdelivr.net/npm/valine@1.1.9-beta9/dist/
右击Valine.min.js选择链接另存为即可

将下载好的 Valine.min.js 放置于 next\source\js\src\ 下
接着，打开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
找到以下参数进行修改

# 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

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

到此，一个极简评论系统就完成啦！