gitalk：一个基于 Github Issue 和 Preact 开发的评论插件

一、注册应用

在Github上注册新应用

https://github.com/settings/applications/new

Application name： # 应用名称，可随意
Homepage URL： # 网站URL，如https://hanhanhanxu.github.io
Application description # 描述，可随意
Authorization callback URL：# 网站URL，https://hanhanhanxu.github.io

注册成功，跳转后会得到Client ID和Client Secret，记下来，后面要用

二、修改next配置

1、gitalk.swig

新建/next/layout/_third-party/comments/gitalk.swig文件，并添加内容：


{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="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 %}

2、comments.swig

修改/next/layout/_partials/comments.swig，添加内容如下:

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

注：添加到最后一个 elseif里面的div结束标签的下面：

  {% elseif theme.valine.appid and theme.valine.appkey %}
    <div class="comments" id="comments">
    </div>
    {% elseif theme.gitalk.enable %}
    <div id="gitalk-container"></div>
  {% endif %}



{% endif %}

3、index.swig

修改/next/layout/_third-party/comments/index.swig，在最后一行添加内容：

{% include 'gitalk.swig' %}

4、gitalk.styl

新建/next/source/css/_common/components/third-party/gitalk.styl文件，添加内容：

.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

5、third-party.styl

修改/next/source/css/_common/components/third-party/third-party.styl，在最后一行上添加内容，引入样式：

@import "gitalk";

6、_config.yml

在主题配置文件/next/_config.yml中添加如下内容：

gitalk:
  enable: true
  githubID: github帐号  # 例：hanhanhanxu
  repo: 仓库名称   # 例：hanhanhanxu.github.io
  ClientID: Client ID
  ClientSecret: Client Secret
  adminUser: github帐号 #指定可初始化评论账户 一定要写你自己的Github账号 例：hanhanhanxu
  distractionFreeMode: true

注：将上面的github账号 id 什么的换成你自己的

三、发布

Git命令行：

hexo d -g

发布后，还差一步初始化。

你要先进入你自己的博客https://hanhanhanxu.github.io/然后选择一个模块进入,看到下面xxxx初始化xxx即可，如果没有就刷新或重新发布几遍。

点击登录进行初始化。

输入密码即可完成。

可以评论了！！！