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
8
| 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
#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()
|
需要你先登录下初始化，不要在本地 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&redirect_uri=https%3A%2F%2Ftong-h.github.io%2F2019%2F08%2F05%2Fhexo_theme%2F&client_id=5658f62c9837c979f96f&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/
