Build your own technology blog series (three) to make your own blog comment feature!

To introduce a blog comment artifact, Valine.

Originally hexo blog using a gitment, I also like, looking to force the grid to ultra-high ah. But my bug with a little more, but after all, there is a small partner github account does not seem much. So I reluctantly going to change commenting system. Then recently joined the group of hexo blog, saw an artifact. That is Benpian hero --Valine.js.

Specific configuration to see the article below it. Its definition - a minimalist No comments backend system.

In the case of say and Netease cloud thread it has been closed down, and this is simply to save a life better than building a seven Buddha ah.

Valine - a minimalist comment system

Valine official website

This review system is based on LeanCloud, we should be very familiar with this, for, Hexo statistics also read the blog it. The official website at the following address, you need to register an account.

Leancloud Configuration

First, visit the official website https://leancloud.cn/ Leancloud
have Github account of small partners can log in with Github account and then bind the mailbox can be friends!
Click Create application after entering

Valine Configuration

The downloaded Valine.min.js left at next \ source \ js \ src
Next, open the valine profile configuration
valine profile path: 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 %}

Then we went to the theme configuration file to modify
the theme configuration file path: next_config.yml
find the following parameters to be modified

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

My Profile

Due to the configuration file structure Icarus theme and next are not the same, so we're in a bit different configuration files, modify _config.xml file first

and then add the following code in valine.ejs

if you use the next topic, it can be modify the configuration file

PS: reviewer avatar can be set as follows

This, a minimalist comment system is complete it!

Results preview

https://how2playlife.com/
casually looking for an article, pulled the bottom, is the effect it