NexT主题集成Gitalk评论框架

Gitalk简介

Gitalk 是一个基于GitHub Issue的评论插件。

特点：

使用 GitHub 登录
兼容PC 移动端
集成简单

新建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 %}

修改comments.swig

修改/layout/_partials/comments.swig，添加内容如下，与前面的elseif同一级别上：

1
2
3

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

修改index.swig

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

1	{% include 'gitalk.swig' %}

新建gitalk.styl

新建/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;

third-party.styl

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

1	@import "gitalk";

配置_config.yml

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

gitalk:
  enable: true
  githubID: github帐号 
  repo: 仓库名称
  ClientID: Client ID
  ClientSecret: Client Secret
  adminUser: github帐号
  distractionFreeMode: true