怎样使用两行代码实现博客园打赏功能

也许大家看博客园博客的时候,遇到过一些博客右侧,展示了打赏二维码~
如下图所示

那么,这是怎么实现的呢~~~

不错,你没猜错,他们使用的是本人写的一个js插件--tctip。

大家搜一下,还能搜到网上有些tctip的教程。比如下面两个链接

http://www.cnblogs.com/softidea/p/5862961.html
http://www.cnblogs.com/wuql/p/6144791.html

不过以上两个链接,介绍的都是老版的tctip使用,使用方法较为老套繁琐。

这里,我要介绍的是tctip v1.0.0的使用方法,全世界第一篇,因为昨天晚上本人刚发布这个新版本(o)/~

相比于老版吗,新版做了以下事情

  • 简化了参数配置,大家不用按照老版的教程那样,配置图片链接、css路径啥的了。当然,收款二维码还是需要滴
  • 使用webpack+ES6等较新的方式完全重写代码,让代码更优美。可作为webpack+ES6入门示范使用

注意,新版本简化了使用方式,不兼容老版本,如需要升级到新版本,请修改您的配置参数

第一步,申请博客园js权限。

这一步大家可以参考前面别人的教程,或者点击这里。注意,只看申请js部分,后面tctip部分不要看,老版已经不维护了

第二步,获取微信和支付宝二维码图片,并上传到合适的地方,保存地址。

这里其实是支持各种各样的打赏方式的,包括比特币,甚至什么没听过的方式。但是根据统计,大多数人都是放一个支付宝,放一个二维码,这也符合大家的印象。
所以这里我就直接说支付宝和微信了。
上传图片,大家自行解决,包括博客园也是可以上传的,不再赘述

第三步, 复制并修改下面的代码

  <script src="http://static.tctip.com/tctip-1.0.0.min.js"></script>
  <script>  
  new tctip({
    top: '20%',
    button: {
      id: 9,
      type: 'dashang',
    },
    list: [
      {
        type: 'alipay',
        qrImg: '你的支付宝收款二维码图片地址'
      }, {
        type: 'wechat',
        qrImg: '你的微信收款二维码图片地址'
      }
    ]
  }).init()
  </script>

上面的代码,相信读这篇文章的人都懂,就是引入js,然后配置。
当然,大家也可以到我的github下载tctip-1.0.0.min.js,并上传到自己的服务器上使用。

第四步,粘贴代码

找到“我的博客”->“管理”->“设置”,将页面往下拉,找到“页首Html代码”这个位置,将修改好的代码复制进去,保存

第五步,感谢作者

是的,到这里你应该已经可以看到自己博客上的二维码了。
我个人之后会申请博客园的js权限,申请后自己也用一下这个插件,合合

请注意,作者五行缺钱,如果本文对你有用的话,欢迎扫描二维码打赏作者。

当然,你也可以fork、star、PR作者的项目, tctip

欢迎查询本人博客,这里的文章一般都是我个人博客的复制,点此查看

posted @ 2017-03-01 10:56  greedying  阅读(3182)  评论(6编辑  收藏  举报