为博客添加 Gitalk 评论插件结语

前言

由于 Disqus 对于国内网路的支持十分糟糕,很多人反映 Disqus 评论插件一直加载不出来。而我一直是处于翻墙状态的~(话说你们做程序员的都不翻墙用Google的吗?,哈哈,吐嘈下)

针对这个问题,我添加了Gitalk 评论插件。在此,非常感谢 @FeDemo 的推荐 。

正文

Gitalk 评论插件

首先来看看 Gitalk 的界面和功能:

Gitalk

gitalk 使用 Github 帐号登录,界面干净整洁,最喜欢的一点是支持 MarkDown语法

原理

Gitalk 是一个利用 Github API,基于 Github issue 和 Preact 开发的评论插件,在 Gitalk 之前还有一个 gitment 插件也是基于这个原理开发的,不过 gitment 已经很久没人维护了。

可以看到在 gitalk 的评论框进行评论时,其实就是在对应的 issue 上提问题。

gitalk评论框

Github issue

集成 Gitalk

到这里,你应该对 Gitalk 有个大致的了解了,现在,开始集成 gitalk 插件吧。

将这段代码插入到你的网站:

<!-- Gitalk 评论 start  -->
{% if site.gitalk.enable %}
<!-- Link Gitalk 的支持文件  -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>

<div id="gitalk-container"></div>
    <script type="text/javascript">
    var gitalk = new Gitalk({

    // gitalk的主要参数
        clientID: `Github Application clientID`,
        clientSecret: `Github Application clientSecret`,
        repo: `存储你评论 issue 的 Github 仓库名`,
        owner: 'Github 用户名',
        admin: ['Github 用户名'],
        id: '页面的唯一标识,gitalk会根据这个标识自动创建的issue的标签',
    
    });
    gitalk.render('gitalk-container');
</script>
{% endif %}
<!-- Gitalk end -->

我们需要关心的就是配置下面几个参数:

clientID: `Github Application clientID`,
clientSecret: `Github Application clientSecret`,
repo: `Github 仓库名`,//存储你评论 issue 的 Github 仓库名(建议直接用 GitHub Page 的仓库名)
owner: 'Github 用户名',
admin: ['Github 用户名'], //这个仓库的管理员,可以有多个,用数组表示,一般写自己,
id: 'window.location.pathname', //页面的唯一标识,gitalk 会根据这个标识自动创建的issue的标签,我们使用页面的相对路径作为标识

当然,还有其他很多参数,有兴趣的话可以 点这里

比如我就增加了这个全屏遮罩的参数。

distractionFreeMode: true,

创建 Github Application

Gitalk 需要一个 Github Application点击这里申请

填写下面参数:

创建 Application

点击创建

获取 Client IDClient Secret 填入你的我们 Gitalk 参数中

获取 Client ID`和 Client Secret[图片上传中...(屏幕快照 2017-12-19 下午5.52.41.png-9695fd-1513678968632-0)]

当你参数都设置好,将代码推送到 Github 仓库后,没什么问题的话,当你点击进入你的博客页面后就会出现评论框了。

当你用 github 帐号登录(管理员),并且第一次加载该会比较慢,因为第一次加载会自动在你 repo 的仓库下创建对应 issue。

比如说这样:

当然,你也可以手动创建issue作为 gitalk评论容器。只要有 Gitalk 标签 和 id 对应标签就可以。比我我自己创建的 About issue

结语

最后说几句吐嘈几句, Gitalk 需要你点开每篇文章的页面才会创建对应的 issue,对我来说真是个糟糕的体验(文章有点多~)。

当然,也有解决办法,这篇 自动初始化 Gitalk 和 Gitment 评论,就解决了这个问题。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WeaponZhi

不求服务端,自己改接口!Charles抓包工具的应用

这篇文章主要是介绍 Charles 在开发阶段的使用方式,突出实用性,至于Charles 的介绍和配置,不是我们本文的重点,还没配置的同学可以参考这篇博文,很详...

32110
来自专栏熊二哥

Linux快速入门04-扩展知识

这部分是快速学习的最后一部分知识,其中最重要的内容就是源码的打包和软件的安装的学习,由于个人的Linux学习目的就是自己能在阿里云Ubuntu上搭建一个简单的n...

2565
来自专栏python3

thinkphp3关闭日志

852
来自专栏大数据实战演练

Linux NTP时钟同步

时钟同步在大数据方向,用到的地方很多。举个例子来说吧,像Zookeeper、RegionServer服务都是需要实时和各节点进行通信的。假如各节点差超过30s,...

3952
来自专栏北京马哥教育

如何用几个简单的命令改善你的Linux安全

作者:lrq110120 来源:http://richylu.blog.51cto.com/1481674/1915484 本文中,我们将讨论如何通过一些Lin...

3789
来自专栏建站达人秀

如何搭建 Firekylin 博客

FireKylin 是基于国内先进的 Node.js 框架 ThinkJS 2.0 开发的通用博客系统,是由奇虎360公司Web前端工程师组成的专业团队 75T...

3112
来自专栏猿天地

hbuilder 开发5+ APP采坑记录

开发一款APP产品需要在安卓和苹果2大平台发布,同时开发团队也需要有安卓和IOS。 HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、C...

6679
来自专栏EAWorld

8种至关重要OAuth API授权流与能力

在本文中,Curity的Daniel Lindau概述了重要的OAuth授权流程和能力。

711
来自专栏何俊林

移动App 网络优化细节探讨

2896
来自专栏皮振伟的专栏

[linux][storage]Linux存储栈

前言: 随着Linux的版本升高,存储栈的复杂度也随着增加。作者在这里简单介绍目前Linux存储栈。 分析: 1,storage stack ? 在用户态,可...

1.1K13

扫码关注云+社区

领取腾讯云代金券