Vue 使用gitalk

故事：

个人博客是用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目录下，引入

完事是这样的：

（2）打开需要添加评论的页面。在template放入一个div展示评论

在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账号去激活一下评论，才行。