hexo 博客next主题集成gitment或者gitalk评论系统
原文链接hexo 博客next主题集成gitment或者gitalk评论系统
前言
之前使用多说，多说挂了，用网易跟帖代替，网易跟帖又没了。前段时间用来必力，感觉还行，但总归不踏实。后面发现有gitment，用github的issue作为评论载体，感觉靠谱许多。下面介绍一下hexo 的naxt主题中如何集成gitment以及gitalk评论系统。注：next主题版本为5.1.3,其他版本可能略有差异。
准备
在使用以上两个评论系统之前，都需要在github注册新的应用
参数说明：
Application name： #应用名称
Homepage URL： #网站URL
Application description #描述
Authorization callback URL：#网站URL
填写完成后，点击register application。
最后会生成Client ID以及Client Secret，后面需要用到。
完成之后需要创建一个仓库，仓库的名称为刚才应用的名称。
next主题集成gitment
主题配置
修改主题配置文件next/_config.yml
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
enable: true
githubID: github帐号
repo: 仓库名 #例如：BlogComments
ClientID: Client ID
ClientSecret: Client Secret
lazy: flase #false显示github评论框
修改next/languages/zh-Hans.yml
在zh-Hans.yml中增加一行，当然来如果你的主题语言是英语，就修改
en.yml
gitmentbutton: 显示评论
修改/layout/_partials/comments.swig
在文件的最后一个
后面再插入一个else if 分支
{% elseif theme.gitment.enable %}
{% if theme.gitment.lazy %}
{% else %}
{% endif %}
修改layout/_third-party/comments/index.swig
在最后增加一行
{% include 'gitment.swig' %}
在/layout/_third-party/comments/目录下增加gitment.swig
内容如下：
{% if theme.gitment.enable %}
{% set owner = theme.gitment.githubID %}
{% set repo = theme.gitment.repo %}
{% set cid = theme.gitment.ClientID %}
{% set cs = theme.gitment.ClientSecret %}
{% if not theme.gitment.lazy %}
{% else %}
{% endif %}
{% endif %}
增加gitment.styl
在./source/css/_common/components/third-party/下增加gitment.styl
内容如下：
#gitment-display-button{
display: inline-block;
padding: 0 15px;
color: #0a9caf;
cursor: pointer;
font-size: 14px;
border: 1px solid #0a9caf;
border-radius: 4px;
}
#gitment-display-button:hover{
color: #fff;
background: #0a9caf;
}
修改third-party.styl
修改/source/css/_common/components/third-party/third-party.styl，
在最后增加一行，引入样式
@import "gitment";
小结
可能遇到的问题
1.页面提示ERROR NOT FOUND
解决：一般是由于你的repo填写错误，repo纯粹指的是的你的仓库名称。
2.每篇文章都需要初始化
next主题版本过低，建议更新到5.1.1及以上版本，可全部自动初始化每篇文章的评论。
3.在上面说到的路径找不到对应文件时，建议使用find 命令查找，因为next主题的目录结构可能会变化。
4.在本地查看时，建议打开浏览器的调试模式，可以查看控制台是否有错。
特点总结
优点
样式比较还可以，并且支持markdown语法，能够预览，相对于其他评论系统应该是比较稳定可靠来。
缺点
1.移动端不支持
2.只能使用github登录，不过github应该已经够了。
next主题集成gitalk
在集成gitalk之前，同样需要建立应用，操作步骤已经在准备章节中说明了。
gitalk
主题配置
修改主题配置文件next/_config.yml
在修改主题配置文件next/_config.yml中增加以下内容
gitalk:
enable: true
githubID: github帐号
repo: 仓库名称
ClientID: Client ID
ClientSecret: Client Secret
adminUser: github帐号#指定可初始化评论账户
distractionFreeMode: true
增加/layout/_third-party/comments/gitalk.swig
增加gitalk.swig，内容如下：
{% if page.comments && theme.gitalk.enable %}
{% endif %}
修改/layout/_partials/comments.swig
在最后一个div增加内容
{% elseif theme.gitalk.enable %}
修改layout/_third-party/comments/index.swig
在最后增加一行
{% include 'gitalk.swig' %}
增加gitment.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";
小结
可能遇到的问题
1.页面提示ERROR NOT FOUND
解决：可能是仓库未创建或者仓库名填写错误。
2.每篇文章都需要初始化
next主题版本过低，建议更新到5.1.1及以上版本.
3.在上面说到的路径找不到对应文件时，建议使用find 命令查找，因为next主题的目录结构可能会变化。
4.在本地查看时，建议打开浏览器的调试模式，可以查看控制台是否有错。
特点总结
优点
支持移动端
缺点
缺点：不支持markdown在线预览
提高加载速度
为了提高加载速度，可以将gitalk.swig的https://unpkg.com/gitalk/dist/gitalk.css和https://unpkg.com/gitalk/dist/gitalk.min.js替换加载本地文件。
比如，在next/source/lib下新建gitalk文件夹，里面放置gitalk.css和gitalk.min.js文件。
引用方法
/lib/gitalk/gitalk.css
/lib/gitalk/gitalk.min.js
上面两个文件可以在github上的gitalk dist中下载
总结
配置好的next主题可以在next中下载使用
以上两种方式私以为都是比较稳定的方式，还是值得一试。
欢迎提出意见或者建议。
参考文章：Next主题的Gitalk移植
微信公众号：编程珠玑