Gitalk

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论组件。

特性

• 使用 Github 登录

• 支持多语言 [en, zh-CN, zh-TW]

• 支持个人或组织项目

• 无干扰模式（设置 distractionFreeMode 为 true 开启）

• 快捷键提交评论 （cmd|ctrl + enter）

• 支持评论排序（基于Github V4 GraphQL API）

安装

两种方式

• 直接引入

  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"> <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

• 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)

  初始化渲染并挂载插件。

贡献

1. 创建一个 issue 描述你的想法

2. Fork it

3. 创建你的分支 (git checkout -b my-new-branch)

4. 提交修改 (git commit) 提交信息格式参考

5. 推送你的分支 (git push origin my-new-branch)

6. 发起一个新的 Pull Request

类似项目

• gitment

本文分享自微信公众号 - 凹凸实验室（AOTULabs）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。