也许大家看博客园博客的时候,遇到过一些博客右侧,展示了打赏二维码~
如下图所示
那么,这是怎么实现的呢~~~
不错,你没猜错,他们使用的是本人写的一个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权限,申请后自己也用一下这个插件,合合