【個人博客搭建及配置六】評論系統

博客使用valine作爲評論工具,原因是他使用簡介,體積輕量,靈活配置,速度很快!

image

1.註冊LeanCloud

valine接住了LeanCloud的力量,所以需要LeanCloud的APP ID 和 APP Key

首先註冊和登錄LeanCloud

創建一個應用:

創建應用

應用創建好以後,進入剛剛創建的應用,選擇左下角的設置>應用Key,然後就能看到你的APP ID和APP Key了:

image

代碼

將如下代碼插入你的文章模板中

<head>
    ...
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    ...
</head>
<body>
    ...
    <div id="vcomments"></div>
    <script>
        new Valine({
            el: '#vcomments',
            appId: '<API_ID>',
            appKey: '<API_Key>'
        })
    </script>
</body>

配置好這些,等待兩分鐘,就可以在文章裏使用你的評論啦。

數據管理

由於Valine 是無後端評論系統,所以也就沒有開發評論數據管理功能。

可以在leanCloud中管理評論

登錄>選擇你創建的應用>存儲>選擇Class Comment

image

安全域名

爲了數據安全,在leanCloud中配置你的安全域名

image

配置項

Valine還有一些其他的配置項

new Valine({
    el: '#vcomments' ,
    appId: '<APP_ID>',
    appKey: '<APP_KEY>',
    notify:false, 
    verify:false, 
    avatar:'mm', 
    placeholder: 'just go go' 
});

placeholder
類型:String
默認值:Just go go
必要性:false
評論框佔位提示符。

notify
類型:Boolean
默認值:false
必要性:false
評論回覆郵件提醒,請參考配置。

verify
類型:Boolean
默認值:false
必要性:false
驗證碼服務。

path
類型:String
默認值:window.location.pathname
必要性:false
當前文章頁路徑,用於區分不同的文章頁,以保證正確讀取該文章頁下的評論列表。
可選值:

window.location.pathname (默認值,推薦)
window.location.href
自定義
I. 請保證每個文章頁路徑的唯一性,否則可能會出現不同文章頁下加載相同評論列表的情況。
II. 如果值爲window.location.href,可能會出現隨便加不同參數進入該頁面,而被判斷成新頁面的情況。
avatar
類型:String
默認值:mm
必要性:false
Gravatar 頭像展示方式。

可選值:

''(空字符串)
mp
identicon
monsterid
wavatar
retro
robohash
hide
更多信息,請查看頭像配置。

meta
類型:Array
默認值:['nick','mail','link']
必要性:false
評論者相關屬性。

pageSize
類型:Number
默認值:10
必要性:false
評論列表分頁,每頁條數。

lang
類型:String
默認值:zh-cn
必要性:false
多語言支持。

可選值:

zh-cn
en
如需自定義語言,請參考i18n。

visitor
類型:Boolean
默認值:false
必要性:false
文章訪問量統計。

highlight
類型:Boolean
默認值: true
必要性: false
代碼高亮,默認開啓,若不需要,請手動關閉

avatarForce
類型: Boolean
默認值: false
必要性: false
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章