Hexo+gitment

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将缓存用户的信息。其值指示当前用户信息是否来自缓存。
• 错误：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标头附加到该请求并提供代理。这样用户就可以在没有任何服务器端实现的情况下登录前端。