前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >为博客添加 Gitalk 评论插件

为博客添加 Gitalk 评论插件

作者头像
零式的天空
发布2022-03-27 14:46:23
5630
发布2022-03-27 14:46:23
举报
文章被收录于专栏:零域Blog

前言

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

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

正文

Gitalk 评论插件

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

原理

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

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

集成 Gitalk

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

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

代码语言:javascript
复制
<!-- 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 -->

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

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

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

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

代码语言:javascript
复制
distractionFreeMode: true,

创建 Github Application

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

填写参数

点击创建

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

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

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

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

结语

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-12-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 正文
    • Gitalk 评论插件
      • 原理
        • 集成 Gitalk
          • 创建 Github Application
          • 结语
          相关产品与服务
          容器服务
          腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档