随着移动支付在国内的兴起,越来越多的付费内容越多如雨后春笋般的冒了出来。其中以《逻辑思维》、罗振宇、李笑来为主要代表作品和人物。可以说是时候在自己的博客上添加打赏功能了。那么对于不会写代码的如何快速的一键添加打赏功能呢?下面为大家介绍一款插件,支持博客园,CSDN博客,WordPress个人站点等。
运行效果可以到 CODE大全 进行查看!我这里附上打赏截图效果!
使用方法如下:
<script> window.tctipConfig = { //图片路径前缀,用来修订图片相对路径,默认为"" imagePrefix: "", //css路径前缀,用来修订css相对路径,默认为"" cssPrefix: "", /** 静态文件相对路径。当staticPrefix存在的时候, 优先使用staticPrefix,此时imagePrefix和cssPrefix失效 推荐使用下面的staticPrefix,此时将使用作者服务器的静态资源,使用者不需要下载图片和css资源到自己服务器 **/ staticPrefix: "http://static.tctip.com", /*** 左侧分享按钮的id,使用的图片为 tab_id.png 这里为了展示效果,随机选择一张图片 请实际使用的时候,选择适合的颜色,例如 buttonImageId: 3, **/ buttonImageId: Math.ceil(Math.random()*8) + 1, /**** 左侧按钮上的文字,目前有两个选项,打赏,或者赞助,传入拼音即可 **/ buttonTip: "dashang", //或者 zanzhu /**** list规定打赏的方式,list有几个元素,代表有几种打赏方式,最多五种,用户传入的支付方式多于五种,多出部分将会被忽略 一个完整的list元素例子如下 'key' : {icon: "img/alipay.png", name:"支付宝", desc: "支付宝打赏", className: "", qrimg: "", account:""}, 分别解释如下: key: 为一个英文下标,用户可随意定义;key有六种默认值,分别为 alipay, tenpay, weixin, bitcoin,litecoin,dogecoin,当key为默认值 的时候,插件默认规定了icon, name,desc的默认值; icon: 左侧icon图标的url,可以传入相对路径,此时会根据imagePrefix或者staticPrefix进行路径修正。 如果传入绝对路径,则直接展示,不进行路径修正。 如果key是默认值,且用户没有传入icon,则使用系统自带icon。 name: 支付方式的名称,用于左侧tab展示的说明。name可以使用系统默认值;如果没有系统默认值,则需要用户传入 desc: 支付方式更纤细说明,用于二维码下方说明文字,建议不超过五个字。当desc为空的时候,系统使用默认值,如果没有默认值,则使用name字段 account: 支付方式账号,例如支付宝账号或者比特币地址等。用于生成二维码,并同时在二维码下方的desc之下以文字形式展示,方便打赏的人直接复制账号而非以二维码形式打赏; account没有系统默认值 qrimg: 当用户没有支付方式账号的时候,可以直接传入二维码图片;比如用户可以上传微信面对面收钱的二维码图片到服务器,然后将图片的url作为qrimg字段传入。此时二维码下方只展示desc字段,不展示account. 当用户同时传入qrimg和accounts时候,以qrimg为准。 className: className可以为空,或者传入myR-on;当用户传入myR-on的时候,右侧二维码默认展示当前支付方式;否则默认展示第一种支付方式。 **/ list:{ /**使用系统默认支付方式,传入account**/ bitcoin: { account: "1PhQySHF1ZuoRwoZ8G4CDLEtE6fAnD3GJP"}, /**使用系统默认支付方式,传入的qrimg为支付宝收款二维码**/ alipay: { qrimg: "http://tctip.com/img/alipayqr.png"}, /**使用系统默认支付方式,传入qrimg**/ weixin:{qrimg: "http://littlebtc.com/images/yeshen.png"}, /**使用自定义支付方式,传入account,并默认展示**/ tenpay: { account: "342285717", className:"myR-on"}, /**使用自定义支付方式,传入icon,name,account**/ another:{icon: "img/litecoin.png", name: "莱特币", className: "", account: "LVCSBrv3ikzZWDtm9v8QPvDvLwn7dcsCEa", desc: "自定义莱特币"} } }; </script> <script src="js/tctip.min.js"></script>
源码下载地址:《分享一款打赏插件》
: » 为你的博客一键添加打赏功能
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/251186.html