基于GitHub issue的评论系统----Gitalk的初步理解

@CoderMing 2018-08-14 02:02:54发表于 CoderMing/blog 开发工具

这段时间有了个新点子,在github探索时发现了Gitalk这个评论系统。首先发现时当然是高呼“哇,我大github无所不能!”,然后立即clone下来写了个demo,中间踩到了几个坑,demo写完后我看了下network和打断点调试了下,简单地弄明白了运行原理。现在来分享下。

是什么?怎么用?

这儿直接上官方文档gitalk/readme-cn.md at master · gitalk/gitalk · GitHub和demo即可,可以看到几乎是开箱即用:

var gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

很好理解,就是填配置项,然后render一下就ok。更多配置项可以在上面的官方文档中查询。
注意其中有一个clientIDclientSecret,这个是需要在你的Github中注册的。经本人测试Github不会做过多的检验,你甚至可以申请到localhost域名的app key。

运行的原理?

本人以前用过多说及畅言(后面多说一身傲骨不上广告GG了,致敬),大致知道此类评论系统是如何运作的。下面来讲讲我的理解:
首先是在网站的页面上引用评论系统的脚本,脚本会检测当前域名和URL,然后和评论系统服务器沟通获取当前域名的评论并渲染。由于有些网站文章链接易发生变化,一般来讲我们都需要给每篇文章安排一个固定的id,这样的话即使文章地址发生变化,只要id和域名不变即可正确拉取评论。
讲完了运作流程,我对Gitalk进行了简单的探索。
我们查看其API可以看到,必填的几个字段的作用为帮助我们获取issue权限,定位repo。此处就不过多探讨了。而很明显,id字段是进行文章定位的。
首先我尝试着不添加上述的ID字段,然后render出页面,可以想象此处肯定找不到issue:
image

那现在的问题是,如果我不规定key,那Gitalk会创建一个怎样的issue?我发一条issue后,在我的repo里发现是这样:
image

可以看到,如果不指定id,则在github上的issue的标题将会是我的页面titile,然后会自动加一个页面URL的label
这里我们也可以想到,原来id在github上的存储是通过label实现的。
其次我尝试着填一个不知名的label作为我们的id,查看结果:
image

title仍然没变,id自动被加入到label了。
但我在观察API的时候发现,还有一个label属性:

labels {[Array]}
Default: ['Gitalk'].
GitHub issue 的标签。

这个属性和id有什么区别呢?我认为这个属性是为了区分Gitalk和正常创建的issue。也就是说,所有通过Gitalk创建的issue都会被添加labels字段中的label。

总结

  • Gitalk是一款评论系统,和市面上同类产品(多说,畅言)实现的功能差不多。
  • Gitalk会将数据存入Github issues,通过利用labels实现了文章定位。

近期有了个新点子,初步规划会用到Gitalk。过段时间进行实战后我会继续分享我的理解。