一、前言

不像hexo、jekyll等，为了学习，我的博客是用vue和nodejs搭建出来的。支持在线编辑和markdown渲染等功能。

大家如果感兴趣可以看我的博客地址

最近给自己的博客添加了评论服务，用到的评论服务是Gitalk，它是基于github issue搭建出来的评论系统。废话不多说，接下来说说如何使用。

二、必要的准备

在Github创建一个用来存放评论的仓库

当然你也可以直接用你博客所在的仓库，因为我的博客部署到了coding pages，所以我单独创建了一个仓库用来存放评论。

注册一个Github OAuth application

没有的可以点这里申请

注册成功后，记录下你的clientID和clientSecret。

三、安装

有两种方式安装(CDN和npm)，大家可自行选择。

1. CDN

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">   <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>   <!-- or -->   <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">   <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

2. npm

npm i --save gitalk

四、使用

考虑到vue的生命周期等，使用方法上和官方文档给出来的是需要做略微的调整的。

引入gitalk

//在index.html页面中CDN引入 <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/gitalk/dist/gitalk.min.js"> //在vue中import import Gitalk from 'gitalk'

初始化Gitalk实例

export default {   data(){      return{     gitalk: new Gitalk({         clientID: "你的clientID",             clientSecret: "你的clientSecret",             repo: "刚刚创建的项目名",             owner: "github用户名",             admin: ["github用户名"],             id: window.location.hash, // 默认为pathname,如果你也是像我这样用vue搭建的，我建议使用hash，原因具体后面会讨论到。             distractionFreeMode: false // Facebook-like distraction free mode     })         }   } }

在恰当的位置添加标签,用来渲染Gitalk组件。

<div id="gitalk-container"></div>

渲染

mounted(){   this.gitalk.render("gitalk-container"); }

五、注意事项

id的设置

这个id是用来唯一区分页面的，也就是你不同的文章肯定有不同的评论数据，Gitalk要通过这个id来区分是哪个页面，然后在你的github仓库创建相应的issue来存放当页评论数据，id默认值是window.location.pathname

但是默认的只适用于采用history模式的路由，但对于vue-router这种默认采用hash模式的就不行了。

举个例子

//在history模式下，路由URL如下格式 www.rychou.xyz/article/69 window.location.pathname;// 值是 /article/69 //在hash模式下，路由变成这样了 www.rychou.xyz/#/article/69 window.location.pathname; // 值是 /

此时，在hash模式下id就不具有唯一性了。

建议使用window.location.hash，此时的值是#/aticle/69,具有唯一性。

当然你也可以设置vue-router为history模式，但是这会有一个刷新页面出现404的BUG，解决办法参考官方文档

不使用类似的评论服务Gitment的原因

我也试过用Gitment，也成功了，但是有一个非常令人不爽的地方，就是每一篇文章都需要手动初始化(创建相应issue)，因此我还是用了Gitalk,它会根据你的配置，自动帮你初始化。

六、最后

有问题的同学们，欢迎来原文下方提问，同时也相当于帮我测试一下评论服务了。

参考链接：

• Gitalk

• Gitment

• 官方文档- vue-router History模式

• 
  

原文链接：https://segmentfault.com/a/1190000016060379