博客园—打赏功能

全栈程序员-站长 • 2021年11月4日下午9:00 • 未分类 • 阅读 52

转载：http://www.cnblogs.com/wuql/p/6144791.html

最近我和朋友交流的时候，她告诉我她所使用的博客自带打赏功能。

我仔细查看了一下，博客园好像没有自带这个功能。

但是，我看到好多朋友的博客园都使用了“打赏”或“赞助”。所以，我迫不及待的想给自己也加上那么一个插件。

但是，搜索了很多帖子，按照他们的步骤操作后，我的“打赏”功能依旧没有显示。

后来，我才发现自己漏了关键的一步而博主却没说明。

下面给需要的小伙伴分享一下，整个“打赏”功能的实现：（该方法比较方便，不用再去下载插件）

第一步：进入“我的博客”->“管理”->“设置”，往下拉，找到“博客侧边栏公告”后面，申请“JS”使用。博客园—打赏功能

申请成功后显示为这样：

　　　　博客园—打赏功能（我的就是因为没有申请，所以一开始怎么也没有显示。低级错误）

第二步：准备一张【支付宝收款的二维码】和一张【微信收款的二维码】；且这两张图片的格式后缀改为“.bmp”。例如，我自己的支付宝图片名称为“zhifubao.bmp”。并将它们通过“管理”->“文件”，上传至博客文件夹。

第三步：复制我下面这段代码，

<script>
window.tctipConfig = { staticPrefix: "http://static.tctip.com", cssPrefix: "http://static.tctip.com", buttonImageId: 5, buttonTip: "dashang", list:{ alipay: {qrimg: "http://files.cnblogs.com/files/wuql/zhifubao.bmp"}, weixin:{qrimg: "http://files.cnblogs.com/files/wuql/weixin.bmp"}, } }; </script> <script src="http://static.tctip.com/js/tctip.min.js"></script>

你要修改的地方是我用红色和绿色的部分，其中，红色部分是你的博客地址名，实在不知道的话，你可以通过“我的博客”->“管理”->“设置”找到博客园—打赏功能；

绿色的部分就是你刚才上传的图片的名称。请一一对应修改。

第四步：找到“我的博客”->“管理”->“设置”，就是刚才查看博客名的页面，将页面往下拉，找到“页首Html代码”这个位置，将修改好的代码复制进去。

保存就可以啦。

我这种方法比较简单，不用下载插件。如果想要更深的了解，可以访问https://github.com/greedying/tctip这个网址，我就是从这里借鉴的。

以上仅是个人实践后的分享。欢迎补充。

================第三步会出现（已阻止载入混合活动内容****）=======================

解决方法在：将http改为https

<script>
window.tctipConfig = {
staticPrefix: "https://static.tctip.com",
cssPrefix: "https://static.tctip.com",
buttonImageId: 5,
buttonTip: "dashang",
list:{
alipay: {qrimg: "http://files.cnblogs.com/files/lxwphp/zhifubao2.bmp"},
weixin:{qrimg: "http://files.cnblogs.com/files/lxwphp/weixin.bmp"},
}
};
</script>
<script src="https://static.tctip.com/js/tctip.min.js"></script>