最代码广告位
最代码人间蒸发的gravatar头像
最代码人间蒸发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 ,如下图

沙雕程序员(九)—— vue中使用gitalk,给自己的博客加个评论。

注册成功,在下图中你会找到你的注册好的应用,我的应用如下图

沙雕程序员(九)—— vue中使用gitalk,给自己的博客加个评论。

此时,你需要记住上图中Client ID和Client Secret。

3.在github创建一个新的仓库,在issues中存这些评论,我的新仓库如下图

沙雕程序员(九)—— vue中使用gitalk,给自己的博客加个评论。

名字没必要和你的应用名称一样。

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.效果图!

沙雕程序员(九)—— vue中使用gitalk,给自己的博客加个评论。

点击绑定即可,此处当时遇到坑,跳转到绑定页面就没有反应了,如果大家出现此问题,换台网络好的电脑再试试!

终极效果如下图

沙雕程序员(九)—— vue中使用gitalk,给自己的博客加个评论。

6.查看评论

到你新创建的仓库中,在issues中即可看到

沙雕程序员(九)—— vue中使用gitalk,给自己的博客加个评论。

至此,全文结束,拜了个拜,有问题群里联系我!


打赏
最近浏览
wanry20162月24日
暂无贡献等级
zhoujie123800 LV62月18日
月亮星星星星
mustDo LV141月16日
月亮月亮月亮星星星星
eiven_pro LV21月16日
星星星星
最代码故戌 LV201月16日
太阳月亮
随心随意1月14日
暂无贡献等级
我去买G橘子 LV71月11日
月亮星星星星星星
myjaychou LV31月10日
星星星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友