Home / PostsPost

为个人博客增加评论组件

嘟噜聪2020/02/18 14:07:14 [Github] [博客] [Gitalk] 974人已阅

简介 个人博客评论系统有很多,例如又前我用的“多说”评论系统,因资金问题不再运营,又或者是其他正在运营的评论系统,要么国内无法访问,要么广告太多。当然也可以自己实现一个评论系统,在不使用账号系统的情况下

个人博客评论系统有很多,例如又前我用的“多说”评论系统,因资金问题不再运营,又或者是其他正在运营的评论系统,要么国内无法访问,要么广告太多。当然也可以自己实现一个评论系统,在不使用账号系统的情况下,只要做好防刷其实也是可以的。

既然咱们是技术博客,那必然大家都会使用Github,那我这就演示一下如何配置Gitalk吧。

在Github创建一个应用授权

登录到您的Github,并在设置里创建“应用授权”,如下图:

地址: https://github.com/settings/applications/new

  • Application Name: 填写您的应用名称
  • Homepage URL: 填写您的应用网址
  • Application Description: 填写您的应用描述,可以不填
  • Authorization callback URL: 这个是应用的回调地址,如果您不需要同步的话填您的应用网址就行了

记住上面这个 Client IDClient Secret 这两条记录,在配置gitalk时需要填写上去。

创建一个Repo 用于将评论信息存储在issues上

  1. 在右上角点击“+”选择“New repository”
  2. 填写您的Repository Name
  3. 必须设置为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 ID
  • clientSecret: 之前所创建的应用授权的 Client Secret
  • repo: 为了存评论信息所创建的仓库
  • owner: 您的Github用户名(不是账号) 我的是 icowan
  • admin: 管理员的账号,可以填写多个,通常是自己。创建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)

文章评论

站点信息

  • 微信公众号