Hexo+gitment

Stella981
• 阅读 733

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

元件

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

点赞
收藏
评论区
推荐文章
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
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Souleigh ✨ Souleigh ✨
3年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Stella981 Stella981
3年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593
Wesley13 Wesley13
3年前
P2P技术揭秘.P2P网络技术原理与典型系统开发
Modular.Java(2009.06)\.Craig.Walls.文字版.pdf:http://www.t00y.com/file/59501950(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.t00y.com%2Ffile%2F59501950)\More.E
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Stella981 Stella981
3年前
Golang注册Eureka的工具包goeureka发布
1.简介提供Go微服务客户端注册到Eureka中心。点击:github地址(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2FSimonWang00%2Fgoeureka),欢迎各位多多star!(已通过测试验证,用于正式生产部署)2.原理
Wesley13 Wesley13
3年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Stella981 Stella981
3年前
Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法
Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法参考文章:(1)Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.codeprj.com%2Fblo