博客园开通打赏功能以及HTTPS打赏失效的探究

-玩转打赏功能
摘要

       使用打赏脚本插件开通自己博客的打赏功能，研究并解决了打赏功能插件在https下失效的问题。

引言

      长期混迹于博客园，最近在博客园开通了自己的博客，看到许多大佬博客都有打赏功能，虽然自己注册较晚，发的博文还不多，但每篇都是用心之作，也想开通下自己的打赏功能，以期有人能对自己以资鼓励。

打赏插件

       关于打赏功能，网上一搜，相关的文章很多，但大多介绍得不太完整，需要多篇文章综合汇总，因此本文在此对打赏功能的设置进行一个全面说明。

       打赏功能主要是通过一个tctip的js脚本插件实现，作者已将其开源，开源地址：

       https://github.com/greedying/tctip

       在此对作者表示感谢。

JS权限

       使用这个打赏插件，需要博客系统中开放js脚本运行权限，博客园的博客系统，默认是不允许 js的。开通js权限，需要在博客园的管理设置中进行申请。

       Js权限申请入口

       打开博客园管理后台，找到设置，申请JS权限

 

 

 

       填写申请JS权限原因，提交，然后等待管理员审批开通。

       具体审批放行时间不详，有时可能需要等上好几天。

       如果比较着急，可以尝试给管理员发邮件，通常可以加快审批速度。（笔者就是邮件加急的呵）

       邮箱在此：contact@cnblogs.com

收款二维码

       到微信收付款/支持宝收钱中，保存收款码二维码为图片，将图片上传至电脑。

 

 微信收款码

 

支付宝收款码

 

 

支付宝红包

 

微信赞赏码

       微信新推出一个赞赏码功能，长得是这个样子滴

  微信请长按此图片，选择识别二维码

       同样，上传至电脑。

上传图片文件

       在电脑中，用图片处理软件将收款码、红包码、赞赏码裁剪为合适大小，最好长/宽相同，保存为BMP或GIF(建议保存为GIF，具有压缩功能，文件较小，网络加载较快)。

       在博客管理后台，上传文件

 

 

 

启用打赏插件

      在设置中的面首Html代码框中，复制如下代码填入：

1
2
3
View Code

      将代码中的图片链接换成你自己上传的图片文件链接呵。

      保存设置。

 

Https打赏失效问题

     我们在http模式下访问自己的博客，bingo,博客右侧，出现了打赏功能按钮。

 

     移动鼠标到打赏按钮，出现如下打赏界面

 

     打赏功能设置成功。

     我们点击一篇文章，进入文章页面，咦，打赏按钮怎么消失了？

     这是怎么回事？难道打赏插件针对文章无效？

     文章页面和首页有什么不同吗？

     带着这些问题，笔者进行了一翻探究。

     发现文章访问地址如下

     https://www.cnblogs.com/flyfire-cn/p/10381298.html

     之前的http变成了https了。

 

     前端的同学大多应该知道，浏览器为了安全起见，默认是不允许在HTTPS里面引用HTTP资源的。什么，你不知道？你个假前端。（笔者也是问了度娘才知道的呵）

      将我们后台代码中

     

     替换成

     

     保存，测试，BINGO。

     打完收工。

 各位同学，好文要赞，如果本文对你有用，不要吝啬你们的赞赏呵。

本博客顺带加上了支付宝领红包功能，具体实现已在JS代码中体现。

同学，拿出你的手机，打开支付宝，领个红包再走吧。

 

     如果您正使用微信查看本博客的文章，文章底部会显示微信赞赏码哦。想知道怎么实现吗？先赞赏一下吧。