故事：
个人博客是用Vue自己撸的，以前自己也撸了一套评论系统，感觉效果不是很好。妥协，直接用gitalk吧，网上也看了一些gittalk的接入文档，发现关于Vue里怎么接入的介绍的很少，这里记录一下接入过程。少走弯路，珍爱生命吧。😄
步骤
1.github创建一个仓库用来存放所有评论。
屏幕快照 2020-01-02 上午11.23.34.png
2.注册 GitHub Application。
注册地址
https://github.com/settings/applications/new
屏幕快照 2020-01-02 上午11.27.20.png
Application name : application 名称 （随便）
Homepage URL : 你的网站链接 （没有域名公网ip也行）
Application name : application 描述 （随便）
Application name : 你的网站链接（没有域名公网ip也行）
注册完成后拿到Client ID && ClientSecret
屏幕快照 2020-01-02 下午12.49.53.png
3.引入项目
（1）在项目里引入有两种方式，一种是npm 安装，另一种直接链接引入。这里有个坑，npm安装完成做完开发后打包到线上，会加载不出评论详情，这是官方的一个bug（亲测）。如果不想改官方代码，还是直接链接引入吧。
在根目录index.html目录下，引入
<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>
完事是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="referrer" content="no-referrer"/>
<title>幼稚鬼</title>
<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>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
（2）打开需要添加评论的页面。在template放入一个div展示评论
<template>
//...
<div id="gitalk-container" ></div>
//...
</template>
在data 的return里加一个gittalk。
data() {
return {
//...
gitalk : new Gitalk({
id: '文章id，唯一标识',
clientID: '你的clientID',
clientSecret: '你的clientSecret',
repo: '仓库名',
owner: 'github用户名',//
admin: ['github用户名'],//github用户名
labels: ['github用户名'],
perPage: 50,
distractionFreeMode: false
}),
}
//...
}
然后在mounted()内调用
mounted () {
this.gitalk.render("gitalk-container");
},
到这就完事了，去看看效果吧。
在我的blog上的效果 ：http://47.111.234.155:8080/#/article/5e0d7ddcd429ace44ea9819b
缺点
第一次打开网页，需要管理员github账号去激活一下评论，才行。
网友评论