GitHub-Hexo-Blog comments plug-in integrated Gitalk

In this paper ) to see the end of the first view the results:

1. Create New OAuth App

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

Comments-Bolg
https://github.com/SuperTrampAI
Bolg Comments gitalk-
https://supertrampai.com
respectively corresponding to the fill in the corresponding column content
Note: Authorization callback URL, we should not add "/"

2. Create a github repository used to place the text comment

Your github, the new Repository , named as follows: Blog-Comments (alternative)

The following figure shows the architecture bolg

Some files need to operate in total, plus a _config.yml file

3. New gitalk.swig

Directory: themes \ hexo-theme-next -master \ layout_third-party \ comments
document reads as follows:

{% 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. Modify index.swig

Index.swig found in the same directory gitalk.swig the
end of the file add:

{% include 'gitalk.swig' %}

As if your gitalk.swig file name is not taken, voluntarily replaced

5. Modify comments.swig

Contents: themes \ hexo-theme-next -master \ layout_partials \ comments.swig
adding the following code in the last block of code if a directory as follows:

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

Here draw the focus! ! ! ! Code block must be placed, as the position shown in the picture!

6. Modify _config.yml

Added code block themes \ hexo-theme-next-master_config.yml following positions:

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

This is the end, you can paper finally see results

​