公众号「后端进阶」 每一步成长都想与你分享

使用Gitalk搭建博客评论模块

2017-11-28
zch

昨晚突然萌生出将自己的博客加个评论模块,我突然想到我这个博客的源码有一个评论模块,在修改源码的时候被我注释了,那个评论模块叫 disqus ,但是需要翻墙才能用,而且加载太慢了,所以继续寻找第三方评论插件,于是就搜到了Gitalk。在搭建过程中发现很多细节没注意到,导致花了很多时间才弄好。

创建 blog-comments 仓库

这个仓库主要用于存储评论,因为 Gitalk 是基于 lssue 和 Preact 开发的评论插件,因此最好每篇文章对应一个 Issue。

blog-comments

创建 OAuth Application

oauth

这里特别需要注意的地方就是回调地址,一定要填写博客地址,否则用户登录的时候就会就不会提示绑定那个按钮了。

创建完成后就会生成 Client ID 和 Client Secret,这两个id需要到时候配置时写出来。

client id

配置_config.yml

在 _config.yml 中加入一下配置:

gitalk: 
  enable: true #用来做启用判断可以不用
  clientID: 'your clientID' #OAuth Application
  clientSecret: 'your clientSecret' #OAuth Application
  repo: blog-comments #刚创建用于gitalk Issue的仓库名称
  owner: objcoding  #github用户名
  admin: objcoding  #github用户名
  distractionFreeMode: true # 类似于Facebook的阴影效果
  labels: ['Gitalk']  # 用于生成Issue的标签
  id:  # 页面唯一标示

这里特别说明一下 labels 和 id,因为这两个字段,可误了我好多时间啊,这两个字段是生成 issue 时添加标签用的,其中 labels 默认使用 Gitalk,所有文章都是这个字段,而 id 就需要为每篇文章都配置一个唯一的标识了,这里使用 page.url 作 id。生成的 issue 如下图所示:

issue

comments.html

comments.html

render(String/HTMLElement),初始化渲染并挂载插件。

引入comments.html

点击进入Gitalk开源项目:Gitalk


微信公众号「Java科代表」

Content