title: Hexo添加gitalk评论插件
date: 2018-10-21 19:05:44
tags: Hexo配置
toc: true
点击访问我的博客主页
Gitalk介绍
Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件
你可以在这里找到：点击一下
有以下特性：
- 使用 Github 登录
+ 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
+ 支持个人或组织
+ 无干扰模式（设置 distractionFreeMode 为 true 开启）
+ 快捷键提交评论 （cmd|ctrl + enter）
废话不多说了，直接主题吧
注册一个OAuth应用程序
点击这里 注册
注册后会生成如图所示的ID、Secret 【下文有用】
配置gitalk
- 在
\themes\NexT\layout\_third-party\comments\文件夹下新建 gitalk.swig 文件，配置如下
{% if page.comments && theme.gitalk.enable %}
{% endif %}
- 修改
\themes\NexT\layout\_partials\comments.swig
你会看到几个elseif，把下文代码段添加到它们的并列位置上
{% elseif theme.gitalk.enable %}
- 修改
\themes\NexT\layout\_third-party\comments\index.swig
添加
{% include 'gitalk.swig' %}
- 新建
\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;
- 新建
\source\css\_common\components\third-party\third-party.styl
引入样式
@import "gitalk";
- 配置 项目文件夹目录下的主配置文件
_config.yml
gitalk:
enable: true
githubID: 你的github账号名 # 如：josonle
repo: 项目仓库名 # 例：josonle.github.io
ClientID: 上文提到的ID
ClientSecret: 上文提到的Secret
adminUser: 你的github账号名 #指定可初始化评论账户
distractionFreeMode: true #启用快捷键 Ctrl+Enter提交评论
createIssueManually: true ##如果当前页面没有相应的 isssue ，且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮
配置基本完成，但貌似最近github更新过后，issue的名字不能超过50，所以会出现** Error: Validation Failed**报错
具体可以看看这个issue讨论
取其中的一个大佬提的方法，使用md5对title编码，限制长度
解决 Error: Validation Failed 报错问题
在 themes\NexT\source\js\src\ 下添加 md5.min.js，代码如下
!function(n){"use strict";function t(n,t){var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<<16|65535&r}function r(n,t){return n<>>32-t}function e(n,e,o,u,c,f){return t(r(t(t(e,n),t(u,f)),c),o)}function o(n,t,r,o,u,c,f){return e(t&r|~t&o,n,t,u,c,f)}function u(n,t,r,o,u,c,f){return e(t&o|r&~o,n,t,u,c,f)}function c(n,t,r,o,u,c,f){return e(t^r^o,n,t,u,c,f)}function f(n,t,r,o,u,c,f){return e(r^(t|~o),n,t,u,c,f)}function i(n,r){n[r>>5]|=128<>>9<<4)]=r;var e,i,a,d,h,l=1732584193,g=-271733879,v=-1732584194,m=271733878;for(e=0;e>5]>>>t%32&255);return r}function d(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t>5]|=(255&n.charCodeAt(t/8))<16&&(o=i(o,8*n.length)),r=0;r<16;r+=1)u[r]=909522486^o[r],c[r]=1549556828^o[r];return e=i(u.concat(d(t)),512+8*t.length),a(i(c.concat(e),640))}function g(n){var t,r,e="";for(r=0;r>>4&15)+"0123456789abcdef".charAt(15&t);return e}function v(n){return unescape(encodeURIComponent(n))}function m(n){return h(v(n))}function p(n){return g(m(n))}function s(n,t){return l(v(n),v(t))}function C(n,t){return g(s(n,t))}function A(n,t,r){return t?r?s(t,n):C(t,n):r?m(n):p(n)}"function"==typeof define&&define.amd?define(function(){return A}):"object"==typeof module&&module.exports?module.exports=A:n.md5=A}(this);
然后修改修改gitalk.swig，引入md5.min.js，对id值md5编码化
{% if page.comments && theme.gitalk.enable %}
{% endif %}
应该没问题了，会出现下图所示的样子
顺便提一下 增加留言簿页面
在NexT的_config.yml配置文件下，找到
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
guestbook: /guestbook # 增加这一行
在NexT\languages\zh-Hans.yml下，找到
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
guestbook: 给我留言
然后新生成一个留言页就OK
hexo new page "guestbook"
先这样吧，不想写了