Skip to content

Latest commit

 

History

History
192 lines (117 loc) · 4.88 KB

readme-cn.md

File metadata and controls

192 lines (117 loc) · 4.88 KB
Raw

Gitalk

NPM david-dm travis coveralls gzip

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

特性

  • 使用 Github 登录
  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr]
  • 支持个人或组织
  • 无干扰模式（设置 distractionFreeMode 为 true 开启）
  • 快捷键提交评论 （cmd|ctrl + enter）

Readme 在线示例

安装

两种方式

  • 直接引入
  <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. Fork 代码仓库 并从 master 创建你的分支
  2. 如果你添加的代码需要测试，请添加测试！
  3. 如果你修改了 API，请更新文档。
  4. 确保单元测试通过 (npm test).
  5. 确保代码风格一致 (npm run lint).
  6. 提交你的代码 (git commit) 提交信息格式参考

类似项目

许可

MIT