Hexo Next主题集成Gittalk

[toc]

前言

本片讲述给Next主题集成Gittalk，及各种采坑。Gittalk据我了解是基于GitHub Issue开发的评论插件，它是把GitHub 的issue集成在next博客中的。具体详情见demo

配置Gittalk

Register Application

在GitHub注册新应用
登录GitHub->点击头像->Setting->Developer settings->OAuth Apps->New OAuth App
顺序如图
B2E512E2-B938-41EE-B619-03C974F55231
图(1)
7CF4B19B-16DA-40B7-AECE-79179033A54
图(2)
974DB528-DC1E-411D-AFEE-51ED3488BAA6
Application name： # 应用名称，随意
Homepage URL： # 网站URL，如https://coldcrack.github.io
Application description # 描述，随意
Authorization callback URL：# 网站URL，https://coldcrack.github.io
注册完成后，页面跳转如下
895B2089-7F11-44EB-A539-BF9383A54
Client ID和Client Secret在在主题配置中有用,保留。

gitalk.swig

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

{% if page.comments && theme.gitalk.enable %}
      
      
       
    {% endif %}

comments.swig

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

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

index.swig

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

{% 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，在最后一行上添加内容，引入样式：

@import "gitalk";

_config.yml

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

gitalk:
  enable: true
  githubID: github帐号  # 例：asdfv1929   
  repo: 仓库名称   # 例：asdfv1929.github.io
  ClientID: Client ID
  ClientSecret: Client Secret
  adminUser: github帐号 #指定可初始化评论账户
  labels: 'gitalk' #GitHub issues的标签
  distractionFreeMode: true

以上就是NexT中添加gitalk评论的配置，博客上传到GitHub上后，打开页面进入某一博客内容下，就可看到评论处。

Tips:博主踩过的坑

未找到相关的issue评论，请联系xxx初始化创建

这个是博主未给文章评论初始化，只用让博主点击登录GitHub账号即可
094A45469CB62B803C0439D95F3AE42

如果博主点击GitHub登录会返回到首页，说明主题配置有问题，查看 _config.yml文件中的gittalk是否配置正确。

Error: Not Found.

E510EF3AA8146A41FA4D490FBE9F8045

未找到repo。查看 _config.yml文件中的gittalk中repo是否配置正确，可以是博客所在的仓库，也可以新建一个仓库。

Error: Validation Failed.

AA639D24515DF1799BFC5DE1027C0A9

验证失败，最可能的就是查看 _config.yml文件中的gittalk的labels这里，我们新建文章后同时要在GitHub中新建一个issue用来保存评论留言，而每个issue需要做个label标签(如下图)，GitHub对这个lebel标签做了限制，长度不超过50。我们的文章文件名只要带中文，就会超过50字节。最简单的方法是将文章文件名改为英文或数字拼接的。你也可以查看#102其他博主是如何修改的。
F86EABB8-8AC8-4298-9B56-C117E8947E12