博客園開通打賞功能以及HTTPS打賞失效的探究
-玩轉打賞功能
摘要
使用打賞腳本插件開通自己博客的打賞功能，研究並解決了打賞功能插件在https下失效的問題。
引言
長期混跡於博客園，最近在博客園開通了自己的博客，看到許多大佬博客都有打賞功能，雖然自己注冊較晚，發的博文還不多，但每篇都是用心之作，也想開通下自己的打賞功能，以期有人能對自己以資鼓勵。
打賞插件
關於打賞功能，網上一搜，相關的文章很多，但大多介紹得不太完整，需要多篇文章綜合匯總，因此本文在此對打賞功能的設置進行一個全面說明。
打賞功能主要是通過一個tctip的js腳本插件實現，作者已將其開源，開源地址：
https://github.com/greedying/tctip
在此對作者表示感謝。
JS權限
使用這個打賞插件，需要博客系統中開放js腳本運行權限，博客園的博客系統，默認是不允許 js的。開通js權限，需要在博客園的管理設置中進行申請。
Js權限申請入口
打開博客園管理后台，找到設置，申請JS權限
填寫申請JS權限原因，提交，然后等待管理員審批開通。
具體審批放行時間不詳，有時可能需要等上好幾天。
如果比較着急，可以嘗試給管理員發郵件，通常可以加快審批速度。
郵箱在此：contact@cnblogs.com
打賞二維碼
到微信收付款/支持寶收錢中，保存收款碼二維碼為圖片，將圖片上傳至電腦。
微信打賞碼
支付寶打賞碼
支付寶紅包碼
微信贊賞碼
微信新推出一個贊賞碼功能，長得是下面這個樣子滴
微信請長按此圖片，選擇識別二維碼
同樣，上傳至電腦。
上傳圖片文件
在電腦中，用圖片處理軟件將收款碼、紅包碼、贊賞碼裁剪為合適大小，最好長/寬相同，保存為BMP或GIF(建議保存為GIF，具有壓縮功能，文件較小，網絡加載較快)。
在博客管理后台，上傳文件
啟用打賞插件
在設置中的面首Html代碼框中，復制如下代碼填入：
1 <script src="//static.tctip.com/tctip-1.0.2.min.js"></script> 2 3 <script> 4 5 new tctip({ 6 7 top: '20%', 8 9 button: { 10 11 id: 9, 12 13 type: 'dashang', 14 15 }, 16 17 list: [ 18 19 { 20 21 type: 'wechat', 22 23 qrImg: 'https://files.cnblogs.com/files/flyfire-cn/wechat.gif', 24 25 } 26 27 , { 28 29 type: 'alipay', 30 31 qrImg: 'https://files.cnblogs.com/files/flyfire-cn/alipay.gif', 32 33 } 34 35 , { 36 37 type: 'CodeForAlipay', 38 39 icon:'https://files.cnblogs.com/files/flyfire-cn/CodeIcon.gif', 40 41 qrImg: 'https://files.cnblogs.com/files/flyfire-cn/payCode.gif', 42 43 name:'紅包碼', 44 45 desc:' 打開支付寶掃一掃 同學,領個紅包再走' 46 47 } 48 49 ] 50 51 }).init() 52 53 </script>
將代碼中的圖片鏈接換成你自己上傳的圖片文件鏈接呵。
保存設置。
Https打賞失效問題
我們在http模式下訪問自己的博客，bingo,博客右側，出現了打賞功能按鈕。
移動鼠標到打賞按鈕，出現如下打賞界面
打賞功能設置成功。
我們點擊一篇文章，進入文章頁面，咦，打賞按鈕怎么消失了？
這是怎么回事？難道打賞插件針對文章無效？
文章頁面和首頁有什么不同嗎？
帶着這些問題，筆者進行了一翻探究。
發現文章訪問地址如下
https://www.cnblogs.com/flyfire-cn/p/10381298.html
之前的http變成了https了。
前端的同學大多應該知道，瀏覽器為了安全起見，默認是不允許在HTTPS里面引用HTTP資源的。什么，你不知道？你個假前端。（ ^_^ 筆者也是問了度娘才知道的呵）
將我們后台代碼中
<script src="//static.tctip.com/tctip-1.0.2.min.js"></script>
替換成
<script src="https://static.tctip.com/tctip-1.0.2.min.js"></script>
保存，測試，BINGO。
打完收工。
各位同學，好文要贊，如果本文對你有用，不要吝嗇你們的贊賞呵。
本博客順帶加上了支付寶領紅包功能，具體實現已在JS代碼中體現。
同學，拿出你的手機，打開支付寶，領個紅包再走吧。
如果您正使用微信查看本博客的文章，文章底部會顯示微信贊賞碼哦。想知道怎么實現嗎？先贊賞一下吧。