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

View Code

      將代碼中的圖片連接換成你本身上傳的圖片文件連接呵。

      保存設置。

 

Https打賞失效問題

     咱們在http模式下訪問本身的博客，bingo,博客右側，出現了打賞功能按鈕。

 

     移動鼠標到打賞按鈕，出現以下打賞界面

 

     打賞功能設置成功。

     咱們點擊一篇文章，進入文章頁面，咦，打賞按鈕怎麼消失了？

     這是怎麼回事？難道打賞插件針對文章無效？

     文章頁面和首頁有什麼不一樣嗎？

     帶着這些問題，筆者進行了一翻探究。

     發現文章訪問地址以下

     http://www.javashuo.com/article/p-crknmtvi-kg.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代碼中體現。

同窗，拿出你的手機，打開支付寶，領個紅包再走吧。

 

     若是您正使用微信查看本博客的文章，文章底部會顯示微信讚揚碼哦。想知道怎麼實現嗎？先讚揚一下吧。