首先引用官網(wǎng)的介紹:Valine 誕生于2017年8月7日,是一款基于LeanCloud的快速、簡潔且高效的無后端評論系統(tǒng)。理論上支持但不限于靜態(tài)博客,目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。
相信這對于很多不想自己搭建評論系統(tǒng)后臺的人而言,是很有誘惑力的。然而類似的社會化評論系統(tǒng)也不少,國內(nèi)以前有一些評論系統(tǒng)比如友言之類的,都因為變現(xiàn)困難等原因倒閉了。目前用戶使用比較多的一般是暢言和來必力這倆,一開始我也想用這兩家的評論系統(tǒng),然而經(jīng)過一番調(diào)研,他們倆都不太符合我的需求。因為我需要的是一個網(wǎng)友能夠直接評論,不需要使用第三方賬號授權(quán)登錄的評論系統(tǒng)。恰巧國內(nèi)大部分的評論系統(tǒng)都是在評論之前要使用第三方社交賬號授權(quán)登錄才行。這樣一來反而打消了很多人在網(wǎng)頁上發(fā)表評論的熱情,把簡單的事情弄復(fù)雜了。valine正好就符合了我的需求,首先它很簡單就可以引入到網(wǎng)頁中,然后評論不需要第三方授權(quán)登錄,并且不需要搭建自己的后臺接口來處理評論。
配置leancloud
因為valine的評論數(shù)據(jù)是存儲在leancloud中的。所以首先去leancloud注冊賬號,然后需要實名制驗證,并且驗證郵箱。搞定之后創(chuàng)建一個應(yīng)用,選擇開發(fā)版就行,這樣就是免費使用了。

下面是不同版本的價格,一般的小站使用免費的開發(fā)版就行了??隙ㄊ菈蛴玫?。

然后在控制臺的當(dāng)前應(yīng)用中,點擊儲存->存儲化數(shù)據(jù),在里面點擊“創(chuàng)建class”,分別創(chuàng)建“Comment”和“Counter”這兩個class。這兩個class是作為存儲評論數(shù)據(jù)使用,后期就是在這里可以看到所有的評論數(shù)據(jù),并且可以進(jìn)行評論數(shù)據(jù)的管理。

最后要在安全中心里面設(shè)置“Web 安全域名”為自己的網(wǎng)站域名,這樣一來就只接受來自自己網(wǎng)站的評論數(shù)據(jù)請求,保障了評論數(shù)據(jù)的安全。

在前端代碼中使用valine
直接上代碼:
<head>
? ? ..
? ? <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
? ? ...
</head>
<body>
? ? ...
? ? <div id="vcomments"></div>
? ? <script>
? ? ? ? new Valine({
? ? ? ? ? ? el: '#vcomments',
? ? ? ? ? ? appId: 'Your appId',? ? //這里填入leancloud的設(shè)置->應(yīng)用keys中生成的對應(yīng)值
? ? ? ? ? ? appKey: 'Your appKey'? //這里填入leancloud的設(shè)置->應(yīng)用keys中生成的對應(yīng)值
? ? ? ? })
? ? </script>
</body>
可以使用npm,配合vue等框架使用:
npm install valine --save
// Use import
import Valine from 'valine';
// or Use require
const Valine = require('valine');
new Valine({
? ? el:'#vcomments',
? ? // other config
})
關(guān)于valine的具體配置參數(shù)有哪些,可以到官方文檔中查閱。一般使用默認(rèn)配置就可以了。這樣valine評論系統(tǒng)就可以直接使用了。感覺評論的實時性相當(dāng)高,體驗很不錯。而且valine的評論組件可以根據(jù)自身需要來調(diào)整外部css樣式,比如大小背景顏色等。
可以訪問性取向測試頁這個網(wǎng)頁來體驗一下valine評論系統(tǒng)的效果。
歡迎訪問我的個人網(wǎng)站butterpig