簡介

本文介紹hexo next主題(5.1.2)整合giment評論系統的過程。所謂gitment就是把評論放到github的issues系統裡，評論支援md，比較適合程式設計師.

一.註冊OAuth Application

點選https://github.com/settings/applications/new註冊，注意Authorization callback URL填自己的網站urlhttp://yangq.me/.記下Client ID和Client Secret.

二.修改themes/next/_config.yml

在其中新增:

# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
 

gitment:
  enable: true
  githubID: yourid
  repo: yourrepo
  ClientID: yourid
  ClientSecret: yoursecret
  lazy: true

注意:格式要正確，該空格的一定要空格。所有的yourXXX都換成自己的.

在主題的en.yml增加:

gitmentbutton: Show comments from Gitment

zh-Hans.yml增加:

gitmentbutton: 顯示 Gitment 評論

三.修改主題layout/_partials/comments.swig

找到這個檔案裡的這兩行:

{% elseif theme.valine.appid and theme.valine.appkey %}
      <div id="vcomments"></div>

上面是最後一個elseif分支，在下面加一個elseif分支:

{% 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 %}

四.增加gitment.swig

在主題下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" href="https://imsun.github.io/gitment/style/default.css">
   <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: window.location.pathname, 
               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 %}

然後在主題下layout/_third-party/comments/index.swig檔案中引入gitment.swig檔案：

{% include 'gitment.swig' %}

五.新增gitment.styl

在主題下source/css/_common/components/third-party/目錄下新增gitment.styl檔案，設定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檔案中引入相應的CSS樣式即可:

@import "gitment";

這樣就ok了！

易錯點

1. 修改themes/next/_config.yml這個檔案時，格式要正確。另外，repo是你要想建立issues的倉庫，完全可以跟博文所放的倉庫不一個。id就寫自己的github使用者名稱就可以，這個使用者名稱跟repo必須匹配。
2. gitment可能不支援連結地址裡有中文，所以安裝gitment前一定要參考前文把連結持久化搞成全是英文的。
3. 初始化評論後，可以到github裡自己放issues的倉庫檢視issues是否建立成功，有時候瀏覽器可能會有快取依然提示你初始化評論。一般過個兩分鐘就顯示正常了。

參考文件