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