摘要：目前知名的第三方系統(tǒng)大概有暢言搜狐出品，目前國(guó)內(nèi)用戶量第一來(lái)比力另一家國(guó)產(chǎn)第三方評(píng)論系統(tǒng)推薦使用的評(píng)論系統(tǒng)，經(jīng)常被墻根據(jù)網(wǎng)絡(luò)上的反饋，第一想法是使用暢言。畢竟是搜狐出品，品質(zhì)和功能都是可以保證的。

用上Ghost發(fā)表第一篇文章以后，突然意識(shí)到一個(gè)問(wèn)題，這貨沒(méi)有評(píng)論系統(tǒng)？

看了下官網(wǎng)的說(shuō)明，他們把主要精力都放在了博客系統(tǒng)的基礎(chǔ)功能上，對(duì)于周邊功能可以通過(guò)引入第三方功能來(lái)實(shí)現(xiàn)。例如代碼的高亮問(wèn)題，就可以使用highlight.js等組件來(lái)實(shí)現(xiàn)[看這里]。

關(guān)于第三方的評(píng)論系統(tǒng)，網(wǎng)絡(luò)上大多以多說(shuō)為例進(jìn)行的說(shuō)明。然而多說(shuō)作為一個(gè)多年來(lái)使用率第一的第三方系統(tǒng)，竟然已經(jīng)關(guān)閉了評(píng)論系統(tǒng)的接入。目前知名的第三方系統(tǒng)大概有：

暢言 —— 搜狐出品，目前國(guó)內(nèi)用戶量第一

來(lái)比力 —— 另一家國(guó)產(chǎn)第三方評(píng)論系統(tǒng)

Disqus —— Ghost推薦使用的評(píng)論系統(tǒng)，經(jīng)常被墻

根據(jù)網(wǎng)絡(luò)上的反饋，第一想法是使用暢言。畢竟是搜狐出品，品質(zhì)和功能都是可以保證的。但從服務(wù)的可持續(xù)性考慮，既然占有率第一的多說(shuō)都不能通過(guò)盈利來(lái)維持服務(wù)，暢言如果哪一天被停止服務(wù)也一點(diǎn)不會(huì)讓我驚訝。

猶豫間看到了Valine。純前端，后端數(shù)據(jù)支持通過(guò)LeanCloud來(lái)實(shí)現(xiàn)。這就打消了我最大的疑慮，而且簡(jiǎn)潔的風(fēng)格也非常符合我的審美。

Valine的安裝非常簡(jiǎn)單，全程參考官網(wǎng)即可以實(shí)現(xiàn)。

需要注意的是，Valine的js代碼可以通過(guò)代碼注入的設(shè)置來(lái)進(jìn)行引用，但body端的代碼則需要下入到post.hbs模板文件當(dāng)中才可以。（因?yàn)槠胀ǖ拇a注入只能注入到footer，而且是全局所有頁(yè)面，既不能指定評(píng)論組件的位置，也必須在所有頁(yè)面中都引入評(píng)論組件。）

// 編輯 ghost/content/themes/casper/default.hbs
...
    {{# if post}}
        
        
        
    {{/if}}
...

// 編輯 ghost/content/themes/casper/post.hbs
// 在
中加入
...
  

    

        {{content}}
    
    // 下面是要加入的內(nèi)容
    

    


...

修改后保存文件，重啟ghost，刷新頁(yè)面。初次使用，在評(píng)論組件的下方位置顯示應(yīng)用初始化中，要等待3分鐘。3分鐘后，評(píng)論系統(tǒng)便可以使用了。

valine可以正常使用了，但字體顯示卻非常的小，小到幾乎看不到。打開(kāi)開(kāi)發(fā)者工具查看，字體都被設(shè)定在了0.875rem的大小。

別的博客系統(tǒng)不知道，但是在Ghost系統(tǒng)上，這樣的字體大小幾乎沒(méi)辦法看清任何字?？梢酝ㄟ^(guò)添加CSS樣式，來(lái)重新調(diào)整評(píng)論系統(tǒng)的字體大小

/* 創(chuàng)建 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后刷新網(wǎng)頁(yè)，一切搞定！