为技术博客添加评论功能：Gitalk 教程与实战

简介

---

  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'

俩种方法任选其中一种方法即可。

使用

---

1. 首先，您需要选择一个公共github存储库（已存在或创建一个新的github存储库）用于存储评论。
2. 然后需要创建 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: cors-anywhere.azm.workers.dev/https://git…. GitHub oauth 请求到反向代理，为了支持 CORS。

• flipMoveOptions Object Default:

  {
    staggerDelayBy: 150,
    appearAnimation: 'accordionVertical',
    enterAnimation: 'accordionVertical',
    leaveAnimation: 'accordionVertical',
  }

评论列表的动画。

• enableHotKey Boolean Default: true. 启用快捷键(cmd|ctrl + enter) 提交评论.