Hexo添加Gitalk评论插件

好多“红杏“类软件都扑街了，而且disqus在国内的加载速度那个惨啊，所以转战Gitalk试试～

1.安装

Gitalk提供了两种方式：

1. 直接引入

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

2. npm安装

npm i --save gitalk

import 'gitalk/dist/gitalk.css'

import Gitalk from 'gitalk'

鉴于我懒的程度直接选择第一种了TAT。

2.使用

新建仓库

1. Github上新建一个仓库，命名随便只要记得住，这里就不赘述了,详细操作查看Hexo博客搭建。

2. 创建OAuth Application，没有的小伙伴请戳这里。

2

完成后会生成相应的clientIDandclientSecret。

3

修改主题文件

1. 这里以next主题为例，不同的主题目录和模板引擎不同，可以自己修改哈,修改next主题配置文件_config.yml，于dikqus上方，添加字段：

# Gitalk
gitalk: 
  enable: true    #用来做启用判断可以不用
  clientID: 'your clientID'    #上面生成的往这里怼
  clientSecret: 'your clientSecret'   #同上
  repo: Blog_comments    #仓库名称
  owner: erbiduo    #github用户名
  admin: erbiduo
  distractionFreeMode: true

2. 找到next/layout/_third-party/comments文件夹，新建gitalk.swig文件，代码如下：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
  
  {% if theme.gitalk.enable %}  //_config.yml文件若没有添加enable: true可删除该判断

    {% if theme.gitalk.distractionFreeMode  %}      
      <link rel='stylesheet' href="https://yiyeti.cc/usr/themes/veryse/css/gitalk.css">
      <script src="https://yiyeti.cc/usr/themes/veryse/css/gitalk.min.js"></script>
      <script type="text/javascript">
          var gitalk = new Gitalk({
            clientID:  '{{theme.gitalk.clientID}}', 
            clientSecret: '{{theme.gitalk.clientSecret}}',
            id: window.location.pathname,
            repo: '{{theme.gitalk.repo}}', 
            owner: '{{theme.gitalk.owner}}', 
            admin: '{{theme.gitalk.admin}}', 
            distractionFreeMode: '{{theme.gitalk.distractionFreeMode}}',
          })
          gitalk.render('gitalk-container')
      </script>
    {% endif %}

  {% endif %}
{% endif %}

3. 同目录下在index.swig文件末尾添加：

{% include 'gitalk.swig' %}

4. 下步搞起，next/layout/_partials文件夹下，找到comments.swig文件，添加代码：

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

哦了，不过Gitalk在移动端属于隐形状态。想看Gitalk效果可以戳右边哈-杂谈博客。

看不见