故事：
個(gè)人博客是用Vue自己擼的腊凶，以前自己也擼了一套評論系統(tǒng)划咐，感覺效果不是很好。妥協(xié)钧萍，直接用gitalk吧褐缠，網(wǎng)上也看了一些gittalk的接入文檔，發(fā)現(xiàn)關(guān)于Vue里怎么接入的介紹的很少风瘦，這里記錄一下接入過程队魏。少走彎路，珍愛生命吧万搔。??
步驟
1.github創(chuàng)建一個(gè)倉庫用來存放所有評論胡桨。
屏幕快照 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 : 你的網(wǎng)站鏈接 （沒有域名公網(wǎng)ip也行）
Application name : application 描述 （隨便）
Application name : 你的網(wǎng)站鏈接（沒有域名公網(wǎng)ip也行）
注冊完成后拿到Client ID && ClientSecret
屏幕快照 2020-01-02 下午12.49.53.png
3.引入項(xiàng)目
（1）在項(xiàng)目里引入有兩種方式瞬雹，一種是npm 安裝昧谊，另一種直接鏈接引入。這里有個(gè)坑酗捌，npm安裝完成做完開發(fā)后打包到線上呢诬，會(huì)加載不出評論詳情，這是官方的一個(gè)bug（親測）意敛。如果不想改官方代碼，還是直接鏈接引入吧膛虫。
在根目錄index.html目錄下草姻，引入
<link rel="stylesheet" >
<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" >
<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放入一個(gè)div展示評論
<template>
//...
<div id="gitalk-container" ></div>
//...
</template>
在data 的return里加一個(gè)gittalk稍刀。
data() {
return {
//...
gitalk : new Gitalk({
id: '文章id撩独，唯一標(biāo)識',
clientID: '你的clientID',
clientSecret: '你的clientSecret',
repo: '倉庫名',
owner: 'github用戶名',//
admin: ['github用戶名'],//github用戶名
labels: ['github用戶名'],
perPage: 50,
distractionFreeMode: false
}),
}
//...
}
然后在mounted()內(nèi)調(diào)用
mounted () {
this.gitalk.render("gitalk-container");
},
到這就完事了，去看看效果吧账月。
在我的blog上的效果 ：http://47.111.234.155:8080/#/article/5e0d7ddcd429ace44ea9819b
缺點(diǎn)
第一次打開網(wǎng)頁综膀，需要管理員github賬號去激活一下評論，才行局齿。
