1. 申明
Gitalk 是一个基于 GitHub Issue 和 Preact 开辟的批评插件。
Gitalk 的特征：
1、运用 GitHub 登录
2、支撑多言语 [en, zh-CN, zh-TW, es-ES, fr, ru]
3、支撑个人或构造
4、无滋扰情势（设置 distractionFreeMode 为 true 开启）
5、快捷键提交批评 （cmd|ctrl + enter）
运用Gitalk须要你做一些提前准备：
1、在github上建立一个堆栈，Gitalk会把批评放在这个堆栈的issues内里。
2、在github上要求一个GitHub OAuth application，来让Gitalk有权限操纵github上的堆栈。
2. 装置运用
2.1 装置
两种体式格局引入：
1、直接在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然后找到对应资本链接复制过来。
2、经由过程npm装置
npm i --save gitalkimport 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'2.2 运用
1、起首须要在html文件中增加一个容器，Gitalk组件会在此处显现
<div id="gitalk-container"></div>2、运用下面的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批评组件内里参数下面会解说。
设置好后，页面终究结果(https://gitalk.github.io/)：
注重：
1、第一次Gitalk须要初始化批评，须要你先点击
运用GitHub上岸，然后革新页面才会初始化，或许本身去堆栈里手动建立一个issues，并增加issues的
labels值为Gitalk的
labels参数和
id参数的值。
new Gitalk的参数中有github的堆栈信息和GitHub Application信息，所以起首我们建立这两个。
在github上建立一个堆栈比较简单这里就不解说了。
下面讲一下怎样要求一个GitHub OAuth application
注重：假如你打算在本身网站运用Gitalk，而且这个网站的源码在github的堆栈上，那末你也能够直接运用这个堆栈，Gitalk只运用堆栈的Issues。
3. 要求一个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就是我们须要的参数。
4. 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的题目，假如你想治理批评能够设置一下这个参数，来辨别该批评是来自于谁人文章。
其他参数：
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
distractionFreeMode：范例：布尔值，选填，相似Facebook批评框的全屏遮罩结果。默认值：false
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：范例：对象，选填，批评列表的动画。
参考
enableHotKey：范例：布尔值，选填，启用快捷键
(cmd/ctrl + enter)提交批评。默认值：true
5. Gitalk实际运用例子
5.1 在docsify中运用
docsify是一个奇异的文档网站天生东西。概况引见请看官网：https://docsify.js.org/#/zh-cn/
运用docsify教程请检察：https://segmentfault.com/a/11…
docsify支撑Gitalk批评插件，须要引入一个JavaScript剧本文件：https://unpkg.com/docsify@4.8.6/lib/plugins/gitalk.min.js
一个实际运用例子：
<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">
<script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/gitalk.min.js"></script>
<script>
var gitalk = new Gitalk({
clientID: '2eb19afceda708b27e64',
clientSecret: '36aedb5a30321626a8631689fee5fafd5929f612',
repo: 'gitalk-comment',
owner: 'yulilong',
admin: ['yulilong'],
title: location.hash.match(/#(.*?)([?]|$)/)[1],
id: location.hash.match(/#(.*?)([?]|$)/)[1],
})
// 监听URL中hash的变化，假如发明换了一个MD文件，那末革新页面，处理全部网站运用一个gitalk批评issues的题目。
window.onhashchange = function(event){
if(event.newURL.split('?')[0] !== event.oldURL .split('?')[0]) {
location.reload()
}
}
// 因为docsify/lib/plugins/gitalk.min.js文件中已经有下面代码了，所以不须要在写一次了
// gitalk.render('gitalk-container')
</script>申明：
1、因为docsify的链接URL运用的是hash的体式格局，致使切换页面的时刻不会革新页面，致使全部网站的Gitalk批评运用的是一个批评，因而做了监听hash事宜，来革新页面，如许就可以每次切换页面革新，然后加载对应的批评。
2、关于Gitalk参数
id的值，因为点击二级题目后，二级题目会以参数的情势出现在url上，致使长度有事凌驾了50，所以过滤掉URL中的参数，另外还能处理批评定位不到题目(二级题目会在URL上)。
5.2 在VuePress中运用
关于VuePress，请参考：https://vuepress.vuejs.org/zh/
我们须要建立.vuepress/enhanceApp.js文件，内容以下：
function integrateGitalk (router) {
const linkGitalk = document.createElement('link');
linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
linkGitalk.rel = 'stylesheet';
document.body.appendChild(linkGitalk);
const scriptGitalk = document.createElement('script');
scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
document.body.appendChild(scriptGitalk);
var path = '';
router.afterEach((to) => {
if (scriptGitalk.onload) {
setTimeout(loadGitalk, 5, to)
} else {
scriptGitalk.onload = () => {
loadGitalk(to.fullPath);
}
}
});
function loadGitalk (to) {
if (to.path !== path) {
path = to.path;
let commentsContainer = document.getElementById('gitalk-container');
const $page = document.querySelector('.page');
if (commentsContainer && $page) {
$page.removeChild(commentsContainer)
}
commentsContainer = document.createElement('div');
commentsContainer.id = 'gitalk-container';
commentsContainer.classList.add('content');
if ($page) {
$page.appendChild(commentsContainer);
if (typeof Gitalk !== 'undefined' && Gitalk instanceof Function) {
renderGitalk();
}
}
}
}
function renderGitalk () {
const gitalk = new Gitalk({
clientID: '2eb19afceda708b27e64',
clientSecret: '36aedb5a30321626a8631689fee5fafd5929f612',
repo: 'gitalk-comment',
owner: 'yulilong',
admin: ['yulilong'],
title: location.pathname,
id: location.pathname, // Ensure uniqueness and length less than 50
language: 'zh-CN',
});
gitalk.render('gitalk-container');
}
window.loadGitalk = loadGitalk;
}
export default ({ Vue, options, router }) => {
try {
document && integrateGitalk(router)
} catch (e) {
console.error(e.message)
}
}保留文件后，重启vuePress效劳即可。
结果以下图：
