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（亲测）。如果不想改官方代码，还是直接链接引入吧。

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

最后编辑于：2020.01.02 13:51:05