为技术博客添加评论功能：Gitalk 教程与实战
- 简介
- 安装
- 使用
- 创建 Github Application
- 方式1
- 方式2
主页传送门：📀 传送
简介
Gitalk是一个基于 GitHub Issue 和 Preact 开发的评论插件。
Gitalk是一个现代、无后端、基于GitHub Issue的评论系统，它允许网站访客使用GitHub账号登录并发表评论，所有评论数据都储存在相应的GitHub仓库中。（支持markdown语法这点对于惯于用md写博客的来说体验感蛮不错的。）
Gitalk具有以下特点：
- 集成简便：可以通过简单配置HTML标签属性或JavaScript进行初始化。
- 无需后端服务：利用GitHub的Issues服务，不须自行搭建和维护后端。
- 数据安全：评论数据存储在GitHub仓库，依托GitHub的数据安全性。
- 社区互动：借助GitHub的Issue功能促进社区的形成和互动。
- 可定制性：支持自定义Emoji、主题外观等。
- 多语言支持：支持多种语言，包括英语和中文。
demo页面功能：
安装
安装有俩种方式
- 直接引入
直接引入以下js，其中两行就行了
<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>
<!-- or -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
- npm
不用的可以直接忽略掉
npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
俩种方法任选其中一种方法即可。
使用
- 首先，您需要选择一个公共github存储库（已存在或创建一个新的github存储库）用于存储评论。
- 然后需要创建 GitHub Application，如果没有 点击这里申请 ，
Authorization callback URL填写当前使用插件页面的域名。
具体步骤如下：
创建 Github Application
创建 Github OAuth Apps
点击这里申请 或者在 Github 个人页面的右上角 -> 点击头像 –> Settings –> 左侧 Developer settings –> OAuth Apps –> New OAuth App
接着填写相关信息，这里面 Application name， Homepage URL， Application description 都可以随意填写，但 Authorization callback URL 一定要写自己 Blog 的 URL，如果有域名映射，就填写映射的域名，这是这一步的关键。
创建完application 之后 再去生成Client secrets 需要复制记住这个，因为只有第一次会显示，在之后就是密文显示。如果忘记了需要重新生成。
得到以上的Client ID和Client Secret之后，接下来就是应用到页面了
方式1
添加一个容器：
<div id="gitalk-container"></div>
<!-- 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: `Github Application clientID`,
clientSecret: `Github Application clientSecret`,
repo: `GitHub repo`, // 存储你评论 issue 的 Github 仓库名（建议直接用 GitHub Page 的仓库名）
owner: 'GitHub repo owner', // Github 用户名
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'], // 这个仓库的管理员，可以有多个，用数组表示，一般写自己,里面一定要有创建者登陆github用的名字，如果填错了，评论框会报错
id: ' location.pathname', // 页面的唯一标识，gitalk 会根据这个标识自动创建的issue的标签 一般使用页面的相对路径作为标识（要填能区分页面唯一性的字符串，比如页面链接，但是要注意长度限制，可以用md5转换一下。如果是单页应用，需要每个路由下能区分页面唯一性的字符串，并且在路由切换的时候重新设置此id）
distractionFreeMode: false // 类似Facebook评论框的全屏遮罩效果
});
gitalk.render('gitalk-container');
</script>
<!-- Gitalk end -->
当然，还有其他很多参数，有兴趣的话可以 点这里。
Gitalk 其他参数
number: 类型：数字，选填，页面的 issue ID 标识，若未定义number属性则会使用id进行定位。默认值：-1。
labels：类型：数组，选填，GitHub issue 的标签，默认值：Gitalk
body：类型：字符串，选填， GitHub issue 的内容，默认值：URL + HTML中meta标签中description的值。
language：类型：字符串，选填，设置语言，支持 [en, zh-CN, zh-TW]。默认值：navigator.language 或者 navigator.userLanguage。
perPage：类型：数字，选填，每次加载的数据大小，最多 100。默认值：10。
pagerDirection：类型：字符串，选填，评论排序方式，last为按评论创建时间倒叙，first为按创建时间正序。默认值：last。
createIssueManually：类型：布尔值，选填，如果当前页面没有相应的 isssue 且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。默认值：false。
proxy：类型：字符串，选填，GitHub oauth 请求到反向代理，为了支持 CORS。默认值:https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token。
flipMoveOptions：类型：对象，选填，评论列表的动画。参考 react-flip-move
enableHotKey：类型：布尔值，选填，启用快捷键(cmd/ctrl + enter)提交评论。默认值：true。
方式2
在React使用
使用以下代码引入Gitalk组件
import GitalkComponent from "gitalk/dist/gitalk-component";
按以下方式在React中使用Gitalk组件
<GitalkComponent options={{
clientID: "...",
// ...
// 设置项
}} />
设置
-
clientID String
必须. GitHub Application Client ID. -
clientSecret String
必须. GitHub Application Client Secret. -
repo String
必须. GitHub repository. -
owner String
必须. GitHub repository 所有者，可以是个人或者组织。 -
admin Array
必须. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。 -
id String
Default: location.href.
页面的唯一标识。长度必须小于50。 -
number Number
Default: -1.
页面的 issue ID 标识，若未定义number属性则会使用id进行定位。
提示：可以使用正则从 URL 中提取其中一部份作为 id。例如：location.href.match(‘/(?<=posts/)(.*)(?=/)/’)[1] -
labels Array
Default: [‘Gitalk’].
GitHub issue 的标签。 -
title String
Default: document.title.
GitHub issue 的标题。 -
body String
Default: location.href + header.meta[description].
GitHub issue 的内容。 -
language String
Default: navigator.language || navigator.userLanguage.
设置语言，支持 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]。 -
perPage Number
Default: 10.
每次加载的数据大小，最多 100。 -
distractionFreeMode Boolean
Default: false。
类似Facebook评论框的全屏遮罩效果. -
pagerDirection String
Default: ‘last’
评论排序方式， last为按评论创建时间倒叙，first为按创建时间正序。 -
createIssueManually Boolean
Default: false.
如果当前页面没有相应的 isssue 且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。 -
proxy String
Default: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token.
GitHub oauth 请求到反向代理，为了支持 CORS。 -
flipMoveOptions Object
Default:
{
staggerDelayBy: 150,
appearAnimation: 'accordionVertical',
enterAnimation: 'accordionVertical',
leaveAnimation: 'accordionVertical',
}
评论列表的动画。
- enableHotKey Boolean
Default: true.
启用快捷键(cmd|ctrl + enter) 提交评论.
如果喜欢的话，欢迎 🤞关注 👍点赞 💬评论 🤝收藏 🙌一起讨论 你的支持就是我✍️创作的动力！ 💞💞💞
