點擊訪問原文
您還可以加入全棧技術交流群(QQ群號:254842154)
Ghost作為一個純粹的博客平臺,暫時還沒有評論功能(截止2015年2月,Ghost版本為0.5.8沒有評論功能),相比起wordpress是有些弱。但是這也是Ghost設計的初衷吧:Just a Blogging Platform。
我們可以使用第三方社會化評論系統來對Ghost增加擴展功能,增加社交元素和互動。國內現在做的比較好的有多說:http://duoshuo.com/ 。 國外的有Disqus:https://disqus.com/ 。
由于Disqus是國外的,擔心某天被墻,所以下面講講如何接入多說評論組件。
注冊
登錄多說官網:http://duoshuo.com/ 。點擊首頁的“我要安裝“
接入參數設置界面:
這里主要關注”多說域名”這個參數,它會在稍后的js引用中用到。它是多說分配給接入者的二級域名。
添加評論組件代碼
進入后臺設置,復制通用的評論組件代碼。在這里可以看到,其他常用的第三方博客平臺都有現成的插件,而Ghost目前還不支持插件安裝,只能手動安裝。
通常我們是需要在文章的末尾添加評論功能,所以編輯主題文件下的post.hbs文件:
主要代碼:
<section class="post-comments">
<div class="ds-thread" data-thread-key="{{slug}}" data-title="{{{title}}}" data-url="{{url absolute="true"}}"></div>
</section>
這段代碼需要添加到 {{/author}} 和 {{/post}}標簽之間,才能正確讀取slgu這些值,它們是post這個對象下面的屬性。
這里的data-thread-key是用來唯一標識每一篇文章的,相當于是文章的ID。
最后添加js代碼,引入多說的核心js文件embed.js:
<script type="text/javascript">
var duoshuoQuery = {short_name:"hello1010"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
這里的short_name就是之前配置的多說二級域名。
修改完畢之后,重啟ghost服務,就可以看到評論組件了。由于是動態加載的,加速的快慢取決于多說的服務器。
在多說的后臺,可以看到評論的詳情數據。
原理
第三方評論組件的使用,通常都是通過引入js文件來實現的,原理也比較簡單。在特定的DOM節點中事先生成好指定的屬性值,然后加載js文件動態綁定事件提交數據到第三方服務器。例如,多說是通過post方式提交評論到對應的二級域名下:
加載評論時,通過動態加載js文件引入評論數據,再動態組裝html字符串append到body中。例如,多說加載評論的方式是通過下面這個url來實現的,參數都在url中。把下面這段代碼復制到瀏覽器中,就可以獲取本篇文章的所有評論數據。
http://hello1010.duoshuo.com/api/threads/listPosts.json?thread_key=ghost-comment-duoshuo&url=http%3A%2F%2Fhello1010.com%2Fghost-comment-duoshuo%2F&title=%E7%BB%99Ghost%E5%8D%9A%E5%AE%A2%E5%A2%9E%E5%8A%A0%E5%A4%9A%E8%AF%B4%E8%AF%84%E8%AE%BA%E7%BB%84%E4%BB%B6&require=site%2Cvisitor%2Cnonce%2Clang%2Cunread%2Clog%2CextraCss&site_ims=1423403026&lang_ims=1423403026&referer=http%3A%2F%2Fhello1010.com%2Fghost%2Feditor%2F43%2F&v=15.1.30
擴展
多說除了支持評論,還支持評論數據的同步,它可以把評論數據同步到開發者自己的服務器中;除此之外,還支持單點登錄,登錄回調等。更多功能參考多說的開發者文檔:http://dev.duoshuo.com/docs