添加Gitment评论系统踩过的坑

2018-01-31

1. 备忘-配置流程
2. 坑

备忘-配置流程

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

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

注册成功后会得到Client ID和Client Secret

在`_config.yaml`添加

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`添加

<% 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>
<% } %>

初始化

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

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

坑

Error：NOT FOUND

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

...
<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 Application填http://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 的用法

参考：

Prev: github issue 的用法

Next: Ethereum Dapp Tutorial — Part 3