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

官方Demo:demo
官方文档:点击查看

Gitalk 的特性:

1、使用 GitHub 登录
2、支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
3、支持个人或组织
4、无干扰模式(设置 distractionFreeMode 为 true 开启)
5、快捷键提交评论 (cmd|ctrl + enter)

使用Gitalk需要你做一些提前准备:
1、在github上创建一个仓库,Gitalk会把评论放在这个仓库的issues里面。
2、在github上申请一个GitHub OAuth application,来让Gitalk有权限操作github上的仓库。

申请一个OAuth application

GitHub OAuth application允许程序来操作你的github账户,可以对github中仓库读写。
详情介绍:https://developer.github.com/apps/about-apps/#about-oauth-apps

申请GitHub OAuth application流程:

  1. 打开github网站登陆后,点击右上角的用户图标,选择Settings
  2. 在Settings页面选择Developer settings选项。
  3. 在Developer settings选择OAuth Apps,然后会在页面右边有一个New OAuth App按钮,点击这个按钮就进入到新建OAuth application页面
  4. 也可以直接代开这个链接:https://github.com/settings/applications/new 进入新建页面

在注册OAuth应用页面有如下几个参数需要填写:

  1. Application name:必填,OAuth的名字
  2. Homepage URL:必填,博客的主页地址
  3. Application description:选填,该OAuth的说明
  4. Authorization callback URL:必填,授权成功后回调网址,跟Homepage URL参数保持一致就好

创建OAuth应用成功后会生成Client ID和Client Secret,这两个参数用于gitalk后续配置。

安装使用

  1. 引入 css 和 js 文件
<link rel="stylesheet" href="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css">
<script src="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>

建议直接把文件下载后放在项目目录中,这样就可以不再依赖第三方网络了。

  1. 需要在html文件中添加一个容器,Gitalk组件会在此处显示
<div id="gitalk-container"></div>
  1. 使用下面的JavaScript代码来生成Gitalk评论:
var gitalk = new Gitalk({
  clientID: 'theme.gitalk.clientID', // GitHub Application Client ID
  clientSecret: 'theme.gitalk.clientSecret', // GitHub Application Client Secret
  repo: 'theme.gitalk.repo'      // 存放评论的仓库
  owner: 'theme.gitalk.owner',          // 仓库的创建者,
  admin: ['theme.gitalk.admin'],        // 如果仓库有多个人可以操作,那么在这里以数组形式写出
  id: 'unique-identity',      // 用于标记评论是哪个页面的,确保唯一,并且长度小于50, 建议使用 使用 md5(文章路径) 值作为 id
})

gitalk.render('gitalk-container');    // 渲染Gitalk评论组件
  1. 配置主题的 _config.yaml 文件
gitalk:
  enable: true #用来做启用判断可以不用
  owner: seamounts # github 的用户名
  repo: blog # 博客的仓库名,比如的我的仓库名为 blog
  admin: 
    - seamounts # 保持和 owner 一样就可以
  clientID: 'xxxxxxxxxxxx' # 创建OAuth application 生成的 clientID
  clientSecret: 'xxxxxxxxxxxxx' # 创建OAuth application 生成的 clientSecret

配置好后,效果图如下:

配置过程中的问题记录

Error: Not Found
当时出现这个问题的原因是以为 gitalk repo 配置错了,导致无法访问仓库的issue。最后将gitalk repo配置成博客的仓库名解决

Error: Validation Failed
评论创建 issue 时会使用 gitalk id 值来创建 lable,当 id 值不符合 label 的命名规则时,会报这个错误。建议使用文章路径取md5值配置 gitalk id,避免github issue lables 50 字符限制

未找到相关的Issues进行评论,请联系XXX进行创建
这个需要打开博客仓库的 issue 评论