Gitalk is a modern comment component based on Github Issue and Preact.
MIT License
Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。
两种方式
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<!-- or -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
首先,您需要选择一个公共github存储库(已存在或创建一个新的github存储库)用于存储评论,
然后需要创建 GitHub Application,如果没有 点击这里申请,Authorization callback URL
填写当前使用插件页面的域名。
最后, 您可以选择如下的其中一种方式应用到页面:
添加一个容器:
<div id="gitalk-container"></div>
用下面的 Javascript 代码来生成 gitalk 插件:
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')
使用以下代码引入Gitalk组件
import GitalkComponent from "gitalk/dist/gitalk-component";
按以下方式在React中使用Gitalk组件
<GitalkComponent options={{
clientID: "...",
// ...
// 设置项
}} />
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
进行定位。
提示:可以使用正则从 URL
中提取其中一部份作为 id
。例如:location.href.match('/(?<=posts/)(.*)(?=/)/')[1]
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:
{
staggerDelayBy: 150,
appearAnimation: 'accordionVertical',
enterAnimation: 'accordionVertical',
leaveAnimation: 'accordionVertical',
}
评论列表的动画。 参考
enableHotKey Boolean
Default: true
.
启用快捷键(cmd|ctrl + enter) 提交评论.
render(String/HTMLElement)
初始化渲染并挂载插件。
已经包括了配置项和Gitalk类的类型定义,不包括React组件的类型定义。
MIT