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网站登陆后，点击右上角的用户图标，选择
Settings2、 在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的标题，如果你想管理评论可以设置一下这个参数，来区分该评论是来自于那个文章。
实际使用
可查看 关于 Gitalk评论 的源码，其中实际参数配置位于 _config.yml
该博客 已实现评论功能，可体验尝试
