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标头附加到该请求并提供代理。这样用户就可以在没有任何服务器端实现的情况下登录前端。