我荒废了时间,时间便把我荒废了。——莎士比亚
https://github.com/gitalk/gitalk
用 Gitalk 给博客添加评论系统:优雅、开源、无后端依赖
在搭建个人博客时,我们经常面临一个小难题:评论系统用什么好? 传统方案如 Disqus 虽然功能强大,但加载慢、隐私问题多;国内的评论系统则可能存在稳定性和接入成本。
于是我选择了一个更极客、更自由的方式:Gitalk —— 一个基于 GitHub Issues 的评论系统。
Gitalk 是一个利用 GitHub Issues 构建的评论系统,由 gitalk 开发者团队 创建。它的设计理念很简单:
既然每个人都有 GitHub 账号,为什么不能用 GitHub 直接发评论?
它通过 GitHub 的 OAuth 授权,允许访问者在你指定的仓库中创建/回复 issue,从而完成评论功能。
默认样式已经很好看:
你也可以通过 CSS 自定义样式,和你的博客风格完美融合。
例如:yourname/your-repo-comments
确保仓库是公开的,并启用了 Issues 功能。
在 GitHub 的 Developer Settings 中创建一个 OAuth 应用:
https://yourdomain.com
创建后会得到 Client ID
和 Client Secret
在页面 HTML 中加入:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
在你的页面中加入如下代码:
<div id="gitalk-container"></div>
<script>
const gitalk = new Gitalk({
clientID: '你的 Client ID',
clientSecret: '你的 Client Secret',
repo: '你的评论仓库名',
owner: '你的 GitHub 用户名',
admin: ['你的 GitHub 用户名'], // 拥有写权限的管理员列表
id: location.pathname, // 每篇文章的唯一标识
distractionFreeMode: false
});
gitalk.render('gitalk-container');
</script>
这样就完成了集成,访问页面就会看到评论框啦。
我使用 Gitalk 已有一段时间,感受如下:
Gitalk 是一种非常优雅的评论系统解决方案:
如果你正在为博客评论系统发愁,不妨用 Gitalk 来试试,说不定你会爱上它的简单和自由。