给自己的博客园添加打赏（赞助）功能

　　现在比较流行打赏功能，很多应用或者博客都有自己的打赏功能，但是博客园目前还没有该功能，那么如何给自己的博客添加打赏功能呢？当然是越简便越好了，然后就发现了一个第三方打赏插件，介绍给大家，使用上非常便捷。插件叫tctip，大家可以在GitHub（https://github.com/greedying/tctip）上获取。插件的原理其实也很简单，通过JS生成一个右侧的侧边栏，然后把自己的收款码放进去就可以了。效果如下：

 

　　该插件有两个大版本，新版本使用上更加便捷，下面以博客园为例，说一下新版本的使用方法，当然这也适用于你自建的博客。

 

一、申请JS权限

　　博客园使用JS需要申请权限，如果之前申请过就不需要了，如果是自建博客的也可以略过这一步。

1、在“我的博客”→管理→设置→“博客侧边栏公告”的位置，显示“支持JS代码”即可。

 

二、准备收款码图片

1、用自己的支付宝、微信生成收款码（注意！是收款码！！！不是付款码！！！），然后裁剪出其中的二维码即可。

2、将收款码图片上传至网络，拿到URL地址，如果是博客园，可以通过“我的博客”→管理→文件，上传收款码，点击收款码就可以拿到图片地址。

PS：博客园上传文件只支持bmp，所以需要将图片后缀修改为bmp格式。

 

三、添加插件代码

1、将下面代码根据自己的需求做调整后，添加到“我的博客”→管理→设置→页首Html代码，保存完刷新页面即可。

<script src="//static.tctip.com/tctip-1.0.3.min.js"></script>
<script>
new tctip({
    top: '20%',
    button: {
      id: 5,
      type: 'dashang',
    },
    list: [
      {
        type: 'alipay',
        qrImg: 'https://files.cnblogs.com/files/pcheng/alipay.bmp'
      }, {
        type: 'wechat',
        qrImg: 'https://files.cnblogs.com/files/pcheng/wechat.bmp'
      }
    ]
  }).init();
</script>

参数说明：

（1）top：即该侧边栏插件距离右上方的百分比。

（2）button的id：定义按钮的颜色，目前可选的如下：

（3）button的type：定义按钮上的文字，目前可选的为，dashang=打赏、zanzhu=赞助。

（4）list：定义多个收款码对象，除了上面的支付宝微信，还可以添加财付通、比特币等几种。

（5）list的type：定义收款码种类。目前可选的为，alipay=支付宝、wechat=微信、tenpay=财付通、bitcoin=比特币，等几种。

（6）list的qrImg：定义收款码图片的URL地址。即第二步中准备的内容。

 

四、效果如下

　　如果刷新没有显示，可以打开浏览器的控制台，看下是否有报错信息（踩过的坑都放在最后一段）。

 

五、更多自定义调整

　　其实功能实现这里已经讲完啦。如果是自建博客，或者喜欢自己鼓捣的童鞋，可以去GitHub下载源码，然后根据自己的喜好进行调整。主要是调整tctip-1.0.3.min.js文件里的内容。调整完后，通过步骤二上传该文件，然后将步骤三第一行中的引用，调整为你上传的文件即可。

 

注意！前方有坑：

1、博客园目前引用资源需要支持https，插件新版本的官方资源是OK的，老版本插件用官方资源的，可能会有问题，需要自己上传JS来引用。

2、目前GitHub的1.0.4版本样式有点问题，侧边栏跑到左边且变形，所以本文使用了1.0.3的版本。

 

总结：

　　看，是不是非常便捷，总的来说只需要嵌入一段JS代码到自己的博客即可。童鞋们觉得有用，就留言or关注or打赏一下吧，多少无所谓，每一分都是鼓励和支持！谢谢！

 

 

2020-8-12 更新：

　　最近发现这个插件加载不了了。经过检查发现，是因为加载js的时候，博客园自动添加了refer参数，导致js延迟加载。需要把第三步的脚本从“页首Html代码”移动到“页脚HTML代码”就可以了。