Jekyll部落格添加Gitment評論系統

個人首頁： https://zhangquan1995.github.io

了解一下國内的幾個第三方評論系統，如“多說”，“暢言”，“友言”，“新浪雲跟貼”：

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

Gitment，一款由國内大神imsun開發的基于github issues的評論系統, 具體介紹請看項目首頁( github.com/imsun/gitment ).

申請一個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.
3. 填寫完上述資訊後按Register application按鈕，得到Client ID和Client Secret.

在jekyll部落格調用gitment

在你需要添加評論系統的地方，一般是_layout/目錄下的 post.html, 添加一下代碼:

{% if site.comment_gitment_repo %}
<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({
		id: '<%= page.date %>',
        owner: '{{site.github_username}}',
        repo: '{{site.comment_gitment_repo}}',
        oauth: {
            client_id: '{{site.comment_gitment_clientId}}',
            client_secret: '{{site.comment_gitment_clientSecret}}',
        },
    });
    gitment.render('gitmentContainer')
</script>
{% endif %}
                

在_config.yml檔案裡面輸入相應的配置：

#gitment
comment_gitment_repo: 你的repo名
comment_gitment_clientId: 你的clientId名
comment_gitment_clientSecret: 你的clientSecret
                

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

由于gitment的原理是為每一遍博文以其URL作為辨別建立一個github issue， 對該篇部落格的評論就是對這個issue的評論。是以，我們需要為每篇博文初始化一下評論系統， 初始化後，你可以在你的github上會建立相對應的issue。

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

1. 上面第2步代碼添加成功并上傳後，你就可以在你的博文頁下面看到一個評論框，還 有看到以下錯誤Error: Comments Not Initialized，提示該篇博文的評論系統還沒初始化。
2. 點選Login with GitHub後，使用自己的github賬号登入後，就可以在上面錯誤資訊 處看到一個Initialize Comments的按鈕。
3. 點選Initialize Comments按鈕後，就可以開始對該篇博文開始評論了， 同時也可以在對應的github倉庫看到相應的issue。

Gitment坑點小結

Error: Not Found問題

owner或者repo配置錯誤了，注意名字和倉庫名字的大小寫。

Error: Comments Not Initialized

1. 在注冊OAuth Application這個步驟中，給Authorization callback URL指定的位址錯了
2. 還沒有在該頁面的Gitment評論區登陸GitHub賬号

Error：validation failed

issue的标簽label有長度限制！labels的最大長度限制是50個字元。需要修改前面插入的gitment的html代碼：

1. id用文章的title

id: '<%= page.title %>'

1. id用文章的時間

id: '<%= page.date %>'

gitment的漢化

隻需到模闆裡将原來定義CSS和JS的那兩行改成：

<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>
                

個人首頁： https://zhangquan1995.github.io