hexo 接入 github issue 评论
8253TOOLgitment2019-08-062019-08-09

更新,评论系统切换为 gitalk

gitment 登录 alert 报错 [object ProgressEvent],打开 network 这个 gh-oauth.imsun.net 请求失败,https://imsun.github.io/gitment/dist/gitment.browser.js 内向网址 https://gh-oauth.imsun.net 发送了验证请求,这个gh-oauth.imsun.net是作者自行搭建的,现在不在维护了,所以出现了问题

看了 gitment 的 issue 很多人都反应有问题,官方的 demo 也不能用

所以现在切换为 gitalk,方法差不多,只需要改下类名就好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#comment
#gitalk-container(data-gitalk=JSON.stringify(theme.Gitalk) data-date=page.date)
link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css")
script(src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js")
script.
function commentinit() {
setTimeout(()=>{
if (this.Gitalk) {
let string = JSON.parse(document.getElementById('gitalk-container').dataset.gitalk)
var gitalk = new Gitalk({
clientID: string.client_id,
clientSecret: string.client_secret,
repo: string.repo,
owner: string.owner,
admin: string.admin,
id: document.getElementById('gitalk-container').dataset.date,
distractionFreeMode: string.distractionFreeMode
})
gitalk.render('gitalk-container')
} else commentinit()
},200)
}
commentinit()

配 置

1.去新建 OAuth App 完成注册
2.在主题配置文件 _config.yaml 中添加

1
2
3
4
5
6
7
gitment:
enable: true
id: ''
owner: Tong-H # 你的 github 用户名,可以不用太在意大小写
repo: Tong-H.github.io #存储评论的 repo
client_id: 5658f62c9837c979f96f #新建 OAuth App 时的 Client ID
client_secret: 36813d127f4f0918cd30231a403e09d81015e014 #新建 OAuth App 时的 Client secret

3.新建一个 comment 组件,看了一些博客,大部分都是用的 ejs,我用的是 Pug,这个区别不大
注意,网上有很多文章这段代码都是不可用的,会出现初始化不了的情况,这里贴出的是可用的 引入两个文件,一个 css 和 一个 js
使用 dataset 将 hexo 的变量传递给页面 新建 gitment 对象的时候要注意使用 setTimeout 轮询查看 gitment 是否存在文件加载是否完成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
block prepend cssFile
link(rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css")

#comment
// 使用 data
#gitment_container(data-gitment=JSON.stringify(theme.gitment) data-title=page.title)
script(src="https://imsun.github.io/gitment/dist/gitment.browser.js")
script.
function commentinit() {
setTimeout(()=>{
if (this.Gitment) {
let string = JSON.parse(document.getElementById('gitment_container').dataset.gitment)
var gitment = new Gitment({
id: document.getElementById('gitment_container').dataset.title,
owner: string.owner,
repo: string.repo,
oauth: {
client_id: string.client_id,
client_secret: string.client_secret,
},
})
gitment.render('gitment_container')
} else commentinit()
},200)
}
commentinit()

Comments Not Initialized

需要你先登录下初始化,不要在本地 localhost 登录,因为localhost:4000 和你注册时填写的 Authorization Callback URL 的域名不同,点击登录会跳转到 你的 Authorization Callback URL 页面

当然你也可以再去新建一个 OAuth Application 填 http://localhost:4000/ 也可以

每新建一个文章都需要去初始化,相当于重新开一个 issue

初始化时在评论框点击登录,但是没有跳到授权页面

查看页面 login 按钮的 a 标签的 href 是这样的

1
<a class="gitment-editor-login-link" href="https://github.com/login/oauth/authorize?scope=public_repo&amp;redirect_uri=https%3A%2F%2Ftong-h.github.io%2F2019%2F08%2F05%2Fhexo_theme%2F&amp;client_id=5658f62c9837c979f96f&amp;client_secret=36813d127f4f0918cd30231a403e09d81015e014">Login</a>

其中 redirect_uri 是当前页面的 url,url 的域名和你注册时填写的 Authorization Callback URL 的域名一定要一致,我检查才发现我填的时 http://tong-h.github.io, 但实际请求的却是https

参考文章

添加Gitment评论系统踩过的坑 http://xichen.pub/2018/01/31/2018-01-31-gitment/
Hexo博客框架下Gitment取代多说评论 https://zonghongyan.github.io/2017/06/29/201706292034/