前言
在整理个人博客的过程中,想添加一套评论系统,一方面想收集意见来更好的改进,另一方面想提供一个读者与作者或读者与读者之间交流的平台。 在对比线下比较火的几个评论系统,又考虑到自己的博客是基于GitHub,综合考虑最终选择了基于Github Issues的评论系统Gitalk。 其他评论系统,如:
LiveRe:中文名称“来必力”,是一家韩国的公司,但本地化做的非常到位。这是我新发现的一个评论系统,支持的登录方式也挺多,但由于时间问题没有仔细的研究,后续有可能会尝试。
Disqus:国外比较火的评论系统,但在国内必须完全代理VPN,才可以正常访问。
gitment:基于Github issue的评论插件,但很久没有人维护。
畅言:需要ICP备案。
友言、网易云跟帖、多说等等其他家:关停太随意。
正文
关于Gitalk
Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。
- 使用 GitHub 登录
- 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
- 支持个人或组织
- 无干扰模式(设置 distractionFreeMode 为 true 开启)
- 快捷键提交评论 (cmd|ctrl + enter)
使用
创建一个Github Application
如果没有 点击申请,也可以
Github头像下拉菜单 > Settings > 左边Developer settings下的OAuth Application > Register a new application,填写相关信息:
点击创建,获得Client ID和Client Secret。
配置gitalk
将下面这段代码插入到你的网站, 或创建一个gitalk.html直接调用
{{ partial "gitalk.html" . }}
代码如下:
<!-- 评论系统 -->
<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>
<!-- 配置gitalk -->
<script type="text/javascript">
var gitalk = new Gitalk({
// gitalk的主要参数
clientID: 'Github Application clientID',
clientSecret: 'Github Application clientSecret',
repo: '存储你评论 issue 的 Github 仓库名',
owner: 'Github 用户名',
admin: ['Github 用户名'],
id: '页面的唯一标识,gitalk会根据这个标识自动创建的issue的标签',
//其他参数
distractionFreeMode: false // 全屏遮罩,jia
});
gitalk.render('gitalk-container');
</script>
<div id="gitalk-container"></div>
推送到 Github 仓库
没什么问题的话,当你点击进入你的博客页面后就会出现评论框了。
当你用 github 帐号登录(管理员),并且第一次加载该会比较慢,因为第一次加载会自动在你 repo 的仓库下创建对应 issue。