数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

Gitment - 一款基于Github的Issues实现的评论插件

最近发现了一个有意思的评论插件Gitment, 从实现和效果上都不错,给大家介绍一下。如果你有个人博客,可以考虑使用;如果你没有个人博客,也可以了解下实现的思路,开开脑洞。

之前普遍使用的多说评论关闭了,相信很多人的博客都受到了影响。我个人的博客评论也因此换过Discuz, 网易评论插件,畅言评论插件,都不甚理想。这次看到Gitment还是有些惊喜。

实现的最终效果如图:

基本原理是利用Github项目上的Issues功能来实现内容的存储,使用github的账号登录体系。和自己的博客集成起来也比较简单,一个css文件,一个js文件,一段初始化代码就可以了。

1、首先Github上,注册 OAuth Application

可以通过这个地址来注册一个应用,按提示填写即可。

成功之后会得到一个client ID 和一个 client secret,在后面的初始化插件时会用到。

2、页面集成Gitment

加载对应的css文件、js文件、初始化代码到要显示的页面

<div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
    var gitment = new Gitment({
        id: '页面 ID', // 可选。默认为 location.href
        owner: '你的 GitHub ID',
        repo: '存储评论的 repo',
        oauth: {
            client_id: '你的 client ID',
            client_secret: '你的 client secret',
        },
     })
    gitment.render('container’); //container为你要显示评论的id
</script>

关于初始化部分的参数更多说明,可参看

https://github.com/imsun/gitment#options

2.2 可能遇到的问题一


如果你遇到这样的报错,说明你的gitment.render('container’); //container为你要显示评论的id 里的id在页面上没有对应上,请仔细检查。

2.3 可能遇到的问题二

如果遇到这样的问题,很可能是你初始化的repo地址没有写对,repo一定要写成对应的id,而不是http的地址,图中的id是我自己Github上的一个项目,也就是要存储评论内容的项目,如图:

3、初始化评论

集成成功后你就可以看见显示的评论插件内容了。这时候还需要一步就是登陆自己的gihub账号,点击图中的Initilize Comments

注意:每一篇文章都需要初始化

最后你可以在Isuues部分看到的评论存储为:

4、自定义和个性化

你也可以自定义样式和布局,更多说明请参考:https://github.com/imsun/gitment#customize

最后总结一下,这款Gitment的优点是集成简单,自定义比较方便,自带github账号登录;缺点就是仅支持github账号登录,每次发布的新文章要点击按钮来初始化,略麻烦;目前手机端适配还并不理想。如果你对评论插件的要求不是那么严格,可以考虑使用这款插件。

github项目源码:https://github.com/imsun/gitment

原文来自:凯凯刘

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
Gitment - 一款基于Github的Issues实现的评论插件
发布:2017-11-01 11:28:24

最近发现了一个有意思的评论插件Gitment, 从实现和效果上都不错,给大家介绍一下。如果你有个人博客,可以考虑使用;如果你没有个人博客,也可以了解下实现的思路,开开脑洞。

之前普遍使用的多说评论关闭了,相信很多人的博客都受到了影响。我个人的博客评论也因此换过Discuz, 网易评论插件,畅言评论插件,都不甚理想。这次看到Gitment还是有些惊喜。

实现的最终效果如图:

基本原理是利用Github项目上的Issues功能来实现内容的存储,使用github的账号登录体系。和自己的博客集成起来也比较简单,一个css文件,一个js文件,一段初始化代码就可以了。

1、首先Github上,注册 OAuth Application

可以通过这个地址来注册一个应用,按提示填写即可。

成功之后会得到一个client ID 和一个 client secret,在后面的初始化插件时会用到。

2、页面集成Gitment

加载对应的css文件、js文件、初始化代码到要显示的页面

<div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
    var gitment = new Gitment({
        id: '页面 ID', // 可选。默认为 location.href
        owner: '你的 GitHub ID',
        repo: '存储评论的 repo',
        oauth: {
            client_id: '你的 client ID',
            client_secret: '你的 client secret',
        },
     })
    gitment.render('container’); //container为你要显示评论的id
</script>

关于初始化部分的参数更多说明,可参看

https://github.com/imsun/gitment#options

2.2 可能遇到的问题一


如果你遇到这样的报错,说明你的gitment.render('container’); //container为你要显示评论的id 里的id在页面上没有对应上,请仔细检查。

2.3 可能遇到的问题二

如果遇到这样的问题,很可能是你初始化的repo地址没有写对,repo一定要写成对应的id,而不是http的地址,图中的id是我自己Github上的一个项目,也就是要存储评论内容的项目,如图:

3、初始化评论

集成成功后你就可以看见显示的评论插件内容了。这时候还需要一步就是登陆自己的gihub账号,点击图中的Initilize Comments

注意:每一篇文章都需要初始化

最后你可以在Isuues部分看到的评论存储为:

4、自定义和个性化

你也可以自定义样式和布局,更多说明请参考:https://github.com/imsun/gitment#customize

最后总结一下,这款Gitment的优点是集成简单,自定义比较方便,自带github账号登录;缺点就是仅支持github账号登录,每次发布的新文章要点击按钮来初始化,略麻烦;目前手机端适配还并不理想。如果你对评论插件的要求不是那么严格,可以考虑使用这款插件。

github项目源码:https://github.com/imsun/gitment

原文来自:凯凯刘

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future