为Jekyll添加Gitalk评论插件

September 22, 2022

技术

什么是Gitalk
- 特性
使用

什么是Gitalk

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

特性

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

Readme 在线示例

使用

准备

OAuth App

申请OAuth App,获取Client ID和Client secrets→教程.

仓库

Gitalk基于Github的issue功能,需新建一个Github仓库用于存放issue,或者也可以直接使用你用于托管Jekyll博客的Github仓库.

引入

编辑\_layouts\post.html,在需要显示评论的地方引入.

<!-- \_layouts\post.html -->

<!-- Gitalk评论框 start -->
<!-- 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: 'ClientID',
  clientSecret: 'ClientSecret',
  repo: '用于储存评论的Github仓库地址',
  owner: 'Github账户名',
  admin: ['Github账户名'],
  id:window.location.pathname,
  });
  gitalk.render('gitalk-container');
  </script>
<!-- Gitalk end -->

初始化

按理来说一切都搞定了,我的心灵获得了暂时的平静.

吗?

Gitalk出现如下提示.

未找到相关的 Issues 进行评论
请联系 @xiaochopin 初始化创建

点击使用GitHub登录进行评论初始化.