0%

hexo博客尝试使用gitment作为评论插件

发表于 分类于

背景

博客主题是next，准备采用gitment插件作为评论插件。虽然知道没几个人看但是还是想弄一下。万一有人发现我的不足之处，还能提点意见。

采用gitment的原因是看到之前多说的关闭，觉得寻找一个稳定的服务还是很必要的。看到gitment是依赖于github，还是相当的可信。

安装

因为之前就选用了next主题，比较老。最新的next主题已经可以直接配置gitment评论插件了。

注册Application

我们需要在github上给自己的博客新建一个oauth2.0的app，添加地址https://github.com/settings/applications/new。按照要求填写就行。Homepage URL和Authorization callback URL写博客主页就行。

添加代码

然后在themes/next/layout/_partials/comments.swig中添加代码

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
27
28
29
30
{% elseif theme.gitment.enable %}
    <div id="container" class="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>
    const myTheme = {
        render(state, instance) {
            const container = document.createElement('div');
            container.lang = "en-US";
            container.className = 'gitment-container gitment-root-container';
            container.appendChild(instance.renderHeader(state, instance));
            container.appendChild(instance.renderEditor(state, instance));
            container.appendChild(instance.renderComments(state, instance));
            container.appendChild(instance.renderFooter(state, instance));
            return container;
        }
    }
    var gitment = new Gitment({
        id: window.location.pathname,
        theme: myTheme,
        owner: '{{ theme.gitment.owner }}',
        repo: '{{ theme.gitment.repo }}',
        oauth: {
            client_id: '{{ theme.gitment.client_id }}',
            client_secret: '{{ theme.gitment.client_secret }}'
        }
    });
    gitment.render('container');
    </script>
{% endif %}

_config.yml中添加对应配置

1
2
3
4
5
6
7
# Gitment comments
gitment:
  enable: true
  owner: #你的github id
  repo: #存放评论的仓库，可以直接在前面owner账户新建一个，直接写仓库名称
  client_id: #第一步中申请App后的clientId
  client_secret: #第一步中申请App后的client_secret

然后生成、发布就好了。

问题

授权问题

点击github登录并且授权后，返回页面提示报错：[object ProgressEvent] 。头像转圈，一直没有成功。

查看network，是其中的一个请求失败导致的。地址是：https://gh-oauth.imsun.net

有人给作者的git仓库提了issue，感兴趣的可以去看看。

好像是授权后需要通过code获取token。这步需要跨域，作者自己搭建的服务停了，上面的issue中提到了替换别人搭建的地址（可以自己去找个靠谱的试下）或者自己搭建跨域代理服务。作者给了代码。仓库地址

这个问题会发生在没在gitment中授权过得账号第一次授权的时候，如果已经授权过，不会出现这个问题。

作者的博客也存在这样的问题（需要一个没有授权过得账号进行测试）

针对上面这个问题呢 我还是决定放弃gitment。

我原本采用gitment的初衷就是希望稳定。但是gitment不仅依赖github，还需要第三方的服务。

既然仍然需要第三方服务，还是直接用评论系统来的方便。毕竟就算多说停了，还是会给通知，让切换的。其他个人搭建的服务就不一定会通知了。

附上作者博客文章地址

https://imsun.net/posts/gitment-introduction/