如何在博客中使用Gitalk(第三方社会化评论系统)

Posted by SenYi Blog on 2019-01-29

在众多社会化产品中,我选择了Gitalk,中间也遇到很多乱七八糟的问题,现在将这些问题总结汇总一番,以便以后再次遇到。

多说 - 最多用户使用的评论,但遗憾2017年6月将暂定服务;不建议新用户使用,但为旧用户保留,也感谢多说一路的陪伴; 

网易云跟帖 - 网易提供的评论组件,功能比较简单,性能优秀;管理后台在查询上还不算特别智能,但足够普通用户使用,但在2017年8月也停止了服务; 

搜狐畅言 - 搜狐提供的评论组件,功能丰富,体验优异;但必须进行域名备案。只要域名备过案就可以通过审核。 

必力 - 来必力是以社交网站评论为基础,帮助用户实现自由沟通的内容平台,但是对于没有编程基础的人使用起来会比较困难,但还算比较好的产品。

Disqus - 国外使用较多的评论组件。万里长城永不倒,一枝红杏出墙来,你懂的,但是墙外的小伙伴强推。

Gitment - 基于 GitHub Issues 的评论系统。支持在前端直接引入,不需要任何后端代码。同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面,但是个人不是很喜欢体验设计,要拉到评论最底下才可进行评论。

Gitalk - 不用梯子也可以正常使用的稳定社会化评论产品,缺点就是文章要一个一个点过去(初始化),本文主推介绍,项目地址点这里

Gitalk


一款基于Github Issue和Preact开发的评论插件

Gitalk 使用 Github 帐号登录,界面干净整洁,最喜欢的一点是支持 MarkDown语法。

1.png

原理

Gitalk 是一个利用 Github API,基于 Github issue 和 Preact 开发的评论插件,在 Gitalk 之前还有一个 gitment 插件也是基于这个原理开发的,不过 gitment 已经很久没人维护了。

可以看到在 gitalk 的评论框进行评论时,其实就是在对应的 issue 上提问题。

2.png


如何使用

到这里,你应该对 Gitalk 有个大致的了解了,现在,开始集成 gitalk 插件吧。

将这段代码插入到你的网站:

<!-- Gitalk 评论 start  -->

<!-- Link Gitalk 的支持文件  -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script> 
<div id="gitalk-container"></div>     <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的标签',
    
    });
    gitalk.render('gitalk-container');
</script> 
<!-- Gitalk end -->

我们需要关心的就是配置下面几个参数:

clientID: `Github Application clientID`,
clientSecret: `Github Application clientSecret`,
repo: `Github 仓库名`,//存储你评论 issue 的 Github 仓库名(建议直接用 GitHub Page 的仓库名)
owner: 'Github 用户名',
admin: ['Github 用户名'], //这个仓库的管理员,可以有多个,用数组表示,一般写自己,
id: 'window.location.pathname', //页面的唯一标识,gitalk 会根据这个标识自动创建的issue的标签,我们使用页面的相对路径作为标识

创建 Github Application

Gitalk 需要一个 Github Application,点击这里申请

填写下面参数:

3.png

点击创建

获取 Client ID 和 Client Secret 填入你的我们 Gitalk 参数中

4.png


6.png


当你参数都设置好,将代码推送到 Github 仓库后,没什么问题的话,当你点击进入你的博客页面后就会出现评论框了。

当你用 github 帐号登录(管理员),并且第一次加载该会比较慢,因为第一次加载会自动在你 repo的仓库下创建对应 issue。


当然,你也可以手动创建issue作为 gitalk评论容器。只要有 Gitalk 标签 和 id 对应标签就可以。比我我自己创建的 About issue 。


尾言


在寻找过程中参考以下几篇文章,感激!

自动初始化 Gitalk 和 Gitment 评论

Gitment评论功能接入踩坑教程

为博客添加 Gitalk 评论插件