1. 程式人生 > >Leancloud+Valine打造Hexo個人博客極簡評論系統

Leancloud+Valine打造Hexo個人博客極簡評論系統

ppi 安全中心 安全 郵件 本地 文件 vendor key 文件路徑

以下配置是基於Next主題6.1.0版本
效果見個人博客的最下方評論。

Leancloud配置

首先訪問Leancloud官網https://leancloud.cn/
有Github賬號的小夥伴可以用Github賬號進行登陸然後綁定郵箱就可以啦!
進入之後點擊創建應用
技術分享圖片
這樣我們就創建好啦!
技術分享圖片
接著點擊應用右上角的設置進入設置界面
技術分享圖片
選擇應用key,這樣就可以看到我們接下來需要使用到的key
技術分享圖片
接著進入應用中心綁定你的個人博客域名
技術分享圖片

Valine配置

首先下載最新的Valine.min.js核心代碼庫到本地(下面是鏈接)
https://cdn.jsdelivr.net/npm/[email protected]/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:評論者頭像可以進行如下設置
技術分享圖片

到此,一個極簡評論系統就完成啦!
技術分享圖片

Leancloud+Valine打造Hexo個人博客極簡評論系統