博客添加Gitalk评论

为个人博客或其他网站接入Github的Gitalk评论插件

博客添加Gitalk评论

为个人博客或其他网站接入Github的Gitalk评论插件

前言

在整理个人博客的过程中,想添加一套评论系统,一方面想收集意见来更好的改进,另一方面想提供一个读者与作者或读者与读者之间交流的平台。 在对比线下比较火的几个评论系统,又考虑到自己的博客是基于GitHub,综合考虑最终选择了基于Github Issues的评论系统Gitalk。 其他评论系统,如:

  • LiveRe:中文名称“来必力”,是一家韩国的公司,但本地化做的非常到位。这是我新发现的一个评论系统,支持的登录方式也挺多,但由于时间问题没有仔细的研究,后续有可能会尝试。

  • Disqus:国外比较火的评论系统,但在国内必须完全代理VPN,才可以正常访问。

  • gitment:基于Github issue的评论插件,但很久没有人维护。

  • 畅言:需要ICP备案。

  • 友言、网易云跟帖、多说等等其他家:关停太随意。

正文

关于Gitalk

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。

  • 使用 GitHub 登录
  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
  • 支持个人或组织
  • 无干扰模式(设置 distractionFreeMode 为 true 开启)
  • 快捷键提交评论 (cmd|ctrl + enter)

在线演示

使用

创建一个Github Application

如果没有 点击申请,也可以

Github头像下拉菜单 > Settings > 左边Developer settings下的OAuth Application > Register a new application,填写相关信息:

png

点击创建,获得Client IDClient Secret

png

配置gitalk

将下面这段代码插入到你的网站, 或创建一个gitalk.html直接调用

{{ partial "gitalk.html" . }}

代码如下:


<!-- 评论系统 -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

<!-- 配置gitalk -->
<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的标签',
    //其他参数
    distractionFreeMode: false // 全屏遮罩,jia
  });
  gitalk.render('gitalk-container');
</script>

<div id="gitalk-container"></div>

推送到 Github 仓库

没什么问题的话,当你点击进入你的博客页面后就会出现评论框了。

png

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

png

链接与资源

Github gitalk

相关

Gitalk出现Error:Validation Failed问题的解决办法

Gitalk出现Error: Comments Not Initialized问题的解决办法

Avatar
Tgenkidu Cy
程序员呀哈哈哈

目前专注于 java 开发。

下一页