博客园开通打赏功能以及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。

     打完收工。