博客评论系统使用gitment

一开始我博客的评论系统使用的是多说,后来多说倒闭了换成网易云跟帖,结果后来网易云跟帖也关了,我就换成disqus,结果disqus 被墙了。。。

昨天把hexo升级了下,想着索性就看看有没有更合适的评论系统用,然后就发现了gitment。配置完效果还不错

它本质上是利用了GitHub Issues ,将评论同步到GitHub

那么,如何申请和配置呢?

注册 OAuth Application

点击此处 来注册一个新的 OAuth Application。其他内容可以随意填写,但要确保填入正确的 callback URL(一般是评论页面对应的域名,如 https://awen.me)。

你会得到一个 client ID 和一个 client secret,这个将被用于之后的用户登录。

配置 hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gitment:
enable: true
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: true # Comments lazy loading with a button
cleanly: true # Hide 'Powered by ...' on footer, and more
language: # Force language, or auto switch by theme
github_user: 'GitHub 用户名' # MUST HAVE, Your Github ID
github_repo: '仓库名称' # MUST HAVE, The repo you use to store Gitment comments
client_id: '上面申请的client ID' # MUST HAVE, Github client id for the Gitment
client_secret: '上面申请的Client secret'
# EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

# Baidu Share

基本到这里就配置完了,不过,在实际使用过程中会有问题,因为作者的认证服务器https://gh-oauth.imsun.net 挂了,所以一直登陆不成功,提示 [object ProgressEvent]

解决办法

修改 next 主题下的themes/next/layout/_third-party/comments 下的 gitment.swig,替换 js文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
{% if theme.gitment.enable and theme.gitment.client_id %}
<!-- LOCAL: You can save these files to your site and update links -->
{% if theme.gitment.mint %}
{% set CommentsClass = "Gitmint" %}
<link rel="stylesheet" href="https://aimingoo.github.io/gitmint/style/default.css">
<script src="https://file.awen.me/gitment.js"></script>
{% else %}
{% set CommentsClass = "Gitment" %}
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://file.awen.me/gitment.browser.js"></script>
{% endif %}

如果你不用我这个,你也可以自己搭建认证服务器,具体操作步骤如下

使用 Heroku 搭建GitHub 认证服务器

Heroku是一个支持多种编程语言的云平台即服务,注册Heroku,在右上角的“new”,选择“Create New App”新建一个应用。
根据操作系统下载并安装Heroku CLI,或者使用npm install heroku,我这里以mac为例

1
brew tap heroku/brew && brew install heroku

登陆heroku,OSX输入指令之后,会自动打开一个页面输入登陆用户名和密码

1
heroku login

获取 gh-oauth-server

1
git clone https://github.com/imsun/gh-oauth-server.git

修改package.json,在script中添加如下代码

1
"heroku": "NODE_ENV=production node server"

如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"name": "gh-oauth-server",
"version": "0.0.1",
"scripts": {
"start": "node server",
"heroku": "NODE_ENV=production node server"
},
"dependencies": {
"body-parser": "^1.17.1",
"express": "^4.15.2",
"multer": "^1.3.0",
"request": "^2.81.0"
}
}

新建Procfile文件,输入以下内容

1
web: npm run heroku

在heroku上找到你刚刚创建的应用,切换到“Deploy”,有详细的操作步骤

1
2
3
4
5
$ heroku git:clone -a YourAppName
$ cd YourAppName
$ git add .
$ git commit -am "make it better"
$ git push heroku master

切换到“Settings”,找到“Domain”的值,即应用的地址。然后参考上面的解决办法中将gitment.browser.js 文件中的值进行修改。两个gitment.browser.js 都需要修改。

1
2
3
4
5

// 将 gitment.js中的
_utils.http.post('https://gh-oauth.imsun.net', {})
// 改为
_utils.http.post('https://YourAppName.herokuapp.com/', {})
阿文 wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!