Leancloud+Valine打造Hexo個人博客極簡評論系統
阿新 • • 發佈:2018-08-29
ppi 安全中心 安全 郵件 本地 文件 vendor key 文件路徑
右擊
將下載好的
接著,打開valine配置文件進行配置
valine配置文件路徑:
以下配置是基於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個人博客極簡評論系統