搭建本身的技術博客系列（三）讓你的博客擁有評論功能！

給你們介紹一個博客評論神器，Valine。

原本hexo博客用的是gitment，我也很是喜歡，看着逼格就超高呀。無奈我用着bug略多，並且畢竟有github帳戶的小夥伴彷佛並很少。因而我就忍痛準備換評論系統。而後在最近剛剛加入的hexo博客羣裏，看見了一個神器。也就是本篇主人公——Valine.js。

具體配置就見以下的文章吧。它的定義—— 一款極簡的無後端評論系統。

在多說和網易雲跟帖相繼倒閉的狀況下，這個簡直是救人一命勝造七級浮屠呀。

Valine -- 一款極簡的評論系統

Valine官網

這個評論系統是基於LeanCloud的，你們應該對這個很熟悉，對，Hexo的博客閱讀量統計也是它。官網網址以下，須要註冊一個帳戶。

Leancloud配置

首先訪問Leancloud官網https://leancloud.cn/ 有Github帳號的小夥伴能夠用Github帳號進行登錄而後綁定郵箱就能夠啦！ 進入以後點擊建立應用

Valine配置

將下載好的 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:
  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

個人配置文件

因爲Icarus主題的配置文件結構和next不太同樣，因此咱們這邊的配置文件也有點不同，首先修改_config.xml文件 而後在valine.ejs中加入如下代碼 若是你使用的next主題，能夠這樣修改配置文件 PS：評論者頭像能夠進行以下設置

到此，一個極簡評論系統就完成啦！

效果預覽

https://how2playlife.com/ 隨便找一篇文章，拉到最下面，就是這個效果啦