博客園開通打賞功能以及HTTPS打賞失效的探究 -玩轉打賞功能

博客園開通打賞功能以及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。

     打完收工。