前言
以往的兒童節(jié)都會給兒子說：“親愛的兒子析校，不好意思，今年你爹又沒追到你娘铜涉，你再等等吧智玻，提前祝你六一快樂”。今年六一略顯不同芙代，多說正式關(guān)閉服務(wù)吊奢，心塞。曾也想轉(zhuǎn)回Disqus(墻)链蕊，也嘗試注冊了暢言(奈何要備案網(wǎng)站)事甜，最終種種原因不得不放棄了谬泌。
近期滔韵，不經(jīng)意間看到了，imsun實(shí)現(xiàn)的一款基于 GitHub Issues 的評論系統(tǒng)Gitment掌实，作為菜鳥的我看到后陪蜻，還是蠻佩服的。
GitHub授權(quán)接入
Gitment是使用的GitHub Issues作為評論系統(tǒng)贱鼻，在接入Gitment前宴卖，需要獲得GitHub的授權(quán)，獲得相應(yīng)的客戶端id和客戶端私鑰邻悬，以備站點(diǎn)使用症昏。具體步驟如下圖所示：
OAuth application注冊接入
Hexo框架Next主題下添加Gitment
如果您使用的是Hexo框架的Next主題博客，想要添加Gitment的時候父丰，記得將自己的Next主題更新下版本肝谭，開始本人使用的是version 5.1.0的，配置后，會遇到每次打開文章攘烛，都需要重新點(diǎn)擊Initialize comments的情況魏滚，以往評論歷史數(shù)據(jù)獲取也有問題。鑒于此坟漱，我更新了Next主題（當(dāng)前為version 5.1.1）鼠次，現(xiàn)在使用正常，大家可先來本人博客看看效果：仁伯安GitHub主頁芋齿，（首先得謝謝DotaWang11同學(xué)的支持評論O(∩_∩)O~）腥寇，如果您從事iOS工作，還請?jiān)?a target="_blank" rel="nofollow">仁伯安的GitHub給個Star觅捆。
** Next主題下Gitment配置 **
<div id="container"></div>
<link rel="stylesheet" >
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
id: '頁面 ID', // 可選花颗。默認(rèn)為 location.href
owner: '你的 GitHub ID', // 可以是你的GitHub用戶名，也可以是github id
repo: '存儲評論的 github repo',
oauth: {
client_id: '你的 client id',
client_secret: '你的 client secret',
},
})
gitment.render('container')
</script>
在配置owner的時候惠拭，可以在瀏覽器中輸入：https://api.github.com/users/GitHub用戶名扩劝，來獲取對應(yīng)數(shù)據(jù)id。
引入Gitment需要將以上引文代碼寫入對應(yīng)的頁面即可职辅，在Hexo框架的Next主題中配置Gitment的步驟如下：
- 主題文件config.yml配置
在主題下themes/next/_config.yml文件中添加：
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
enable: true
githubID: zonghongyan
repo: zonghongyan.github.io
ClientID: ------
ClientSecret: ------
lazy: false
其中l(wèi)azy的含義棒呛，是否懶加載相應(yīng)評論框，如果為true域携，文章底部評論是收起狀態(tài)簇秒，提示顯示 Gitment 評論按鈕，單擊展開評論框秀鞭。
- 懶加載按鈕顯示的文字設(shè)置：
在主題下languages/en.yml文件中添加：
gitmentbutton: Show comments from Gitment
在主題下languages/zh-Hans.yml文件中添加：
gitmentbutton: 顯示 Gitment 評論
在主題下languages/zh-hk.yml文件中添加：
gitmentbutton: 顯示 Gitment 評論
在主題下languages/zh-tw.yml文件中添加：
gitmentbutton: 顯示 Gitment 評論
- 懶加載按鈕div及事件配置
在主題下layout/_partials/comments.swig文件中添加：
<div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% elseif theme.changyan.appid and theme.changyan.appkey %}
<div id="SOHUCS"></div>
{% elseif theme.gitment.enable %}
{% if theme.gitment.lazy %}
<div onclick="ShowGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
<div id="gitment-container" style="display:none"></div>
{% else %}
<div id="gitment-container"></div>
{% endif %}
{% endif %}
</div>
{% endif %}
- 對應(yīng)頁面生成JS代碼配置
在主題下layout/_third-party/comments/目錄下中添加文件gitment.swig：
{% if theme.gitment.enable %}
{% set owner = theme.gitment.githubID %}
{% set repo = theme.gitment.repo %}
{% set cid = theme.gitment.ClientID %}
{% set cs = theme.gitment.ClientSecret %}
<link rel="stylesheet" >
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
{% if not theme.gitment.lazy %}
<script type="text/javascript">
var gitment = new Gitment({
id: document.location.href,
owner: '{{owner}}',
repo: '{{repo}}',
oauth: {
client_id: '{{cid}}',
client_secret: '{{cs}}',
}});
gitment.render('gitment-container');
</script>
{% else %}
<script type="text/javascript">
function ShowGitment(){
document.getElementById("gitment-display-button").style.display = "none";
document.getElementById("gitment-container").style.display = "block";
var gitment = new Gitment({
id: document.location.href,
owner: '{{owner}}',
repo: '{{repo}}',
oauth: {
client_id: '{{cid}}',
client_secret: '{{cs}}',
}});
gitment.render('gitment-container');
}
</script>
{% endif %}
{% endif %}
添加gitment.swig文件后趋观，在主題下layout/_third-party/comments/index.swig文件中引入gitment.swig文件：
{% include 'gitment.swig' %}
- 設(shè)置CSS樣式
在主題下source/css/_common/components/third-party/目錄下添加gitment.styl文件，設(shè)置button的樣式：
#gitment-display-button{
display: inline-block;
padding: 0 15px;
color: #0a9caf;
cursor: pointer;
font-size: 14px;
border: 1px solid #0a9caf;
border-radius: 4px;
}
#gitment-display-button:hover{
color: #fff;
background: #0a9caf;
}
之后锋边，在主題下 source/css/_common/components/third-party/third-party.styl文件中引入相應(yīng)的CSS樣式即可
@import "gitment";
詳見：Add Gitment Support
文有不當(dāng)之處還請見諒Ｖ逄场！豆巨！
常見問題：
- 配置主題文件_config.yml時剩辟，格式錯誤，比如gitment前有空格也會造成代碼生成問題往扔；
- Error: Not Found問題贩猎，repo庫填寫問題，詳見gitment issues 18萍膛；
- 其他問題吭服，參見作者項(xiàng)目的Issue
- 作者提醒使用本項(xiàng)目的用戶，請保持克制蝗罗，切勿濫用艇棕。詳見 Gitment：使用 GitHub Issues 搭建評論系統(tǒng)
參考：
- [1]. 使用 GitHub Issues 搭建評論系統(tǒng)
- [2]. imsun-gitment
- [3]. Add Gitment Support
本文已在版權(quán)印備案麦到，如需轉(zhuǎn)載請?jiān)诎鏅?quán)印獲取授權(quán)。
獲取版權(quán)
