人间蒸发
2019-12-16 14:29:10
沙雕程序员(九)—— vue中使用gitalk,给自己的博客加个评论。
先贴个官方中文说明,https://github.com/gitalk/gitalk/blob/master/readme-cn.md
1.引入
有俩种引入方式,这里我用了第一种,省事,而且节约你服务器空间!
在你的index.html中引入
<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.申请GitHub Application
重点说明一下,你必须得是上线的项目才可以申请,无线上项目申请的最后出不来。
申请地址,https://github.com/settings/applications/new ,如下图
注册成功,在下图中你会找到你的注册好的应用,我的应用如下图
此时,你需要记住上图中的Client ID和Client Secret。
3.在github创建一个新的仓库,在issues中存这些评论,我的新仓库如下图
名字没必要和你的应用名称一样。
4.应用
在你需要写评论的位置加入
<div class="social-section">
<div id="gitalk-container" ></div>
</div>
var gitalk = new Gitalk({ clientID: '你的Client ID', clientSecret: '你的Client Secret', repo: '你的新创建仓库名称', owner: '新仓库所属人', admin: ['新仓库的所属人'],//如果此仓库有多个开发中,以数组的格式加入 id: location.pathname //用于标记评论是哪个页面的,确保唯一,并且长度小于50 })
5.效果图!
点击绑定即可,此处当时遇到坑,跳转到绑定页面就没有反应了,如果大家出现此问题,换台网络好的电脑再试试!
终极效果如下图
6.查看评论
到你新创建的仓库中,在issues中即可看到
至此,全文结束,拜了个拜,有问题群里联系我!
评论
最近浏览
sdwewew LV1
2021年5月19日
罗罗罗
2021年3月25日
暂无贡献等级
lris_luanling LV11
2021年2月18日
liuxinying2002
2020年11月18日
暂无贡献等级
17693522332 LV1
2020年11月7日
873918481 LV1
2020年8月18日
随便取个名字_哈哈 LV27
2020年3月21日
wanry2016
2020年2月24日
暂无贡献等级
zhoujie123800 LV6
2020年2月18日
mustDo LV14
2020年1月16日