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

摘要

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

引言

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

打赏插件

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

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

       https://github.com/greedying/tctip

       在此对作者表示感谢。

JS权限

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

       Js权限申请入口

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

<script src="//static.tctip.com/tctip-1.0.2.min.js"></script>

<script>

new tctip({

top: '20%',

button: {

id: 9,

type: 'dashang',

},

list: [

{

type: 'wechat',

qrImg: 'https://files.cnblogs.com/files/flyfire-cn/wechat.gif',

}

, {

type: 'alipay',

qrImg: 'https://files.cnblogs.com/files/flyfire-cn/alipay.gif',

}

, {

type: 'CodeForAlipay',

icon:'https://files.cnblogs.com/files/flyfire-cn/CodeIcon.gif',

qrImg: 'https://files.cnblogs.com/files/flyfire-cn/payCode.gif',

name:'红包码',

desc:' 打开支付宝扫一扫  同学,领个红包再走'

}

]

}).init()

</script>

      保存设置。

Https打赏失效问题

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

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

     打赏功能设置成功。

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

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

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

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

     发现文章访问地址如下

     https://www.geek-share.com/detail/2761158320.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代码中体现。

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

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