部落格園開通打賞功能及https下打賞失效的探究
部落格園開通打賞功能以及HTTPS打賞失效的探究
-玩轉打賞功能
摘要
使用打賞指令碼外掛開通自己部落格的打賞功能，研究並解決了打賞功能外掛在https下失效的問題。
引言
長期混跡於部落格園，最近在部落格園開通了自己的部落格，看到許多大佬部落格都有打賞功能，雖然自己註冊較晚，發的博文還不多，但每篇都是用心之作，也想開通下自己的打賞功能，以期有人能對自己以資鼓勵。
打賞外掛
關於打賞功能，網上一搜，相關的文章很多，但大多介紹得不太完整，需要多篇文章綜合彙總，因此本文在此對打賞功能的設定進行一個全面說明。
打賞功能主要是通過一個tctip的js指令碼外掛實現，作者已將其開源，開源地址：
https://github.com/greedying/tctip
在此對作者表示感謝。
JS許可權
使用這個打賞外掛，需要部落格系統中開放js指令碼執行許可權，部落格園的部落格系統，預設是不允許 js的。開通js許可權，需要在部落格園的管理設定中進行申請。
Js許可權申請入口
開啟部落格園管理後臺，找到設定，申請JS許可權
填寫申請JS許可權原因，提交，然後等待管理員審批開通。
具體審批放行時間不詳，有時可能需要等上好幾天。
如果比較著急，可以嘗試給管理員發郵件，通常可以加快審批速度。（筆者就是郵件加急的呵）
郵箱在此：[email protected]
收款二維碼
到微信收付款/支援寶收錢中，儲存收款碼二維碼為圖片，將圖片上傳至電腦。
微信收款碼
支付寶收款碼
支付寶紅包
微信讚賞碼
微信新推出一個讚賞碼功能，長得是下面這個樣子滴
微信請長按此圖片，選擇識別二維碼
同樣，上傳至電腦。
上傳圖片檔案
在電腦中，用圖片處理軟體將收款碼、紅包碼、讚賞碼裁剪為合適大小，最好長/寬相同，儲存為BMP或GIF(建議儲存為GIF，具有壓縮功能，檔案較小，網路載入較快)。
在部落格管理後臺，上傳檔案
啟用打賞外掛
在設定中的面首Html程式碼框中，複製如下程式碼填入：
1 <script src="//static.tctip.com/tctip-1.0.2.min.js"></script>
2
3<script>
4
5new tctip({
6
7top: '20%',
8
9button: {
10
11id: 9,
12
13type: 'dashang',
14
15},
16
17list: [
18
19{
20
21type: 'wechat',
22
23qrImg: 'https://files.cnblogs.com/files/flyfire-cn/wechat.gif',
24
25}
26
27, {
28
29type: 'alipay',
30
31qrImg: 'https://files.cnblogs.com/files/flyfire-cn/alipay.gif',
32
33}
34
35, {
36
37type: 'CodeForAlipay',
38
39icon:'https://files.cnblogs.com/files/flyfire-cn/CodeIcon.gif',
40
41qrImg: 'https://files.cnblogs.com/files/flyfire-cn/payCode.gif',
42
43name:'紅包碼',
44
45desc:' 開啟支付寶掃一掃同學,領個紅包再走'
46
47}
48
49]
50
51}).init()
52
53</script>
View Code
將程式碼中的圖片連結換成你自己上傳的圖片檔案連結呵。
儲存設定。
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程式碼中體現。
同學，拿出你的手機，開啟支付寶，領個紅包再走吧。
如果您正使用微信檢視本部落格的文章，文章底部會顯示微信讚賞碼哦。想知道怎麼實現嗎？先讚賞一下吧。