Use js to implement blog reward function

I saw a tipping function on a blog a few days ago. In fact, to put it simply, it is to add dynamic DOM nodes to the page, using some simple front-end knowledge such as HTML, CSS, and JS. There is open source code on GitHub, and you can use it in your own blog with a little modification.

The simplest way to use it is to add the following JS code to the page:

<script>
window.tctipConfig = {
    staticPrefix:  "http://static.tctip.com",
    buttonImageId: 1,
    buttonTip: "zanzhu",
    list:{
      alipay: {qrimg: "http://tctip.com/img/alipayqr.png"},
      weixin:{qrimg: "http://littlebtc.com/images/yeshen.png"},
    }
};
</script>
<script src="http://static.tctip.com/js/tctip.min.js"></script>

The most important thing is to configure staticPrefix, which is the relative path of the static file provided by the original author himself, used to store img and css ; list is the reward method, qrimg is the QR code image for setting the reward method.

The next step is to use it in the blog garden. First prepare static files locally:

　 JS file, tctip.min.js;

CSS style file, myReward.css;

Payment QR code, ialipay.bmp, iweixin.bmp;

Picture of payment method, alipay.bmp, weixin.bmp;

　Sponsor or reward button image, tab_4.bmp (corresponding to buttonImageId).

The blog park can only upload bmp images, so you need to modify the images in other formats, and then upload the files in the background of your blog park, so that the previously uploaded static files can be used.

If you use static files uploaded by yourself, do not use the staticPrefix address when configuring. Provide imagePrefix and cssPrefix:

<script>
  window.tctipConfig = {
    imagePrefix: "图片文件的相对路径",
    cssPrefix:   "样式文件的相对路径",
    //staticPrefix: "http://static.tctip.com",
    buttonImageId: 4,
    buttonTip:  "dashang",
    list:{
      alipay: { qrimg: "支付宝二维码绝对路径"},
      weixin: { qrimg: "微信二维码绝对路径"},
    }};
</script>
<script src="js文件绝对路径"></script>

Of course, if this is all, you still haven’t looked at the author’s source JS code. The fact is that it is not modified. The source code cannot be used. In fact, it is mainly a problem with the file path setting.

Open the JS source code, not the compressed source code. Unless you are not dazzled, no one will stop you.

myConfig : {
    imagePrefix  : "",
    cssPrefix    : "",
    /***
     * 当staticPrefix不为空的时候,imagePrefix和cssPrefix失效
     */
    staticPrefix  : "",
    buttonImageId  : "3",
    buttonTip    : "dashang",
    cssUrl:  "/myRewards.css"
  },

The original cssUrl is /css/myRewards.css. Because the file uploaded by the blog park does not have a folder, the css is removed. You may have thought that img also has the same problem.

listConfig:{
        'alipay'  :   {icon: "alipay.bmp", name:"支付宝", desc: "支付宝打赏", className: ""},
        'tenpay'  :   {icon: "img/tenpay.png", name:"财付通", desc: "财付通打赏", className:""},
        'weixin'  :   {icon: "weixin.bmp", name:"微信", desc: "微信打赏", className:""},
        'bitcoin'  :  {icon: "img/bitcoin.png", name:"比特币", desc: "比特币打赏", className:""},
        'litecoin'  :  {icon: "img/litecoin.png", name:"莱特币", desc: "莱特币打赏",className:""},
        'dogecoin'  :  {icon: "img/dogecoin.png", name:"狗狗币", desc: "狗狗币打赏", className:""}
      },

In the payment method list, modify the relative path of the image. Since only Alipay and WeChat are used, only their paths are modified. In fact, you can also add other payment methods here, so I won’t go into details here.

buttonImageUrl: function(){
            var id = tctip.myConfig.buttonImageId;
            var tip = tctip.myConfig.buttonTip;
            //return tctip.imageUrl("" + tip + "/tab_" + id + ".bmp");
            return tctip.imageUrl("/tab_4.bmp");
        },

The image path of the payment button, also modify the relative path returned.

In this way, in the settings page of the blog park backend, just add the above configuration file to the top Html.