Gitment是一个基于GitHub问题的评论系统,可以在没有任何服务器端实现的前端使用。
特征
- GitHub登录
- Markdown / GFM支持
- 语法突出显示
- 来自GitHub的通知
- 易于定制
- 没有服务器端实现
入门
1.安装
< link rel = “ stylesheet ” href = “ https://imsun.github.io/gitment/style/default.css ” >
< script src = “ https://imsun.github.io/gitment/dist/gitment.browser.js ” > < / script >
或通过npm:
$ npm i - 保存gitment
从' gitment '导入' gitment / style / default.css '
导入 Gitment
2.注册OAuth应用程序
单击此处注册OAuth应用程序,您将获得客户端ID和客户端密钥。
确保回调网址正确。通常它是您网站的起源,例如https://imsun.net。
3.渲染Gitment
const gitment = new Gitment({ id : '您的页面ID ',//可选 所有者: '您的GitHub ID ', repo : '存储评论的回购', oauth : { client_id : '您的客户ID ', client_secret : '你的客户秘密', }, // ... //有关更多可用选项,请查看以下文档 }) gitment。render(' comments ') //或 // gitment.render(document.getElementById('comments')) //或 // document.body.appendChild(gitment.render())
4.初始化您的评论
页面发布后,您应该访问您的页面,使用您的GitHub帐户登录(确保您是repo的所有者),然后单击初始化按钮,在您的仓库中创建相关问题。在那之后,其他人可以留下他们的评论。
方法
构造器(选项)
选项:
类型: object
- 所有者:您的GitHub ID。需要。
- repo:存储您的评论的存储库。确保你是回购的所有者。需要。
- oauth:对象包含您的客户端ID和客户端密钥。需要。
- client_id:GitHub客户端ID。需要。
- client_secret:GitHub客户端密钥。需要。
- id:用于标识页面的可选字符串。默认
location.href
。 - title:页面的可选标题,用作问题标题。默认
document.title
。 - link:您页面的可选链接,用于问题正文。默认
location.href
。 - desc:页面的可选描述,用于问题的正文。默认
''
。 - labels:创建问题时要添加的可选标签数组。默认
[]
。 - theme:可选的Gitment主题对象。默认
gitment.defaultTheme
。 - perPage:注释将被分页的可选数字。默认
20
。 - maxCommentHeight:一个可选数字,用于限制注释的最大高度,注释将被折叠。默认
250
。
gitment.render([元素])
元件
输入:HTMLElement
或string
要呈现注释的DOM元素。可以是HTML元素或元素的id。省略时,此函数将创建一个新div
元素。
此函数返回要呈现注释的元素。
gitment.renderHeader([元素])
同样的gitment.render([element])
。但只渲染标题。
gitment.renderComments([元素])
同样的gitment.render([element])
。但只呈现评论列表。
gitment.renderEditor([元素])
同样的gitment.render([element])
。但只能渲染编辑器。
gitment.renderFooter([元素])
同样的gitment.render([element])
。但只会呈现页脚。
gitment.init()
初始化新页面。Promise
初始化时返回a 并解析。
gitment.update()
更新数据和视图。返回a Promise
并在数据更新时解析。
gitment.post()
在编辑器中发表评论。Promise
发布时返回a 并解析。
gitment.markdown(文本)
文本
类型: string
返回Promise
并解析呈现的文本。
gitment.login()
跳转到GitHub OAuth页面进行登录。
gitment.logout()
注销当前用户。
转到页面)
页
类型: number
跳转到评论的目标页面。请注意,page
从1
。Promise
加载注释时返回a 并解析。
gitment.like()
喜欢当前页面。返回a Promise
并在喜欢时解析。
gitment.unlike()
与当前页面不同。Promise
不受欢迎时返回a 并解析。
gitment.likeAComment(commentId)
commentId
类型: string
喜欢评论。返回a Promise
并在喜欢时解析。
gitment.unlikeAComment(commentId)
commentId
类型: string
与评论不同。Promise
不受欢迎时返回a 并解析。
定制
Gitment很容易定制。您可以使用自己的CSS或编写主题。(区别在于自定义CSS无法修改DOM结构)
使用自定义CSS
Gitment不使用任何原子CSS,使定制更容易,更灵活。您可以在浏览器中检查DOM结构并编写自己的样式。
写一个主题
Gitment主题是一个包含多个渲染函数的对象。
默认情况下,Gitment有五个渲染功能:render
,renderHeader
,renderComments
,renderEditor
,renderFooter
。最后四个渲染独立的组件和render
函数将它们组合在一起。所有这些都可以独立使用。
您可以覆盖上面的任何渲染函数或编写自己的渲染函数。
例如,您可以覆盖render
函数以将编辑器放在注释列表之前,并呈现新组件。
const myTheme = {
render(state,instance){ const container = document。createElement(' div ') 容器。lang = “ en-US ” 容器。className = ' gitment-container gitment-root-container ' //您的自定义组件 容器。的appendChild(实例。 renderSomething(状态,实例)) 容器。的appendChild(实例。renderHeader(状态,实例)) 容器。的appendChild(实例。的renderEditor(状态,实例)) 容器。的appendChild(实例。renderComments(状态,实例)) 容器。使用appendChild(实例。renderFooter(州,实例)) 返回容器 }, renderSomething(state,instance){ const container = document。createElement(' div ') 容器。郎 = “的en-US ” 如果(状态。用户。登录){ 容器。innerText = ` Hello,$ { state。用户。登录} ` } 返回容器 } } const gitment = new Gitment({ // ... 主题: myTheme, }) gitment。渲染(文件。体) //或 // gitment.renderSomthing(document.body的)
每个渲染函数都应该接收一个状态对象和一个gitment实例,并返回一个HTML元素。它将被包装附加到具有相同名称的Gitment实例。
Gitment使用MobX来检测渲染函数中使用的状态。一旦使用状态改变,Gitment将调用render函数来获取一个新元素并进行渲染。未使用状态的更改不会影响渲染元素。
可用状态:
- 用户:
object
。用户信息从GitHub Users API返回,另外还有两个键。- isLoggingIn :
bool
. 指示用户是否正在登录。 - 来自小姐:
bool
。Gitment将缓存用户的信息。其值指示当前用户信息是否来自缓存。
- isLoggingIn :
- 错误:
Error Object
。如果没有错误,则为null。 - meta :
object
. 从GitHub Issues API返回问题的信息。 - 评论:
array
。从GitHub Issue Comments API返回的注释数组。将undefined
注释未加载时。 - 反应:
array
。从GitHub Issues'Reactions API返回的添加到当前页面的一系列反应。 - commentReactions :
object
. 添加到注释的反应对象,注释ID为关键,从GitHub Issue Comments'Reactions API返回。 - currentPage :
number
. 用户在哪个评论页面。从...开始1
。
关于安全
让我的客户秘密公开是否安全?
OAuth需要客户端密码,否则用户无法使用其GitHub帐户登录或评论。虽然GitHub不建议在前端硬编码客户端密码,但你仍然可以这样做,因为GitHub会验证你的回调URL。从理论上讲,除了你的网站,没有其他人可以使用你的秘密。
如果您找到了破解它的方法,请打开一个问题。
为什么Gitment向gh-oauth.imsun.net发送请求?
https://gh-oauth.imsun.net是一个简单的开源服务,用于在用户登录期间代理一个请求。因为GitHub没有附加CORS头。
此服务不会记录或存储任何内容。它只将CORS标头附加到该请求并提供代理。这样用户就可以在没有任何服务器端实现的情况下登录前端。