在網(wǎng)頁中引入無后端的valine評論系統(tǒng),使用leancloud作為免費存儲和評論管理

首先引用官網(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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容