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 '你的客户秘密'
  },
  // ... 
  //有关更多可用选项,请查看以下文档
})

gitmentrender' 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([元素])

元件

输入:HTMLElementstring

要呈现注释的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

跳转到评论的目标页面。请注意,page1Promise加载注释时返回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有五个渲染功能:renderrenderHeaderrenderCommentsrenderEditorrenderFooter最后四个渲染独立的组件和render函数将它们组合在一起。所有这些都可以独立使用。

您可以覆盖上面的任何渲染函数或编写自己的渲染函数。

例如,您可以覆盖render函数以将编辑器放在注释列表之前,并呈现新组件。

const  myTheme  = {
   renderstateinstance){
     const  container  =  documentcreateElement' div '容器lang  =   en-US 
    容器className  =  ' gitment-container gitment-root-container '
    
     //您的自定义组件
    容器的appendChild实例 renderSomething(状态,实例))
    
    容器的appendChild实例renderHeader(状态,实例))
     容器的appendChild实例的renderEditor(状态,实例))
     容器的appendChild实例renderComments(状态,实例))
     容器使用appendChild实例renderFooter(州,实例))
     返回容器
  },
  renderSomethingstateinstance){
     const  container  =  documentcreateElement' 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指示用户是否正在登录。
    • 来自小姐:boolGitment将缓存用户的信息。其值指示当前用户信息是否来自缓存。
  • 错误:Error Object如果没有错误,则为null。
  • meta : objectGitHub Issues API返回问题的信息
  • 评论:arrayGitHub Issue Comments API返回的注释数组undefined注释未加载时。
  • 反应:arrayGitHub 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标头附加到该请求并提供代理。这样用户就可以在没有任何服务器端实现的情况下登录前端。

posted on 2018-08-24 15:26  xmilt  阅读(794)  评论(0编辑  收藏

导航

统计