用上Ghost發表第一篇文章以後,突然意識到一個問題,這貨沒有評論系統?
看了下官網的說明,他們把主要精力都放在了博客系統的基礎功能上,對於周邊功能可以通過引入第三方功能來實現。例如代碼的高亮問題,就可以使用highlight.js等組件來實現[看這裏]。
選擇Valine
關於第三方的評論系統,網絡上大多以多說爲例進行的說明。然而多說作爲一個多年來使用率第一的第三方系統,竟然已經關閉了評論系統的接入。目前知名的第三方系統大概有:
- 暢言 —— 搜狐出品,目前國內用戶量第一
- 來比力 —— 另一家國產第三方評論系統
- Disqus —— Ghost推薦使用的評論系統,經常被牆
根據網絡上的反饋,第一想法是使用暢言。畢竟是搜狐出品,品質和功能都是可以保證的。但從服務的可持續性考慮,既然佔有率第一的多說都不能通過盈利來維持服務,暢言如果哪一天被停止服務也一點不會讓我驚訝。
猶豫間看到了Valine。純前端,後端數據支持通過LeanCloud來實現。這就打消了我最大的疑慮,而且簡潔的風格也非常符合我的審美。
Valine的安裝
Valine的安裝非常簡單,全程參考官網即可以實現。
需要注意的是,Valine的js代碼可以通過代碼注入的設置來進行引用,但body端的代碼則需要下入到post.hbs模板文件當中纔可以。(因爲普通的代碼注入只能注入到footer,而且是全局所有頁面,既不能指定評論組件的位置,也必須在所有頁面中都引入評論組件。)
引入文件
// 編輯 ghost/content/themes/casper/default.hbs
...
{{# if post}}
<link rel="stylesheet" type="text/css" href="{{asset "css/valine.css"}}" />
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/valine/1.3.3/Valine.min.js'></script>
{{/if}}
...
引入代碼
// 編輯 ghost/content/themes/casper/post.hbs
// 在<section class='post-full-content'></section>中加入
...
<section class="post-full-content">
<div class="post-content">
{{content}}
</div>
// 下面是要加入的內容
<div id="vcomments"></div>
<script>
new Valine({
el: '#vcomments',
appId: '<AppId>',
appKey: '<AppKey>',
notify:false,
verify:false,
avatar:'mm',
placeholder: '請發表您的高見'
})
</script>
</section>
...
修改後保存文件,重啓ghost,刷新頁面。初次使用,在評論組件的下方位置顯示應用初始化中,要等待3分鐘。3分鐘後,評論系統便可以使用了。
Valine的樣式修改
valine可以正常使用了,但字體顯示卻非常的小,小到幾乎看不到。打開開發者工具查看,字體都被設定在了0.875rem的大小。
別的博客系統不知道,但是在Ghost系統上,這樣的字體大小几乎沒辦法看清任何字。可以通過添加CSS樣式,來重新調整評論系統的字體大小
/* 創建 ghost/content/themes/casper/assets/css/valine.css */
.v .vinput {
font-size: 1.5rem !important;
}
.v .veditor {
font-size: 1.5rem !important;
}
.v .vbtn {
font-size: 1.5rem !important;
}
.v .vinfo .col {
font-size: 1.5rem !important;
}
.v .vinfo .vcount .vnum {
font-size: 1.5rem !important;
}
.v .power {
display: none !important;
}
.v .vlist .vcard .vhead .vnick {
font-size: 1.5rem !important;
}
.v .vlist .vcard .vhead .vsys {
font-size: 1.2rem !important;
}
.v .vlist .vcard .vh .vtime {
font-size: 1.2rem !important;
}
.v .vlist .vcard .vh .vat {
font-size: 1.2rem !important;
}
.v .vlist .vcard .vcontent {
font-size: 1.5rem !important;
}
重啓Ghost後刷新網頁,一切搞定!