hexo添加gitalk,gitment社会化评论系统

作者:ManfredHu
链接:http://www.manfredhu.com/2018/11/05/37-gitalk-comment-system/index.html
声明:版权所有,转载请保留本段信息,谢谢大家

社会化评论系统,类似留言板的功能,本来还想自己写一个的。Mongodb都下好了,然后看到了一个项目——gitalk。

亲测hexo搭建的基于github page的页面可以使用。

用到了github授权第三方登陆的方式,做的,项目地址在这里:https://github.com/gitalk/gitalk

还有个叫gitment的,项目地址在这里:https://github.com/imsun/gitment

我是选了gitalk,遇到了一些登陆的问题,类似

1
www.xxx.com/?error=redirect_uri_mismatch&

这样的跳转错误,然后排了好久没搞定,就去试了下gitment,结果这个有点坑,用是可以用了,但是创建issue的时候会报错。。。
最后还是用回了gitalk。

第一步:配置github OAuth授权

申请Client ID和 Client Secret

点击下面申请
https://github.com/settings/applications/new

OK了记下两个id,下面会用到。

第二步:引入样式和脚本

cdn脚本方式

1
2
3
4
5
6
<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>

<!-- or -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

这里选jsdelivr的会比较好,因为在国内有CDN节点,unpkg的国内没有CDN节点,都会自动同步npm的版本。

npm

1
npm i --save gitalk
1
2
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

hexo版本比较低,一般都是引脚本方式。也可以像我一样写在主题里面,一般就是主题配置文件加个选项,然后ejs模版加上。

  • 主题的_config.yml文件

    1
    gitalk: true
  • ejs模版,这里是head.ejs

    1
    2
    3
    4
    <% if (theme.gitalk){ %>
    <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>
    <% } %>

第三步:给个挂载点

1
<div id="gitalk-container"></div>
1
2
3
4
5
6
7
8
9
10
11
const gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id: location.pathname, // Ensure uniqueness and length less than 50
distractionFreeMode: false // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

第四步:执行脚本

因为我是在主题加的,主题配置了多种评论系统,类似disqus,youyan等等,但是基本不是不维护了就是要翻墙。用gitalk这个也是因为github国内没被墙。具体写法类似这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<% } else if (theme.gitalk) {%>
<div id="gitalk-container"></div>
<script>
var gitalk = new Gitalk({
clientID: '5b9****************a359',
clientSecret: 'c2f2d63e5**********************5d96b9a53a',
repo: 'manfredHu.github.io',
owner: 'ManfredHu',
admin: ['ManfredHu'],
id: location.pathname,
distractionFreeMode: true // Facebook-like distraction free mode
});
gitalk.render('gitalk-container');
</script>
<% } %>

最后说下上面遇到的的redirect_uri_mismatch报的错误解决方法:
刚开始写的都是
Homepage URL和Authorization callback URL

1
https://www.manfredhu.com

然后就报错了。

最后解决了,如下图
github OAuth Apps

最后成果如我的博客所示。www.manfredhu.com


Copyright © 2015 - 2019 ManfredHu胡文峰的个人博客

All rights reserved. Designed and powered by ManfredHu.

粤ICP备18133029号