打赏插件代码配置项

打赏插件配置项

属性默认值说明
uid(必填)-您的账户uid,打赏插件代码获取页面会自动生成。但建议完成部署后还是点击打赏确认正确显示了自己的账号头像。
autoPopuptrue打赏插件是否在完整显示时自动打开
html-如希望使用自定义的HTML结构,可根据下方打赏按钮模板进行修改。(模板中的 {{url}} 会基于 uid 自动替换为对应的打赏地址)。
image-打赏按钮图片的URL地址
imageWidth50打赏按钮图片宽度
imageHeight50打赏按钮图片高度
noHtmlfalse是否生成打赏HTML,true 为不显示,false 为显示
text-设置显示在打赏按钮上方的引导文本内容

打赏按钮模板

<div style="text-align: center; padding: 20px;">
  <div style="font-size: 12px; color: #666; margin-bottom: 10px;">您的打赏帮助我们变得更好,谢谢支持!</div>
  <div>
    <a class="zhi12-popup zhi12-widget zhi12-auto-popup" rel="nofollow" href="{{url}}" target="_blank">
      <img src="https://www.zhi12.com/sites/all/libraries/shang/shang.png" alt="打赏" width="50" height="50"></a>
  </div>
</div>

配置示例

打赏插件(默认配置)

See the Pen 打赏插件(默认) by zhi12 (@zhi12) on CodePen.

 

打赏插件(自定义引导文本、图标及图标大小)

See the Pen 打赏插件(修改文本和图标) by zhi12 (@zhi12) on CodePen.

 

打赏插件(自定义打赏元素HTML模板)

如果不希望使用默认生成的打赏元素,可以通过使用 html 属性自定义打赏元素模版。

See the Pen 打赏插件(修改文本和图标) by zhi12 (@zhi12) on CodePen.

 

打赏插件(noHtml 模式)

通过设置 noHtml: true 属性,打赏插件不自行生成打赏链接,而是需要使用者自行在模板中编写相应的HTML代码。适合自定义打赏元素和需要输出多个打赏元素的情况。打赏插件会自动识别 zhi12-popup 类的链接,并以弹出层的形式打开(窗口过小时不使用弹出层)。

说明:使用时需注意为链接添加 zhi12-popup 类,以及设置正确的 打赏(href)地址。

See the Pen 打赏插件(noHTML模式) by zhi12 (@zhi12) on CodePen.