博客园添加打赏功能只需简单四步

1.准备微信和支付宝的图片

  进入收款页面然后保存图片即可

2.将支付图片上传到七牛云或者博客园文件

  七牛云比较简单/博客园文件不支持png和jpg只支持bmp,所以将图片转为bmp格式后再上传到博客园

 

3.上传js文件,第一个为js插件的github地址,第二个是js链接,可以直接拿过去使用

tctip的GitHub

https://files.cnblogs.com/files/wangyang0210/tctip-1.0.0.min.js

 

4.配置

在页脚配置

 

复制代码
<!-- 支付赞赏 -->
<!-- js文件引入 --> <script type="text/javascript" src="https://files.cnblogs.com/files/wangyang0210/tctip-1.0.0.min.js"></script> <script> new tctip({ top: '20%', button: { id: 2, type: 'zanzhu', }, list: [ { type: 'alipay', qrImg: 'https://files.cnblogs.com/files/wangyang0210/aipay.bmp' //替换成自己的支付宝 }, { type: 'wechat', qrImg: 'https://files.cnblogs.com/files/wangyang0210/weixin.bmp' //替换成自己的微信 } ] }).init() </script>
复制代码

参数详解

复制代码
参数说明
top

类型: String
默认值: 10%
含义: 插件顶端距离页面最上面的距离
备注: 格式如 100px或者10%
button

类型: Object,包含id和type两个子数组
id:
类型: Number
默认值: 1
含义: 代表图片颜色
备注: 取值范围为1-9
type:
类型: String
默认值: dashang
含义: 按钮上的汉字,有打赏和赞助两种
备注: 只能取dashang或者zanzhu
list

类型: Array
默认值: []
含义: 重点配置,右侧打赏显示,不能为空
备注: 一个数组,最多传入五个元素,每个元素又有如下几项陪配置
type:
类型: String
默认值: 无
含义: 打赏类型
备注: 系统自带四种默认type,alipay,wechat,bitcon,tenpay,如果不是这四种,可以随意写
qrImg:
类型: String
默认值: 无
含义: 二维码图片地址
备注: 尽量裁剪图片周边的空白。重要但是非必传
qrContent:
类型: String
默认值: 无
含义: 二维码内容
备注: 和qrImg二者必须传一个。如果传入本参数,插件自动生成二维码
icon:
类型: String
默认值: 无
含义: 图标,列入支付宝图标
备注: 当type为系统默认四种之一时,本参数可省略
name:
类型: String
默认值: 无
含义: 支付名称,例如支付宝、微信等
备注: 当type为系统默认四种之一时,本参数可省略
desc:
类型: String
默认值: 无
含义: 二维码下面的一句短语,类似大爷行行好之类的
备注: 当type为系统默认四种之一时,本参数可省略
stat

类型: Boolean
默认值: true
含义: 是否上报,用于作者统计使用者
备注: 本参数只是方便作者统计插件使用情况,可视情况关闭
复制代码

 

posted @   。思索  阅读(776)  评论(2编辑  收藏  举报
编辑推荐:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 一个费力不讨好的项目,让我损失了近一半的绩效!
点击右上角即可分享
微信分享提示