您好,登錄后才能下訂單哦!
給大家介紹一個博客評論神器,Valine。
本來hexo博客用的是gitment,我也非常喜歡。無奈我用著bug略多,而且畢竟有g(shù)ithub賬戶的小伙伴似乎并不多。于是我就忍痛準(zhǔn)備換評論系統(tǒng)。然后在最近剛剛加入的hexo博客群里,看見了一個神器。也就是本篇主人公——Valine.js。
具體配置就見如下的文章吧。它的定義—— 一款極簡的無后端評論系統(tǒng)。
在多說和網(wǎng)易云跟帖相繼倒閉的情況下,這個簡直是救人一命勝造七級浮屠呀。
Valine -- 一款極簡的評論系統(tǒng)
Valine官網(wǎng)
這個評論系統(tǒng)是基于LeanCloud的,大家應(yīng)該對這個很熟悉,對,Hexo的博客閱讀量統(tǒng)計也是它。官網(wǎng)網(wǎng)址如下,需要注冊一個賬戶。
首先訪問Leancloud官網(wǎng)https://leancloud.cn/
有Github賬號的小伙伴可以用Github賬號進(jìn)行登陸然后綁定郵箱就可以啦!
進(jìn)入之后點擊創(chuàng)建應(yīng)用
將下載好的 Valine.min.js 放置于 next\source\js\src\ 下
接著,打開valine配置文件進(jìn)行配置
valine配置文件路徑:next\layout_third-party\comments\valine.swig
{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
<script src="http://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="http://unjkp.com/valine/dist/Valine.min.js"></script> //刪除Valine核心代碼庫外鏈調(diào)用
<script src="/js/src/Valine.min.js"></script> //調(diào)用剛下載的本地文件以加速加載速度
{% 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 %}
然后我們?nèi)ブ黝}配置文件中進(jìn)行修改
主題配置文件路徑:next_config.yml
找到以下參數(shù)進(jìn)行修改
valine:
enable: true //打開valine評論功能
appid: 你的leancloud appid
appkey: 你的leancloud appkey
notify: false //郵件提醒
verify: true //評論時是否有驗證碼,需要在Leancloud 設(shè)置->安全中心 中打開
placeholder: 說點什么吧! //評論框默認(rèn)顯示
avatar: hide //評論者的頭像,我這里設(shè)置的不顯示
guest_info: nick # custom comment header
pageSize: 10 # pagination size
由于Icarus主題的配置文件結(jié)構(gòu)和next不太一樣,所以我們這邊的配置文件也有點不一樣,首先修改_config.xml文件
然后在valine.ejs中加入以下代碼
如果你使用的next主題,可以這樣修改配置文件
PS:評論者頭像可以進(jìn)行如下設(shè)置
到此,一個極簡評論系統(tǒng)就完成啦!
https://how2playlife.com/
隨便找一篇文章,拉到最下面,就是這個效果啦
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。