Gitalk 是一个基于 Github Issue 和 Preact 开发的评论组件。
特性
使用 Github 登录
支持多语言 [en, zh-CN, zh-TW]
支持个人或组织项目
无干扰模式(设置 distractionFreeMode 为 true 开启)
快捷键提交评论 (cmd|ctrl + enter)
支持评论排序(基于Github V4 GraphQL API)
安装
两种方式
直接引入
npm 安装
npm i --save gitalk
import 'gitalk/dist/gitalk.css'import Gitalk from 'gitalk'
使用
需要 Github Application,如果没有 点击这里申请,Authorization callback URL
填写当前使用插件页面的域名。
var gitalk = new Gitalk({ clientID: 'Github Application Client ID', clientSecret: 'Github Application Client Secret', repo: 'Github repo', owner: 'Github repo owner', admin: ['Github repo collaborators'],})gitalk.render('gitalk-container')
设置
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
.页面的唯一标识。
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]。
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.herokuapp.com/https://github.com/login/oauth/access_token
.Github oauth 请求到反向代理,为了支持 CORS。 为什么要这样?
flipMoveOptions
Object
Default:
{ staggerDelayBy: 150, appearAnimation: 'accordionVertical', enterAnimation: 'accordionVertical', leaveAnimation: 'accordionVertical',}
评论列表的动画。 参考
enableHotKey
Boolean
Default:
true
.启用快捷键(cmd|ctrl + enter) 提交评论.
实例方法
render(String/HTMLElement)
初始化渲染并挂载插件。
贡献
创建一个 issue 描述你的想法
Fork it
创建你的分支 (git checkout -b my-new-branch)
提交修改 (git commit) 提交信息格式参考
推送你的分支 (git push origin my-new-branch)
发起一个新的 Pull Request
类似项目
- gitment
本文分享自微信公众号 - 凹凸实验室(AOTULabs)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。