添加Gitment评论系统踩过的坑

备忘-配置流程

setting - OAuth Application 注册页面完成注册

1
2
3
4
Application Name: gitment 评论 //随便填
Homepage Url: http://XiChen.pub //自己的域名
Application description: //随便填,留空也可以
Authorization Callback URL: http://XiChen.pub //自己的域名

注册成功后会得到Client IDClient Secret

_config.yaml添加

1
2
3
4
5
6
7
gitment:
enable: true
id: '' #页面 ID, 可选。默认为 location.href
owner: linxueyuanstdio
repo: linxueyuanstdio.github.io #存储评论的 repo
client_id: '2f7f71f1ba398039ff23' #你的 Client ID
client_secret: '3ebc908a7042fef2d56a83a2eb8c18777374a087' #你的 Client secret

comment.ejs添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<% if (theme.gitment.client_id && theme.gitment.client_secret && theme.gitment.enable ){ %>
<div id="gitment_container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
id: '<%= page.title %>',
owner: '<%= theme.gitment.owner %>',
repo: '<%= theme.gitment.repo %>',
oauth: {
client_id: '<%= theme.gitment.client_id %>',
client_secret: '<%= theme.gitment.client_secret %>',
},
})
gitment.render('gitment_container')
</script>
<% } %>

初始化

其实到这里差不多已经配置好了 只需要初始化一下

  1. 发布你的页面
  2. 然后在评论框登录你的github账号,必须跟第二步owner用户名相同的账号
  3. 登录之后点击初始化按钮

Error:NOT FOUND

owner或者repo配置错误了,照着第二步来就好,网页端生成后如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
<script>
var gitment = new Gitment({
id: 'blog comment',
owner: 'linxueyuanstdio',
repo: 'linxueyuanstdio.github.io',
oauth: {
client_id: '2f7f71f1ba398039ff23',
client_secret: '3ebc908a7042fef2d56a83a2eb8c18777374a087',
},
})
gitment.render('gitment_container')
</script>
...

Error: Comments Not Initialized

  • 在注册OAuth Application这个步骤中,给Authorization callback URL指定的地址错了
  • 还没有在该页面的Gitment评论区登陆GitHub账号

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

不要在本地测试,因为在setting - OAuth Application 注册页面填的Authorization Callback URL是自己的域名,不是本地调试的域名,比如http://localhost:4000/。当然,蛋疼的话可以另外申请一个OAuth Applicationhttp://localhost:4000/也是可以的。

Error:validation failed

看开发者工具的console,跟踪过去

1
Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)
1
POST https://api.github.com/repos/linxueyuanstdio/linxueyuanstdio.github.io/issues 422 (Unprocessable Entity)

Network那里找到原因,是id不合法。原来的gitment有一项id配置成了window.location.pathname,但仍报错。



尝试去掉id,留空行不行?按官网文档应该可以的,但是报错=. =。

思考一下,设定的id给评论对应的issue一个label,这个label的值就是id的值,那么id的作用应该是使issue和文章通过label连接在一起。

那么写死id: 'blog comment'行不行呢?不行,每篇文章的评论是要根据id动态加载的,写死的话导致所有的文章共享一个issue。

麻痹,感觉这篇文章坑了我添加Gitment评论系统到Hexo主题NexT,而且官网的默认配置(把id留空)不对。

冷静,继续追踪



传值是对的呀…

既然知道传值对了,id的作用也清楚了,难道是GitHub在搞事情?

去新建一个label,把值复制进去…



卧槽,真的有长度限制!

那就简单了,只取title做id,平时写标题不要太浪~~~

1
id: '<%= page.title %>'

2018-02-25更新

最近在整理项目开发的系列文章,发现标题不是想不浪就能克制得住的哇。评论中iHTCboy的解决方法很有通用性,就采用他的方法好了。

主要思想是用时间作id

1
id: '<%= page.date %>'

这样传给github的标签是定长的,不会超过长度限制。同时date可以自己写,只要精确到分秒,区分文章不是问题。Good job!

哇!!!写标题快浪起来!!!

  • PS:一个date的例子:date: 2018-02-25 11:48:00.000000000+8:00 更改后面的0可以达到毫秒微秒纳秒级别
  • PS:xjzsq的方法也很好,思想是用副标题作id,可以看下他的文章

大小写问题

配置项中,可能github账号中含大小写,比如我的是LinXueyuanStdio,但是在配置时不用关心大小写问题,因为POST的时候一律转成小写

测试时产生的issue何去何从

删不掉的,死心吧。
不过可以改title,改内容,改label等等,对应issues的每一个操作都会记录下来。
另外,版本提交的commits,也是删不掉的。

顺便总结一下github issue 的用法

参考:

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器