gitalk：一个基于 Github Issue 和 Preact 开发的评论插件
详情Demo可见：https://gitalk.github.io/

一、Register Application

在GitHub上注册新应用，链接：https://github.com/settings/applications/new

参数说明：
Application name： # 应用名称，随意
Homepage URL： # 网站URL，如https://heyiki.github.io
Application description # 描述，随意
Authorization callback URL：# 网站URL，https://heyiki.github.io

点击注册后，页面跳转如下，其中Client ID和Client Secret在后面的配置中需要用到，到时复制粘贴到第七步的操作即可

二、新建theme/主题名称/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 %}

三、修改theme/主题名称/layout/_partials/comments.swig，添加内容:

1
2
{% elseif theme.gitalk.enable %}
  <div id="gitalk-container"></div>
注意：elseif放置的位置，不要放置在endif后面

四、修改theme/主题名称/layout/_third-party/comments/index.swig，在最后添加内容：

1
{% include 'gitalk.swig' %}

五、新建theme/主题名称/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";

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

1
2
3
4
5
6
7
8
gitalk:
  enable: true
  githubID: github帐号  # 例：heyiki
  repo: 仓库名称   # 例：heyiki.github.io
  ClientID: Client ID #第一步注册的Client ID
  ClientSecret: Client Secret #第一步注册的Client Secret
  adminUser: github帐号 #指定可初始化评论账户
  distractionFreeMode: true