Home / PostsPost
为个人博客增加评论组件
嘟噜聪2020/02/18 14:07:14
[Github]
[博客]
[Gitalk]
3276人已阅
简介 个人博客评论系统有很多，例如又前我用的“多说”评论系统，因资金问题不再运营，又或者是其他正在运营的评论系统，要么国内无法访问，要么广告太多。当然也可以自己实现一个评论系统，在不使用账号系统的情况下
个人博客评论系统有很多，例如又前我用的“多说”评论系统，因资金问题不再运营，又或者是其他正在运营的评论系统，要么国内无法访问，要么广告太多。当然也可以自己实现一个评论系统，在不使用账号系统的情况下，只要做好防刷其实也是可以的。
既然咱们是技术博客，那必然大家都会使用Github，那我这就演示一下如何配置Gitalk吧。
在Github创建一个应用授权
登录到您的Github，并在设置里创建“应用授权”,如下图:
地址: https://github.com/settings/applications/new
- Application Name: 填写您的应用名称
- Homepage URL: 填写您的应用网址
- Application Description: 填写您的应用描述，可以不填
- Authorization callback URL: 这个是应用的回调地址，如果您不需要同步的话填您的应用网址就行了
记住上面这个 Client ID 与 Client Secret 这两条记录，在配置gitalk时需要填写上去。
创建一个Repo 用于将评论信息存储在issues上
- 在右上角点击“+”选择“New repository”
- 填写您的Repository Name
- 必须设置为Public，否则其他人无法评论
配置Gitalk
在您文章详情页页面增加一个gitalk所要用的css样式表及js文件，还需要一个评论框所展示所在的位置:
<link rel="stylesheet" href="https://cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css"/>
<script src="https://cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>
<div id="gitalk-container"></div>
配置gitalk参考
gitalk资源引入完之后我们还需要初始化一下:
const gitalk = new Gitalk({
clientID: '', // 将上面创建的 Client ID 填写到这里
clientSecret: '', // 将上面创建的 Client Secret 填写到这里
repo: 'blog-gitalk', // 上面创建的Repo的地址 如: https://github.com/icowan/blog-gitalk.git
owner: '', // 您的Github用户名（不是账号） 我的是 icowan
admin: [''], // 管理员的账号，可以填写多个，通常是自己
id: "{{post.id}}", // 您的文章id或地址 默认是 window.location.pathname
distractionFreeMode: false, // Facebook-like distraction free mode 默认就好可不填
labels: "", // 评论的标签 默认就好可不填
pagerDirection: "last", // 评论的排序方式 默认就好可不填
createIssueManually: "", // 是否手动初始化评评论页面 默认就好可不填
distractionFreeMode: "" // 是否为无干扰模式 默认就好可不填
});
gitalk.render('gitalk-container'); // 生成评论框，输入 标签的ID 就是 `<div id="gitalk-container"></div>`
主要填写的几个信息:
clientId: 之前所创建的应用授权的 Client IDclientSecret: 之前所创建的应用授权的 Client Secretrepo: 为了存评论信息所创建的仓库owner: 您的Github用户名（不是账号） 我的是 icowanadmin: 管理员的账号，可以填写多个，通常是自己。创建isseus 的人员id: 您的文章id或地址 可以使用window.location.pathname
下面完整html代码参考:
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>post detail</title>
<!-- 引用gitalk 资源 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css"/>
<script src="https://cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>
</head>
<body>
<!-- gitalk评论框所展示的位置 -->
<div id="gitalk-container"></div>
<!-- gitalk初始化脚本 -->
<script>
const gitalk = new Gitalk({
clientID: '', // 将上面创建的 Client ID 填写到这里
clientSecret: '', // 将上面创建的 Client Secret 填写到这里
repo: 'blog-gitalk', // 上面创建的Repo的地址 如: https://github.com/icowan/blog-gitalk.git
owner: '', // 您的Github用户名（不是账号） 我的是 icowan
admin: [''], // 管理员的账号，可以填写多个，通常是自己
id: "{{post.id}}", // 您的文章id或地址 默认是 window.location.pathname
distractionFreeMode: false // Facebook-like distraction free mode
});
gitalk.render('gitalk-container'); // 生成评论框，输入 标签的ID 就是 `<div id="gitalk-container"></div>`
</script>
</body>
</html>
为了加快站点的访问速度，我使用了bootcss的cdn服务，不需要将文件放在咱们站点上，直接走cdn访问会快一些。
配置完成之后刷新页面看看效果。
配置完成之后可能出现的错误
一般这种情况是需要管理员登录github，访问一下这个页面创建一个isseus，然后在这个isseus下才可以进行评论。
也就是说每个文章的页面都会在Github的仓库上有一个独立的isseus。
最终效果
尾巴
假期在家把我博客用go-kit重写了一遍，也使用的新模版，欢迎大家访问，以后有时间我再进行开源。
不用我说了，大家都懂的。您的恩赐就是我更新的动力
很赞哦！ (2)
