Gitment:一款基於 Github 的 Issues 實現的評論外掛

凯凯刘發表於2017-11-01

Gitment:一款基於 Github 的 Issues 實現的評論外掛

最近發現了一個有意思的評論外掛 Gitment,從實現和效果上都不錯,給大家介紹一下。如果你有個人部落格,可以考慮使用;如果你沒有個人部落格,也可以瞭解下實現的思路,開開腦洞。

之前普遍使用的多說評論關閉了,相信很多人的部落格都受到了影響。我個人的部落格評論也因此換過 Discuz、網易評論外掛、暢言評論外掛,都不甚理想。這次看到 Gitment 還是有些驚喜。

實現的最終效果如圖:

基本原理是利用 GitHub 專案上的 Issues 功能來實現內容的儲存,使用 GitHub 的賬號登入體系。和自己的部落格整合起來也比較簡單,一個 css 檔案,一個 js 檔案,一段初始化程式碼就可以了。

1、首先 Github 上,註冊 OAuth Application

可以透過這個地址來註冊一個應用,按提示填寫即可。

成功之後會得到一個 client ID 和一個 client secret,在後面的初始化外掛時會用到。

2、頁面整合 Gitment

載入對應的 css 檔案、js 檔案、初始化程式碼到要顯示的頁面:

<div id="container"></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({
        id: '頁面 ID', // 可選。這個選項不寫(不是留空),預設為 location.href
        owner: '你的 GitHub ID',
        repo: '儲存評論的 repo',
        oauth: {
            client_id: '你的 client ID',
            client_secret: '你的 client secret',
        },
     });
    gitment.render('container'); //container為你要顯示評論的id
</script>

關於初始化部分的引數更多說明,可參看

https://github.com/imsun/gitment#options

可能遇到的問題一

如果你遇到這樣的報錯,說明你的 gitment.render('container'); 裡的 container 在頁面上沒有對應上,請仔細檢查。

可能遇到的問題二

如果遇到這樣的問題,很可能是你初始化的 repo 地址沒有寫對,repo 一定要寫成對應的 id,而不是 http 的地址,圖中的 id 是我自己 GitHub 上的一個專案,也就是要儲存評論內容的專案,如圖:

3、初始化評論

整合成功後你就可以看見顯示的評論外掛內容了。這時候還需要一步就是登陸自己的 GitHub 賬號,點選圖中的 “Initilize Comments ”。

注意:每一篇文章都需要初始化

最後你可以在 Issues 部分看到的評論儲存為:

4、自定義和個性化

你也可以自定義樣式和佈局,更多說明請參考:https://github.com/imsun/gitment#customize

最後總結一下,這款 Gitment 的優點是整合簡單,自定義比較方便,自帶 GitHub 賬號登入;缺點就是僅支援 GitHub 賬號登入,每次釋出的新文章要點選按鈕來初始化,略麻煩;目前手機端適配還並不理想。如果你對評論外掛的要求不是那麼嚴格,可以考慮使用這款外掛。

GitHub 專案原始碼:https://github.com/imsun/gitment

相關文章