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

Crq
Crq
管理员
1871
文章
0
粉丝
Linux教程评论65字数 788阅读2分37秒阅读模式

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

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

实现的最终效果如图:

Gitment 基于 Github 的 Issues 实现的评论插件-图片1

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

1、首先 Github 上,注册 OAuth Application

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

Gitment 基于 Github 的 Issues 实现的评论插件-图片2

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

Gitment 基于 Github 的 Issues 实现的评论插件-图片3

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

可能遇到的问题一

Gitment 基于 Github 的 Issues 实现的评论插件-图片4

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

可能遇到的问题二

Gitment 基于 Github 的 Issues 实现的评论插件-图片5

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

Gitment 基于 Github 的 Issues 实现的评论插件-图片6

3、初始化评论

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

Gitment 基于 Github 的 Issues 实现的评论插件-图片7

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

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

Gitment 基于 Github 的 Issues 实现的评论插件-图片8

4、自定义和个性化

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

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

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

weinxin
我的微信
微信号已复制
我的微信
这是我的微信扫一扫
 
Crq
  • 本文由 Crq 发表于2024年10月25日 14:22:15
  • 转载请注明:https://www.cncrq.com/11357.html
【技术快报】9.12-9.18 Linux教程

【技术快报】9.12-9.18

本期《linux就该这么学》的技术周报中,将为您推出Nginx源码安装及调优配置、国内三大云数据库测试对比、12个Linux进程管理命令介绍、怎样在Ubuntu中修改默认程序、在a...
最牛X的GCC 内联汇编 Linux教程

最牛X的GCC 内联汇编

正如大家知道的,在C语言中插入汇编语言,其是Linux中使用的基本汇编程序语法。本文将讲解 GCC 提供的内联汇编特性的用途和用法。对于阅读这篇文章,这里只有两个前提要求,很明显,...
10款优秀Vim插件帮你打造完美IDE Linux教程

10款优秀Vim插件帮你打造完美IDE

如果你稍微写过一点代码,就能知道“集成开发环境”(IDE)是多么的便利。不管是Java、C还是Python,当IDE会帮你检查语法、后台编译,或者自动导入你需要的库时,写代码就变得...
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证