前幾天在一個部落格中看到有一個打賞功能。其實簡單說來就是在頁面中加入動態DOM節點，使用的也是簡單的HTML、CSS、JS這些前端的一些簡單知識。在GitHub上有開源的程式碼，這裡稍加改造就可以用在自己的部落格中了。
最簡單的使用方式是在頁面中加入如下JS程式碼:
<script>
window.tctipConfig = {
staticPrefix: "http://static.tctip.com",
buttonImageId: 1,
buttonTip: "zanzhu",
list:{
alipay: {qrimg: "http://tctip.com/img/alipayqr.png"},
weixin:{qrimg: "http://littlebtc.com/images/yeshen.png"},
}
};
</script>
<script src="http://static.tctip.com/js/tctip.min.js"></script>
其中比較重要的是配置有staticPrefix，是原作者自己提供的靜態文件相對路徑，用來存放相對路徑，用來存放相對路徑；list是打賞方式，qrimg是設定打賞方式的二維碼圖片。
接下來是在部落格園中使用。先在本地準備好靜態文件：
JS文件，tctip.min.js；
css樣式文件，myReward.css；
甙支付二維碼，ialipay.css;
甁維碼，ialipay.bmp. alipay.bmp、weixin.bmp；
贊助或打賞按鈕圖片，tab_4.bmp（對應buttonImageId）。
博客園只能上傳bmp圖片，所以要將其他格式圖片修改，然後在自己的博客園後台上傳文件，這樣前面的靜態文件就可以使用剛剛上傳了。
如果使用自己上傳的靜態文件，配置時就不要staticPrefix地址，提供imagePrefix和cssPrefix：
<script>
window.tctipConfig = {
imagePrefix: "图片文件的相对路径",
cssPrefix: "样式文件的相对路径",
//staticPrefix: "http://static.tctip.com",
buttonImageId: 4,
buttonTip: "dashang",
list:{
alipay: { qrimg: "支付宝二维码绝对路径"},
weixin: { qrimg: "微信二维码绝对路径"},
}};
</script>
<script src="js文件绝对路径"></script>
當然如果只是這樣就結束了，就算不上原始碼一下原始碼也無法使用的，其實主要是檔案路徑設定的問題。
打開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處添加上面的設定檔就可以了。
