故事：
個(gè)人博客是用Vue自己擼的，以前自己也擼了一套評(píng)論系統(tǒng)，感覺效果不是很好。妥協(xié)，直接用gitalk吧，網(wǎng)上也看了一些gittalk的接入文檔，發(fā)現(xiàn)關(guān)于Vue里怎么接入的介紹的很少，這里記錄一下接入過程。少走彎路，珍愛生命吧。??
步驟
1.github創(chuàng)建一個(gè)倉(cāng)庫(kù)用來存放所有評(píng)論。
屏幕快照 2020-01-02 上午11.23.34.png
2.注冊(cè) GitHub Application。
注冊(cè)地址
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也行）
注冊(cè)完成后拿到Client ID && ClientSecret
屏幕快照 2020-01-02 下午12.49.53.png
3.引入項(xiàng)目
（1）在項(xiàng)目里引入有兩種方式，一種是npm 安裝，另一種直接鏈接引入。這里有個(gè)坑，npm安裝完成做完開發(fā)后打包到線上，會(huì)加載不出評(píng)論詳情，這是官方的一個(gè)bug（親測(cè)）。如果不想改官方代碼，還是直接鏈接引入吧。
在根目錄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）打開需要添加評(píng)論的頁(yè)面。在template放入一個(gè)div展示評(píng)論
<template>
//...
<div id="gitalk-container" ></div>
//...
</template>
在data 的return里加一個(gè)gittalk。
data() {
return {
//...
gitalk : new Gitalk({
id: '文章id，唯一標(biāo)識(shí)',
clientID: '你的clientID',
clientSecret: '你的clientSecret',
repo: '倉(cāng)庫(kù)名',
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)頁(yè)，需要管理員github賬號(hào)去激活一下評(píng)論，才行。
