Gitalk:一款根据Github Issues开发的评论插件
Gitalk
Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。
我对其进行了二次开发,加入了图片上传的功能,可以 点击此处 查看该仓库。
也就是您浏览的这个网站正在使用的插件,可以将滚动条拖动至底部查看。
特性
- 使用 GitHub 登录
- 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]
- 支持个人或组织
- 无干扰模式(设置 distractionFreeMode 为 true 开启)
- 快捷键提交评论 (cmd|ctrl + enter)
- 支持图片上传 (注:我自己 fork 了原仓库,加入的功能。官方暂无,已提交PR。)
安装
加入了新功能的版本:
访问该 URL,查看右侧发行的最新版本,下载 gitalk.min.js
和 gitalk.css
导入进您的项目中使用即可。
OR
您也可以使用官方版本:
- 直接引入
1 |
|
- npm 安装
1 |
|
1 |
|
使用
首先,您需要选择一个公共github存储库(已存在或创建一个新的github存储库)用于存储评论,
然后需要创建 GitHub Application,如果没有 点击这里申请,Authorization callback URL
填写当前使用插件页面的域名。
最后, 您可以选择如下的其中一种方式应用到页面:
方式1
添加一个容器:
1 |
|
用下面的 Javascript 代码来生成 gitalk 插件:
1 |
|
方式2:在React使用
使用以下代码引入Gitalk组件
1 |
|
按以下方式在React中使用Gitalk组件
1 |
|
设置
clientID
String
必须. GitHub Application Client ID.
clientSecret
String
必须. GitHub Application Client Secret.
repo
String
必须. GitHub repository.
owner
String
必须. GitHub repository 所有者,可以是个人或者组织。
admin
Array
必须. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。
id
String
Default:
location.href
.页面的唯一标识。长度必须小于50。
number
Number
Default:
-1
.页面的 issue ID 标识,若未定义
number
属性则会使用id
进行定位。labels
Array
Default:
['Gitalk']
.GitHub issue 的标签。
title
String
Default:
document.title
.GitHub issue 的标题。
body
String
Default:
location.href + header.meta[description]
.GitHub issue 的内容。
language
String
Default:
navigator.language || navigator.userLanguage
.设置语言,支持 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]。
perPage
Number
Default:
10
.每次加载的数据大小,最多 100。
distractionFreeMode
Boolean
Default: false。
类似Facebook评论框的全屏遮罩效果.
pagerDirection
String
Default: ‘last’
评论排序方式,
last
为按评论创建时间倒叙,first
为按创建时间正序。createIssueManually
Boolean
Default:
false
.如果当前页面没有相应的 isssue 且登录的用户属于 admin,则会自动创建 issue。如果设置为
true
,则显示一个初始化页面,创建 issue 需要点击init
按钮。proxy
String
Default:
https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
.GitHub oauth 请求到反向代理,为了支持 CORS。 为什么要这样?
flipMoveOptions
Object
Default:
1
2
3
4
5
6{
staggerDelayBy: 150,
appearAnimation: 'accordionVertical',
enterAnimation: 'accordionVertical',
leaveAnimation: 'accordionVertical',
}评论列表的动画。 参考
enableHotKey
Boolean
Default:
true
.启用快捷键(cmd|ctrl + enter) 提交评论.
注: 官方版本暂无 upload
参数
upload
Object
Default:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20{
enable: false, // 默认关闭上传功能
url: '', // 上传的URL
method: 'POST', // 请求方式
name: 'file', // 上传表单对应的名称
headers: { // 请求头
'Content-Type': 'multipart/form-data'
},
responseType: 'json', // 响应格式
timeout: 10000, // 超时时间,单位毫秒
multiple: false, // 文件上传是否可以多选
accept: 'image/*', // 可接受文件的类型
fileMaxSize: 1024 * 1024 * 10, // 文件限制大小
successCode: 0, // 上传成功码
successCodeKey: ['code'], // 上传成功对应的字段,数组表示取返回内容(res)=> res.code
errorMsgKey: ['msg'], // 上传失败对应的字段 (res)=> res.msg
errorMsg: '', // 默认错误信息,不填写则展示“上传失败”
successUrlKey: ['data','url'], //上传成功对应的图片URL。例如 res.data.url
proxy: '', // 代理地址(便于跨域),可填写 https://cors-anywhere.azm.workers.dev/ , 真实请求地址为 https://cors-anywhere.azm.workers.dev/APIURL (其中APIURL指的上面填写的url)
}
实例方法
render(String/HTMLElement)
初始化渲染并挂载插件。
TypeScript
已经包括了配置项和Gitalk类的类型定义,不包括React组件的类型定义。
许可
MIT LICENSE