GitHub-Hexo-Blog 集成Gitalk評論插件

在本文)末尾可查看先查看效果：

1. 新建New OAuth App

在github中，Settings / Develpoer settings OAuth Apps / New OAuth App

bolg-comments
https://github.com/SuperTrampAI
bolg-comments gitalk
https://supertrampai.com
分別在對應的欄目內填入相對應的內容
注意：在Authorization callback URL 中，不應該加上“/”

2. 創建github倉庫，用來放置評論的文本

在你的github中，新建repository，命名如下：blog-comments （可替換）

下圖為bolg架構

總共需要操作的幾個文件，加一個_config.yml文件

3. 新建gitalk.swig

文件目錄：themes\hexo-theme-next-master\layout_third-party\comments
文件內容如下：

{% if [page.comments](http://page.comments/) && theme.gitalk.enable %}
<link rel="stylesheet" href="[https://unpkg.com/gitalk/dist/gitalk.css](https://unpkg.com/gitalk/dist/gitalk.css)">
<script src="[https://unpkg.com/gitalk/dist/gitalk.min.js](https://unpkg.com/gitalk/dist/gitalk.min.js)"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.clientID }}',
          clientSecret: '{{ theme.gitalk.clientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.githubID }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
       </script>
{% endif %}

4. 修改index.swig

在gitalk.swig的同級目錄下找到index.swig
在文件末尾加上：

{% include 'gitalk.swig' %}

如果你的gitalk.swig文件不是采取的如上命名，自行替換

5. 修改comments.swig

目錄：themes\hexo-theme-next-master\layout_partials\comments.swig
在如下目錄的最后一個if代碼塊內加入如下代碼：

{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>

此處划重點！！！！代碼塊必須放入，如圖片所示位置！

6. 修改_config.yml

在themes\hexo-theme-next-master_config.yml如下位置加入代碼塊：

gitalk:
  enable: true
  githubID: SuperTrampAI  # 你的githubId
  repo: blog-comments # 新建的repository名
  clientID: # 申請的OAuth AppID
  clientSecret:  # 申請的OAuth AppID
  adminUser: SuperTrampAI # 
  distractionFreeMode: true

到此結束，可以在本文最后看到效果

​