在Jekyll博客添加評論系統:gitment篇


最近在Github Pages上使用Jekyll搭建了個人博客( jacobpan3g.github.io/cn ),當需要添加評論系統時,找了一下國內的幾個第三方評論系統,如“多說”,“暢言”,“友言”,“新浪雲跟貼”:

  1. 多說,曾經較火的評論系統,網上介紹文章比較多,但已關閉,無法再用了
  2. 暢言,sohu旗下的,但是需要個人博客備案后才能使用,但github pages個人博客感覺備案比較難
  3. 友言,jiaThis旗下的,由於時http請求,github pages現在都是https了, 在https站點無法調用http請求,故也無法使用
  4. 網易雲跟貼,曾被當作“多說”的替代品,可惜官方通報說也將在2017.08.01關閉了

再看看disqus,國外比較火的評論系統,但在國內牆了,故也不考慮。

綜上,國內幾個比較主流的評論系統目前都無法在Github Pages上的個人博客使用, 后面我發現了gitment,一款由國內大神imsun開發的基於github issues的評論系統, 具體介紹請看項目主頁( github.com/imsun/gitment )

目前我已經成功把gitment應用到了自己的Github pages個人博客里,過程中碰了一些壁, 同時發現網上關於gitment的介紹並不多,故寫一篇總結,希望可以幫助到大家。

1. 申請一個Github OAuth Application

Github頭像下拉菜單 > Settings > 左邊Developer settings下的OAuth Application > Register a new application,填寫相關信息:

  1. Application name, Homepage URL, Application description 都可以隨意填寫
  2. Authorization callback URL 一定要寫自己Github Pages的URL
    (ps: 之前我自己就是在這里碰壁了,調試半天才發現)
  3. 填寫完上述信息后按Register application按鈕,得到Client IDClient Secret

2. 在jekyll博客調用gitment

如gitment項目頁Readme所示,在你需要添加評論系統的地方,一般是_layout/目錄下的 post.html, 添加一下代碼

<div id="gitmentContainer"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
    owner: 'Your GitHub username',
    repo: 'The repo to store comments',
    oauth: {
        client_id: 'Your client ID',
        client_secret: 'Your client secret',
    },
});
gitment.render('gitmentContainer');
</script>

需要修改的有4個地方

  1. Your GitHub username:填寫你的Github Pages博客所在的github賬戶名
  2. The repo to store comments:填寫用來存放評論的github倉庫,由於評論是 通過issues來存放的,個人建議這里可以直接填Github Pages個人博客所在的倉庫
  3. Your client ID:第1步所申請到的應用的Client ID
  4. Your client secret:第1步所申請到的應用的Client Secret

填寫完這4項把代碼保存上傳到github就可以了。

3. 為每篇博文初始化評論系統

由於gitment的原理是為每一遍博文以其URL作為標識創建一個github issue, 對該篇博客的評論就是對這個issue的評論。因此,我們需要為每篇博文初始化一下評論系統, 初始化后,你可以在你的github上會創建相對應的issue。

接下來,介紹一下如何初始化評論系統

  1. 上面第2步代碼添加成功並上傳后,你就可以在你的博文頁下面看到一個評論框,還 有看到以下錯誤Error: Comments Not Initialized,提示該篇博文的評論系統還沒初始化

  2. 點擊Login with GitHub后,使用自己的github賬號登錄后,就可以在上面錯誤信息 處看到一個Initialize Comments的按鈕
    (ps: 由於要求回調URL和當前地址一樣,故第2步不能在本地調試, 需把代碼先上傳再調試)

  3. 點擊Initialize Comments按鈕后,就可以開始對該篇博文開始評論了, 同時也可以在對應的github倉庫看到相應的issue

InitBtn

4. 一些問題

  • 安全問題

有些讀者擔心github oauth application的client secret這樣明文寫在頁面上會不會有安全 隱患,我也考慮到這個問題,目前我能想到比較好的解決方法是:注冊一個github小號, 在小號里注冊oauth application,使用小號app的client secret

  • 回調URL

有些讀者反映登錄不成功,請大家一定要確認github oauth application里的回調URL一定要 填寫要使用gitment的博客的URL,這一點十分重要

好了,gitment使用介紹到這里,大家若遇到什么問題盡管在下面留言,或者在我的個人博客 ( jacobpan3g.github.io/cn )留言,上面使用的評論系統就是gitment,我會抽空 一一作出回答。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM