Gitalk是一个基于GitHub问题和Preact开发的评论插件。

  • 使用GitHub登录
  • 支持多语言[en，zh-CN，zh-TW，es-ES，fr，ru]
  • 支持个人或组织
  • 无干扰模式（设置distractionFreeMode为true开启）
  • 快捷键提交评论（cmd | ctrl + enter）

实例参考：
Gitalk演示网站或本站评论区

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% 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 %}

打开 /layout/_partials/comments.swig ，在合适位置添加如下内容：

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

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

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

修改 /source/css/_common/components/third-party/third-party.styl 文件，在最后一行添加如下内容：

1
@import "gitalk";

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

1
{% include 'gitalk.swig' %}

设置Github

使用已有仓库或新建仓库 记住仓库名
创建OAuth Application，没有的点击这里

Application

完成后会生成相应的 clientID 和 clientSecret 。

clientID

打开主题配置文件 _config.yml 添加如下内容：

1
2
3
4
5
6
7
8
9
#gitalk
 gitalk:
   enable: true
   githubID: github帐号
   repo: github仓库名称
   ClientID: Client ID
   ClientSecret: Client Secret
   adminUser: github帐号 #指定可初始化评论账户
   distractionFreeMode: true #类似Facebook的分心模式

hexo d -g就可以了