Gitalk

Stella981
• 阅读 652

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)

    初始化渲染并挂载插件。

贡献

  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源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这