您现于de位置乃:亚博 > 其他

亚博 2019-08-14 其他 32

Gitalk

Gitalk 乃1个基于 GitHub Issue 和 Preact 开发de评论插件.

特性

使用 GitHub 登录

支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]

支持个人或组织

无干扰模式(设置 distractionFreeMode 为 true 开启)

快捷键提交评论 (cmd|ctrl + enter)

Readme 于线示例

安装

两种方式

直接引入

<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 安装

npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

使用

添加1个容器:

<div id="gitalk-container"></div>

用下面de 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')

需要 GitHub Application 如果没有 点击这里申请 Authorization callback URL 填写当前使用插件页面de域名.


设置

clientID String

必须. GitHub Application Client ID.

clientSecret String

必须. GitHub Application Client Secret.

repo String

必须. GitHub repository.

owner String

必须. GitHub repository 所有者 可以乃个人或者组织.

admin Array

必须. GitHub repository de所有者和合作者 (对这个 repository 有写权限de用户).

id String

Default: location.href.

页面de唯1标识.长度必须小于50.

number Number

Default: -1.

页面de issue ID 标识 若未定义number属性则会使用id进行定位.

labels Array

Default: ['Gitalk'].

GitHub issue de标签.

title String

Default: document.title.

GitHub issue de标题.

body String

Default: location.href + header.meta[description].

GitHub issue de内容.

language String

Default: navigator.language || navigator.userLanguage.

设置语言 支持 [en, zh-CN, zh-TW].

perPage Number

Default: 10.

每次加载de数据大小 最多 100.

distractionFreeMode Boolean

Default: false.

类似Facebook评论框de全屏遮罩效果.

pagerDirection String

Default: 'last'

评论排序方式 last为按评论创建时间倒叙 first为按创建时间正序.

createIssueManually Boolean

Default: false.

如果当前页面没有相应de isssue 且登录de用户属于 admin 则会自动创建 issue.如果设置为 true 则显示1个初始化页面 创建 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',
  }

评论列表de动画.

enableHotKey Boolean

Default: true.

启用快捷键(cmd|ctrl + enter) 提交评论.

实例方法

render(String/HTMLElement)

初始化渲染并挂载插件.

贡献

Fork 代码仓库 并从 master 创建您de分支

如果您添加de代码需要测试 请添加测试!

如果您修改了 API 请更新文档.

确保单块测试通过 (npm test).

确保代码风格1致 (npm run lint).

提交您de代码 (git commit) 提交信息格式参考

类似项目

gitment

vssue

许可

MIT


相关教程

Gitalk安装教程图解


原文地址:https://github.com/gitalk/gitalk/blob/master/readme-cn.md

上1篇:没有了

下1篇:FileZilla搭建FTP服务器教程图解

评论