[個人網站搭建]·極簡方式實現打賞功能

可以查看我的個人主頁，參看效果--> http://www.yansongsong.cn

個人網站搭建github地址：https://github.com/xiaosongshine/djangoWebs 

在個人網站博客中，打賞贊助是對作者的一種支持與鼓勵，是很常見的功能。本文將分享一種非常簡單的方式，來實現打賞功能。

實踐展示：

1.PC端：

 

​

2.移動端

​

功能實現

功能實現十分簡單，不需要再單獨引入外部CSS與JS，只需要將一下HTML代碼加入的你的網頁里：

<script src="http://static.tctip.com/tctip-1.0.0.min.js"></script>
  <script>  
  new tctip({
    top: '20%',
    button: {
      id: 9,
      type: 'dashang',
    },
    list: [
      {
        type: 'alipay',
        qrImg: '你的支付寶收款二維碼圖片地址'
      }, {
        type: 'wechat',
        qrImg: '你的微信收款二維碼圖片地址'
      }
    ]
  }).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
  • 含義: 是否上報，用於作者統計使用者
  • 備注: 本參數只是方便作者統計插件使用情況，可視情況關閉

歡迎大家訪問我的主頁嘗試一下，覺得有用的話，麻煩小小鼓勵一下 ><