Hexo Next主题集成Gittalk

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

-------------本文结束感谢您的阅读-------------