打赏插件tctip使用方法

tctip是什么

效果演示：http://greedying.com/tctip/

效果截图

准备工作

保存微信收款码：微信 => 右上角+号 => 收付款 => 二维码收款 => 保存二维码

保存支付宝收款码：支付宝 => 付钱/收钱 => 收钱 => 保存收钱码

生成收款码的网页url

你可以建一个新随笔，将这两种图片上传到博客园生成url。

使用markdown编辑器，在编辑页面点击右边的图片按钮上传本地图片

这样我们就拿到收款码的网页url了。

方法二

第一步，引入js

<script>
   new tctip({
    top: '20%',
    button: {
      id: 9,
      type: 'dashang',
    },
    list: [
      {
        type: 'alipay',
        qrImg: 'https://img2020.cnblogs.com/blog/2233039/202102/2233039-20210206194918144-1753886908.jpg'
      }, {
        type: 'wechat',
        qrImg: 'https://img2020.cnblogs.com/blog/2233039/202102/2233039-20210206194905014-1211368553.png'
      }, {
        type: 'bitcoin',
        qrContent: ''
      }
    ]
  }).init()
</script>

将代码中的qrImg替换为自己收款码的网页url即可，type为alipay的是支付宝打赏，type为wechat的是微信打赏，type为bitcoin的是比特币打赏。

复制以上两段代码粘贴到 博客园 => 管理 => 设置中的 博客侧边栏公告（需要支持js权限） 或者 页首 HTML 代码 或者 页脚 HTML 代码任意位置都可以。最后保存刷新就可以查看效果了。

参数说明

  • 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为系统默认四种之一时，本参数可省略

出处：https://www.cnblogs.com/an-shiguang/p/14382903.html

博客园管理

相关

标签