分享前，我必须承认文章打赏功能，在大部分网站只是一个鸡肋、花哨的功能，食之无味，弃之可惜。但是，大部分站长为了丰富网站的各个方面，也是乐此不疲的折腾了这个然并卵的功能。
好了，我先不管它有没有用，先分享出来，想必还是有不少站长乐于折腾的。
一、百度打赏
经常关注百度站长平台的朋友应该都知道百度推出过一个打赏的组件，目测主要是为了推广百度钱包，直到现在还处于内侧状态。小灰灰博客试着申请了下就通过了。
它的原理很简单，就是在百度站长那设定打赏二维码图片（或百度钱包账号），然后在网站插入一段js代码，js会在页面生成一个赏的按钮，点击后就弹出带有二维码的打赏页面了。
小灰灰博客还是在使用https的时候就用过这个玩意，还利用七牛对百度打赏进行了https化。但是有2个弊端，驱使着我自己DIY一个：
1、使用百度打赏之后，打开博客网页经常会弹出一个连接超时的提示，甚是烦人；
2、百度打赏由于是实时调用百度在线资源，感觉点击后延迟很明显，给人迟钝的感觉。
二、DIY版本
知道了它的原理，自己就可以DIY一个更丰富、灵活的打赏组件了！
①、js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | /*! * 仿百度打赏的博客打赏组件 * Date: 2017-08-10 11:00 * (c) 2013-2017 小灰灰博客保留所有权利. * * 给博客添加模仿百度打赏的打赏组件 * 小灰灰博客基于百度打赏的原创功能，引用或转载请保留版权申明，谢谢合作！ */ (function($){ var id = Date.now(); if($("#STYLE_"+id).size()<1){ document.writeln("<style id='STYLE_"+id+"'>@CHARSET \"UTF-8\";*{-webkit-tap-highlight-color:rgba(255,0,0,0)}.box-size{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.ds-hide{display:none}.ds-reward-stl{font-family:\"microsoft yahei\";text-align:center;background:#f1f1f1;padding:10px 0;color:#666;margin:20px auto;width:90%}#dsRewardBtn {padding: 0;margin: 0;position: absolute;background: #7ab951;left: 110px;top: -7px;width: 50px;height: 50px;font-size: 16px;font-weight: 600;line-height: 43px;display: block;border: 4px solid #fff;border-radius: 40px;color: #FFF;}#dsRewardBtn span{display:inline-block;width:50px;height:50px;border-radius:100%;line-height:58px;color:#fff;font:400 25px/50px 'microsoft yahei';background:#FEC22C}#dsRewardBtn:hover{cursor:pointer}.ds-dialog{z-index:9999;width:100%;height:100%;position:fixed;top:0;left:0;border:1px solid #d9d9d9}.ds-dialog .ds-close-dialog{position:absolute;top:15px;right:20px;font:400 24px/24px Arial;width:20px;height:20px;text-align:center;padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;font-weight:700;line-height:20px;opacity:.6;filter:alpha(opacity=20)}.ds-dialog .ds-close-dialog:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.6;filter:alpha(opacity=40)}.ds-dialog-bg{position:absolute;opacity:.6;filter:alpha(opacity=30);background:#000;z-index:9999;left:0;top:0;width:100%;height:100%}.ds-dialog-content{font-family:'microsoft yahei';font-size:14px;background-color:#FFF;position:fixed;padding:0 20px;z-index:10000;overflow:hidden;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,.3);box-shadow:0 3px 7px rgba(0,0,0,.3);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ds-dialog-pc{width:390px;height:380px;top:50%;left:50%;margin:-190px 0 0 -195px}.ds-dialog-wx{width:90%;height:280px;top:50%;margin-top:-140px;margin-left:5%}.ds-dialog-content h5{text-align:left;font-size:15px;font-weight:700;margin:15px 0;color:#555}.ds-payment-way{text-align:left}.ds-payment-way label{cursor:pointer;font-weight:400;display:inline-block;font-size:14px;margin:0 15px 0 0;padding:0}.ds-payment-way input[type=radio]{vertical-align:middle;margin:-2px 5px 0 0}.ds-payment-img{margin:15px 0;text-align:center}p.ds-pay-info{font-size:15px;margin:0 0 10px}.ds-pay-money{font-size:14px;margin-top:10px}.ds-pay-money p{margin:0}.ds-pay-money .ds-pay-money-sum{margin-bottom:4px}.ds-payment-img img{margin:0 auto;width:185px;}.ds-payment-img #qrCode_1{display:none}.ds-payment-img .qrcode-border{margin:0 auto}.ds-payment-img .qrcode-tip{width:48.13px;position:relative;margin:0 auto;font-size:12px;font-weight:700;background:#fff;height:15px;line-height:15px;margin-top:-12px}#qrCode_0 .qrcode-tip{color:#3caf36}#qrCode_3 .qrcode-tip{color:#e10602}.ds-payment-img #qrCode_3{display:none}.ds-payment-img #qrCode_2{display:none}#qrCode_2 .qrcode-tip{color:#eb5f01}#qrCode_1 .qrcode-tip{color:#6699cc}.wx_qrcode_container{text-align:center}.wx_qrcode_container h2{font-size:17px}.wx_qrcode_container p{font-size:14px}.ds-reward-stl{text-align:left;background:#fff;padding:0;color:#666;margin:0;width:0}#dsRewardBtn span{position:absolute;left:115px;top:-7px;background:#7ab951;width:50px;height:50px;font-size:16px;font-weight:600;line-height:43px;border:4px solid #fff;border-radius:40px}.share-s a{margin-top:-25px} .ds-payment-img .qrcode-border{border-radius: 29.97px; width: 236.89px; height: 236.89px; padding: 18.05px; margin-top: 25.53px; } </style>"); } function write(){ var content = "<div class=\"ds-dialog\" id='PAY_"+id+"'>" +" <div class=\"ds-dialog-bg\" onclick=\"PaymentUtils.hide();\"></div>" +" <div class=\"ds-dialog-content ds-dialog-pc \">" +" <i class=\"ds-close-dialog\">×</i>" +" <h5>选择打赏方式：</h5>" +" <div class=\"ds-payment-way\">" +" <label for=\"wechat\"><input type=\"radio\" id=\"wechat\" class=\"reward-radio\" value=\"0\" checked=\"checked\" name=\"reward-way\" />微信红包</label>" + " <label for=\"qqqb\"><input type=\"radio\" id=\"qqqb\" class=\"reward-radio\" value=\"1\" name=\"reward-way\" />QQ钱包</label>" +" <label for=\"alipay\"><input type=\"radio\" id=\"alipay\" class=\"reward-radio\" value=\"2\" name=\"reward-way\" />支付宝</label>" + " <label for=\"bdBaifubao\"><input type=\"radio\" id=\"bdBaifubao\" class=\"reward-radio\" value=\"3\" name=\"reward-way\" />百度钱包</label>" + " </div>" + " <div class=\"ds-payment-img\">" + " <div class=\"qrcode-img qrCode_0\" id=\"qrCode_0\">" + " <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(60, 175, 54\">" + " <img class=\"qrcode-img qrCode_0\" id=\"qrCode_0\" src=\"//***.com/wp-content/themes/begin/img/wechat.jpg\" />" + " </div>" + " <p class=\"qrcode-tip\">打赏</p>" + " </div>" + " <div class=\"qrcode-img qrCode_1\" id=\"qrCode_1\">" + " <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(102, 153, 204\">" + " <img class=\"qrcode-img qrCode_1\" id=\"qrCode_1\" src=\"//***.com/wp-content/themes/begin/img/qqqb.png\" />" + " </div>" + " <p class=\"qrcode-tip\">打赏</p>" + " </div>" + " <div class=\"qrcode-img qrCode_2\" id=\"qrCode_2\">" + " <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(235, 95, 1\">" + " <img class=\"qrcode-img qrCode_2\" id=\"qrCode_2\" src=\"//***.com/wp-content/themes/begin/img/zfb.png\" />" + " </div>" + " <p class=\"qrcode-tip\">打赏</p>" + " </div>" + " <div class=\"qrcode-img qrCode_3\" id=\"qrCode_3\">" + " <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(225, 6, 2\">" + " <img class=\"qrcode-img qrCode_3\" id=\"qrCode_3\" src=\"//***.com/wp-content/themes/begin/img/bdqb.png \" />" + " </div>" + " <p class=\"qrcode-tip\">打赏</p>" + " </div>" + " </div>" + " </div>" + " </div> "; $("body").append(content); } $(function(){ write(); var $pay = $("#PAY_"+id).hide(); $pay.find(".ds-payment-way").bind("click",function(){ $pay.find(".qrcode-img").hide(); $pay.find(".qrCode_"+$pay.find("input[name=reward-way]:checked").val()).show(); }); $pay.find(".ds-close-dialog").bind("click",function(){ $pay.hide(); }); }); var PaymentUtils = window['PaymentUtils']={}; PaymentUtils.show=function(){ $("#PAY_"+id).show(); } PaymentUtils.hide=function(){ $("#PAY_"+id).hide(); } })(jQuery); |
复制以上代码，将代码中的如下地址替换你对应的付款二维码图片，然后保存为js文件，比如ds.js：
1 2 3 4 | 微 信 ：http://***.xiaohuihui.net/wp-content/themes/begin/img/wechat.jpg QQ钱包 ：http://***.xiaohuihui.net/wp-content/themes/begin/img/qqqb.png 支付宝 ：http://***.xiaohuihui.net/wp-content/themes/begin/img/zfb.png 百度钱包 ：http://***.xiaohuihui.net/wp-content/themes/begin/img/bdqb.png |
Ps：怎么制作或获取这些二维码图片，我就不啰嗦了，相信大家都搞的定。
最后上传到网站存放js文件的目录，比如WordPress主题目录，最终网站前台可以访问到这个js即可：
比如：http://xxx.com/wp-content/themes/begin/js/ds.js
②、html部分
1 2 3 4 5 | <div class="ds-reward-stl"> <button id="dsRewardBtn" onclick="PaymentUtils.show();">赏</button> </div> <!-- 下面的js地址修改和上一步保存的js地址一致 --> |
将上述html代码按照实际情况修改后，添加到博客主题想要放置打赏按钮的地方，比如文章底部。具体是哪个文件，不同主题都是不同的，所以这里我没法告诉你！想要折腾网站总是要有一定基础的。
全部完成之后，刷新网页应该可以看到效果了，不过我上面的js代码中的css样式只是适配了Begin主题，其他网站用上后是方的还是圆的，就只能靠自己去调试CSS代码了。
三、Begin适配
如果你用的和我一样的主题，那就简单了。还是将上述js代码保存为ds.js文件，丢到Begin主题的js目录，然后修改 begin/inc/social.php 文件，找到如下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <span class="shang-p"> <span class="shang-s"> <a title="<?php echo zm_get_option('alipay_t'); ?>"> <?php echo zm_get_option( 'alipay_name');?> </a> </span> </span> <?php}else{?> <span class="tipso_style" id="tip-p" data-tipso=' <div id="shang"> <div class="shang-main"> <?php if ( zm_get_option(' alipay_h ') == ' ' ) { ?><?php } else { ?><h4><i class="fa fa-heart" aria-hidden="true"></i> <?php echo zm_get_option('alipay_h '); ?></h4><?php } ?> <?php if ( zm_get_option('qr_a ') == ' ' ) { ?> <?php } else { ?> <div class="shang-img"> <img src="<?php echo zm_get_option('qr_a '); ?>" /> <?php if ( zm_get_option('alipay_z ') == ' ' ) { ?><?php } else { ?><h4><?php echo zm_get_option('alipay_z '); ?></h4><?php } ?> </div> <?php } ?> <?php if ( zm_get_option('qr_b ') == ' ' ) { ?> <?php } else { ?> <div class="shang-img"> <img src="<?php echo zm_get_option('qr_b '); ?>" /> <?php if ( zm_get_option('alipay_w ') == ' ' ) { ?><?php } else { ?><h4><?php echo zm_get_option('alipay_w '); ?></h4><?php } ?> </div> <?php } ?> <div class="clear"></div> </div> </div>'> <span class="shang-s"> <a title="<?php echo zm_get_option('alipay_t'); ?>"> <?php echo zm_get_option( 'alipay_name');?> </a> </span> </span> <?php}?> </span> |
替换为（注意备份原文件！）：
1 2 3 4 5 6 7 8 | <span class="shang-p"> <div class="shang-s"> <a onclick="PaymentUtils.show();" style="cursor:pointer">赏</a> </div> </span> <!-- js地址自行修改下 --> <script type="text/javascript" src="http://xxx.com/wp-content/themes/begin/js/ ds.js"></script> |
四、其他说明
很明显，小灰灰博客分享的这个打赏不但解决了百度打赏的2个问题，还能够随便DIY了，代码默认集成了4种收款方式，如果你觉得多了或少了，也可以自行DIY代码去折腾，前提是你必须懂一点html和js代码，否则错排了就别喷我了！
另外，不管是Begin主题还是其他任何网站，都是可以使用的，但是打赏按钮的样式和位置就只能靠自己调试css代码了。
不啰嗦了，自己去折腾吧！觉得文章有用的话，有钱的可以打赏，没钱的可以点赞，不怕一万多，不嫌一块少......
