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

时间: 2018-01-09阅读: 710标签: github

最近发现了一个有意思的评论插件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账号登录,每次发布的新文章要点击按钮来初始化,略麻烦;目前手机端适配还并不理想。如果你对评论插件的要求不是那么严格,可以考虑使用这款插件。

文章来源:http://liujinkai.com/2017/10/24/gitment-pinglun-chajian/
github项目源码:https://github.com/imsun/gitment

拒绝重复造轮子!GitHub推出新功能repository templates

GitHub 新功能 repository templates 帮助开发者在所有项目中重用代码。在不同代码库中共享样板代码(boilerplate code)是软件开发的惯例。使用喜欢的工具和目录结构开启新项目,能够帮助程序员更加高效地完成从想法到程序的转变

GitHub上传文件不能超过100M的解决办法

上传项目到GitHub上,当某个文件大小超过100M时,就会上传失败,因为默认的限制了上传文件大小不能超过100M。如果需要上传超过100M的文件,就需要我们自己去修改配置。

前大疆程序员离职后,把代码上传 GitHub,令公司损失百万

该员工之前在大疆的子公司担任软件工程师,公司对他很器重,负责编写农业无人机的管理平台和农机喷洒系统代码。他在Github 开设账号,并建立了公有仓库,把代码上传至了 GitHub 公有仓库。

Github上写Blog

预备知识:必须:Git,GitHub,Jekyll,Markdown,YAML,操作:注册一个GitHub的账号,可以使用GitHub Desktop或者GitHub网站;创建一个空的项目,在项目里面创建index.md,或者index.html,提交后,博客首页就建好了。

GitHub发布史上最大更新,年度报告出炉!

在昨天的 GitHub Universe 开发者大会上,GitHub 发布了史上最大更新:可直接运行部分代码的 GitHub Actions,以及宣布了 2018 年的 GitHub 年度报告,包括最热门的开源项目和编程语言,让我们一起来先睹为快!

官宣:Github 正式加入微软

GitHub是科技业界最流行的代码托管平台,微软于2018-6月宣布收购 GitHub,微软不会通过市场力量来破坏 GitHub 的开放性,在2018-10月Github 正式宣布加入了微软大家庭

GitHub 多账户设置

由于不同的 GitHub 不能使用同一个 SSH 公钥,所以要生成两个不同的 SSH 分别对应两个主账户和副账户。编辑 ~/.ssh/config SSH 配置文件,没有该文件则新建。然后,以后使用 main 账户添加远程仓库需要这样添加,部署相应的 SSH 公钥到 GitHub 后,尝试在相应的本地仓库 git push 几个文件测试。

远程协作尝试,Github远程协作

远程协作是一个听起来很酷的词,就像谈恋爱一样,听起来总是觉得它和浪漫一词相关。远程协作好处可以想象:节省办公室租金,工作环境自由/高效/免打扰,节省路途时间,更有可能招到更好的人才....

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全