給本身的博客園添加打賞（贊助）功能

　　如今比較流行打賞功能，不少應用或者博客都有本身的打賞功能，可是博客園目前尚未該功能，那麼如何給本身的博客添加打賞功能呢？固然是越簡便越好了，而後就發現了一個第三方打賞插件，介紹給你們，使用上很是便捷。插件叫tctip，你們能夠在GitHub（https://github.com/greedying/tctip）上獲取。插件的原理其實也很簡單，經過JS生成一個右側的側邊欄，而後把本身的收款碼放進去就能夠了。效果以下：

 

　　該插件有兩個大版本，新版本使用上更加便捷，下面以博客園爲例，說一下新版本的使用方法，固然這也適用於你自建的博客。

 

1、申請JS權限

　　博客園使用JS須要申請權限，若是以前申請過就不須要了，若是是自建博客的也能夠略過這一步。

一、在「個人博客」→管理→設置→「博客側邊欄公告」的位置，顯示「支持JS代碼」便可。

 

2、準備收款碼圖片

一、用本身的支付寶、微信生成收款碼（注意！是收款碼！！！不是付款碼！！！），而後裁剪出其中的二維碼便可。

二、將收款碼圖片上傳至網絡，拿到URL地址，若是是博客園，能夠經過「個人博客」→管理→文件，上傳收款碼，點擊收款碼就能夠拿到圖片地址。

PS：博客園上傳文件只支持bmp，因此須要將圖片後綴修改成bmp格式。

 

3、添加插件代碼

一、將下面代碼根據本身的需求作調整後，添加到「個人博客」→管理→設置→頁首Html代碼，保存完刷新頁面便可。

 1 <script src="//static.tctip.com/tctip-1.0.3.min.js"></script>
 2 <script>
 3 new tctip({
 4     top: '20%',
 5     button: {
 6       id: 5,
 7       type: 'dashang',
 8     },
 9     list: [
10       {
11         type: 'alipay',
12         qrImg: 'https://files.cnblogs.com/files/pcheng/alipay.bmp'
13       }, {
14         type: 'wechat',
15         qrImg: 'https://files.cnblogs.com/files/pcheng/wechat.bmp'
16       }
17     ]
18   }).init();
19 </script>

參數說明：

（1）top：即該側邊欄插件距離右上方的百分比。

（2）button的id：定義按鈕的顏色，目前可選的以下：

（3）button的type：定義按鈕上的文字，目前可選的爲，dashang=打賞、zanzhu=贊助。

（4）list：定義多個收款碼對象，除了上面的支付寶微信，還能夠添加財付通、比特幣等幾種。

（5）list的type：定義收款碼種類。目前可選的爲，alipay=支付寶、wechat=微信、tenpay=財付通、bitcoin=比特幣，等幾種。

（6）list的qrImg：定義收款碼圖片的URL地址。即第二步中準備的內容。

 

4、效果以下

　　若是刷新沒有顯示，能夠打開瀏覽器的控制檯，看下是否有報錯信息（踩過的坑都放在最後一段）。

 

5、更多自定義調整

　　其實功能實現這裏已經講完啦。若是是自建博客，或者喜歡本身鼓搗的童鞋，能夠去GitHub下載源碼，而後根據本身的喜愛進行調整。主要是調整tctip-1.0.3.min.js文件裏的內容。調整完後，經過步驟二上傳該文件，而後將步驟三第一行中的引用，調整爲你上傳的文件便可。

 

注意！前方有坑：

一、博客園目前引用資源須要支持https，插件新版本的官方資源是OK的，老版本插件用官方資源的，可能會有問題，須要本身上傳JS來引用。

二、目前GitHub的1.0.4版本樣式有點問題，側邊欄跑到左邊且變形，因此本文使用了1.0.3的版本。

 

總結：

　　看，是否是很是便捷，總的來講只須要嵌入一段JS代碼到本身的博客便可。童鞋們以爲有用，就留言or關注or打賞一下吧，多少無所謂，每一分都是鼓勵和支持！謝謝！