一、前言
不像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 src="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 src="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 src="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
,它会根据你的配置,自动帮你初始化。
六、最后
有问题的同学们,欢迎来原文下方提问,同时也相当于帮我测试一下评论服务了。
参考链接:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。