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

也许你们看博客园博客的时候，遇到过一些博客右侧，展现了打赏二维码~
以下图所示

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

不错，你没猜错，他们使用的是本人写的一个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

欢迎查询本人博客，这里的文章通常都是我我的博客的复制，点此查看