Ghost配置3——添加評論系統

用上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後刷新網頁，一切搞定！