博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[前端插件]为自己的博客增加打赏功能
阅读量:5846 次
发布时间:2019-06-18

本文共 2112 字,大约阅读时间需要 7 分钟。

前几天在一个博客中看到有一个打赏功能。其实简单说来就是在页面中加入动态DOM节点,使用的也是简单的HTML、CSS、JS这些前端的一些简单知识。在GitHub上有开源的代码,这里稍加改造就可以用在自己的博客中了。


 

最简单的使用方式是在页面中加入如下JS代码

 

其中比较重要的是配置有staticPrefix,是原作者自己提供的静态文件相对路径,用来存放img和css;list是打赏方式,qrimg是设置打赏方式的二维码图片。


接下来是在博客园中使用。先在本地准备好静态文件:

  JS文件,tctip.min.js;

  css样式文件,myReward.css;

  支付二维码,ialipay.bmp、iweixin.bmp;

  支付方式图片,alipay.bmp、weixin.bmp;

  赞助或者打赏按钮图片,tab_4.bmp(对应buttonImageId)。

博客园只能上传bmp图片,所以要将其他格式图片修改,然后在自己的博客园后台上传文件,这样前面的静态文件就可以使用刚刚上传了。


 

如果使用自己上传的静态文件,配置时就不要staticPrefix地址,提供imagePrefix和cssPrefix:

 

 

当然如果只是这样就完了,还是没有看作者的源JS代码,事实是不修改一下源码也无法使用的,其实主要是文件路径设置的问题。


 

打开JS源码,不是压缩的源码哦,除非你看的不眼花,也没人拦你的。

myConfig : {        imagePrefix    : "",        cssPrefix        : "",        /***         * 当staticPrefix不为空的时候,imagePrefix和cssPrefix失效         */ staticPrefix : "", buttonImageId : "3", buttonTip : "dashang", cssUrl: "/myRewards.css" },

 

原来的cssUrl是/css/myRewards.css,因为博客园上传的文件没有文件夹,所以去掉css。可能大家想到了,img也有一样的问题。

listConfig:{                'alipay'    :     {icon: "alipay.bmp", name:"支付宝", desc: "支付宝打赏", className: ""},                'tenpay'    :     {icon: "img/tenpay.png", name:"财付通", desc: "财付通打赏", className:""},                'weixin'    :     {icon: "weixin.bmp", name:"微信", desc: "微信打赏", className:""},                'bitcoin'    :   {icon: "img/bitcoin.png", name:"比特币", desc: "比特币打赏", className:""},                'litecoin'    :   {icon: "img/litecoin.png", name:"莱特币", desc: "莱特币打赏",className:""}, 'dogecoin' : {icon: "img/dogecoin.png", name:"狗狗币", desc: "狗狗币打赏", className:""} },

 

支付方式列表中,修改图片相对路径,由于只使用了支付宝、微信两种方式,所以只修改他们的路径。其实还可以添加其他的支付方式在这里,就不赘述了。

buttonImageUrl: function(){                        var id = tctip.myConfig.buttonImageId;                        var tip = tctip.myConfig.buttonTip; //return tctip.imageUrl("" + tip + "/tab_" + id + ".bmp"); return tctip.imageUrl("/tab_4.bmp"); },

 

支付按钮的图片路径,同样修改返回的相对路径。


这样在博客园后台的设置页面,在页首Html处添加上面的配置文件就可以了。

注:本文的目的不是得到别人的打赏,毕竟优质的文章才值得,而我还有很长的路。通过看别人的代码,学习如何写前端插件才是重点。作为对原作者的支持,请不要修改源代码中的github地址。

 

 

谢谢原作者开源和无私精神---参考:https://github.com/greedying/tctip---

 

关键字:JS插件,打赏

 

< 原创文章如转载,请注明出处。 />

转载于:https://www.cnblogs.com/webenh/p/5790626.html

你可能感兴趣的文章
全球大尺寸面板产能吃紧 价格望触底反弹
查看>>
CYQ.Data 轻量数据层之路 框架如何应对数据库变化
查看>>
绿盟科技安全态势感知解决方案
查看>>
任正非:华为从未想干翻苹果 "称霸"死无葬身之地
查看>>
有关Yahoo的那些记忆:身体早就冰凉了,却迟迟没有倒下
查看>>
云合同依然是一个雷区
查看>>
免费云盘不省心,我的数据怎么办?
查看>>
工业大数据是智能制造重要突破口
查看>>
窄带物联网迎来投资热 智慧城市扩张初现
查看>>
你家下暴雨了吗 光伏电站作业时如何防触电?
查看>>
Windows 10秋季创作者更新:桌面端也可享受滑动输入
查看>>
白帽子认为2017年网络安全的头号威胁是大规模监控
查看>>
JavaScript与PHP到底有何不同?
查看>>
物联网标准化怎么做?产业化怎么干?
查看>>
LPWAN技术:物联网的重要基础
查看>>
AT&T ECOMP与Open-O相互掣肘
查看>>
针对黑客攻击 小编教你如何保护自己?
查看>>
案例研究:独特的零售+数据中心
查看>>
云计算的现状及发展趋势
查看>>
使用复杂度度量去改进软件质量
查看>>