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

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

​

转载于:https://www.cnblogs.com/supertrampai/p/11220592.html