Gitalk评论插件使用

最新推荐文章于 2024-08-10 08:35:49 发布

小白太白

最新推荐文章于 2024-08-10 08:35:49 发布

阅读量579

点赞数

分类专栏：安装与使用文章标签： github js css

原文链接：https://segmentfault.com/a/1190000018072952

版权

安装与使用专栏收录该内容

34 篇文章 1 订阅

订阅专栏

Gitalk评论插件使用

简介

参考： Gitalk评论插件使用教程

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

Gitalk 的特性：

1、使用 GitHub 登录

2、支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]

3、支持个人或组织

4、无干扰模式（设置 distractionFreeMode 为 true 开启）

5、快捷键提交评论

使用Gitalk需要你做一些提前准备：

1、在github上创建一个仓库，Gitalk会把评论放在这个仓库的issues里面。

2、在github上申请一个GitHub OAuth application，来让Gitalk有权限操作github上的仓库。

安装与使用

采用该博客设置方法

在HTML文件中引入

<link rel="stylesheet" href="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css">
<script src="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>

建议直接把文件下载后放在项目目录中，这样就可以不再依赖第三方网络了。

注意： 如果连接失效了，请在https://www.bootcdn.cn/上搜索gitalk然后找到对应资源链接复制过来。

首先需要在html文件中添加一个容器，Gitalk组件会在此处显示

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

使用下面的JavaScript代码来生成Gitalk评论：

var gitalk = new Gitalk({
  clientID: '2eb19afceda708b27e64', // GitHub Application Client ID
  clientSecret: '36aedb5a30321626a8631689fee5fafd5929f612', // GitHub Application Client Secret
  repo: 'gitalk-comment'      // 存放评论的仓库
  owner: 'yulilong',          // 仓库的创建者，
  admin: ['yulilong'],        // 如果仓库有多个人可以操作，那么在这里以数组形式写出
  id: location.pathname,      // 用于标记评论是哪个页面的，确保唯一，并且长度小于50
})

gitalk.render('gitalk-container');    // 渲染Gitalk评论组件

里面参数下面会讲解。

注意： 第一次Gitalk需要初始化评论，需要你先点击使用GitHub登陆，然后刷新页面才会初始化

new Gitalk的参数中有github的仓库信息和GitHub Application信息，所以首先我们创建这两个。

在github上创建一个仓库比较简单这里就不讲解了。下面讲一下如何申请一个GitHub OAuth application

注意： 如果你打算在自己网站使用Gitalk，并且这个网站的源码在github的仓库上，那么你也可以直接使用这个仓库，Gitalk只使用仓库的Issues。

申请一个`OAuth application`

GitHub OAuth application允许程序来操作你的github账户，可以对github中仓库读写。
详情介绍：https://developer.github.com/…

申请GitHub OAuth application流程：

1、打开github网站登陆后，点击右上角的用户图标，选择Settings

2、在Settings页面选择Developer settings选项。

3、在Developer settings选择OAuth Apps,然后会在页面右边有一个New OAuth App按钮，点击这个按钮就进入到新建OAuth application页面

4、也可以直接代开这个链接：https://github.com/settings/a… 进入新建页面

在注册OAuth应用页面有如下几个参数需要填写：

Application name：必填，OAuth的名字

Homepage URL：必填，你应用的网址，哪个网站用了Gitalk组件，就填写这个网址

Application description：选填，该OAuth的说明

Authorization callback URL：必填，授权成功后回调网址，跟Homepage URL参数保持一致就好

这些参数在注册成功后是可以修改。

参数填好后，点Register application按钮即可完成注册。

注册成功后会自动跳转到这个OAuth应用的页面，或者在Developer settings选择OAuth Apps后就能看见你创建的OAuth应用名字，点击它进入这个OAuth应用的页面。在新创建的OAuth应用里面的Client ID和Client Secret就是我们需要的参数。

`Gitalk`的参数说明

在上面使用Gitalk的JavaScript代码中有一些参数：

var gitalk = new Gitalk({
  clientID: '2eb19afceda708b27e64', // GitHub Application Client ID
  clientSecret: '36aedb5a30321626a8631689fee5fafd5929f612',
  repo: 'gitalk-comment'      // 存放评论的仓库
  owner: 'yulilong',          // 仓库的创建者，
  admin: ['yulilong'],        // 如果仓库有多个人可以操作，那么在这里以数组形式写出
  id: location.pathname,      // 用于标记评论是哪个页面的
})

主要的参数：

clientID
类型：字符串，必填，申请的OAuth App的Client ID
clientSecret
类型：字符串，必填，申请的OAuth App的Client Secret
repo
类型：字符串，必填，github上的仓库名字，用于存放Gitalk评论
owner
类型：字符串，必填，github仓库的所有者的名字
admin
类型：数组(元素是字符串)，必填，github仓库的所有者和合作者 (对这个 repository 有写权限的用户)
id
类型：字符串，选填，页面的唯一标识。长度必须小于50。此参数用于评论和页面对应的标识，如果想让两个页面用一个评论，可设置两个页面的id一样。默认值：location.href(页面URL)
title
类型：字符串，选填，GitHub issue 的标题，默认值：document.title(HTML中title标签中的值)

注意：

虽然id和title参数是不是必填的选项，但是这个两个参数很重要建议填上：

1、id参数用于评论记录和页面对应的唯一标记，有的时候发现好几个页面评论是一样的，就是由于配置id参数的时候，这几个页面的id是一样导致。由于id参数默认值是location.href页面URL，而有的时候URL中带着页面标题的链接，导致URL长度超过了50个字符长度，会导致创建评论issues失败(长度超过50个会创建失败)，这点要注意。

2、title用于在github仓库issues的标题，如果你想管理评论可以设置一下这个参数，来区分该评论是来自于那个文章。