博客园 打赏功能设置，友言，友荐，分享功能设置

Posted 2020-08-25 爱编程的欧巴

一、jiaThis 分享到设置

<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0&amp;btn=r5.gif" charset="utf-8"></script>
<!-- JiaThis Button END -->

 

二、友荐插件

 

<!-- UJian Button BEGIN -->
<script type="text/javascript" src="http://v1.ujian.cc/code/ujian.js?type=slide"></script>
<!-- UJian Button END -->

 

三、打赏功能设置

 

最简单的使用方式是在页面中加入如下JS代码(此代码足够实现该功能，把下面的二维码的绝对路径写进去，就可以实现)

<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>

其中比较重要的是配置有staticPrefix，是原作者自己提供的静态文件相对路径，用来存放img和css；list是打赏方式，qrimg是设置打赏方式的二维码图片。

---

接下来是在博客园中使用。先在本地准备好静态文件：

　　JS文件，tctip.min.js；

　　css样式文件，myReward.css；

　　支付二维码，ialipay.bmp、iweixin.bmp；

　　支付方式图片，alipay.bmp、weixin.bmp；

　　赞助或者打赏按钮图片，tab_4.bmp（对应buttonImageId）。

博客园只能上传bmp图片，所以要将其他格式图片修改，然后在自己的博客园后台上传文件，这样前面的静态文件就可以使用刚刚上传了。

---

 

如果使用自己上传的静态文件，配置时就不要staticPrefix地址，提供imagePrefix和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>

 

当然如果只是这样就完了，还是没有看作者的源JS代码，事实是不修改一下源码也无法使用的，其实主要是文件路径设置的问题。

---

 

打开JS源码，不是压缩的源码哦，除非你看的不眼花，也没人拦你的。

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

 

原来的cssUrl是/css/myRewards.css，因为博客园上传的文件没有文件夹，所以去掉css。可能大家想到了，img也有一样的问题。

   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:""}
            },

 

支付方式列表中，修改图片相对路径，由于只使用了支付宝、微信两种方式，所以只修改他们的路径。其实还可以添加其他的支付方式在这里，就不赘述了。

    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");
                },

 

支付按钮的图片路径，同样修改返回的相对路径。

---

这样在博客园后台的设置页面，在页首html处添加上面的配置文件就可以了。

注：本文的目的不是得到别人的打赏，毕竟优质的文章才值得，而我还有很长的路。通过看别人的代码，学习如何写前端插件才是重点。作为对原作者的支持，请不要修改源代码中的github地址。

 

 

谢谢原作者开源和无私精神---参考：https://github.com/greedying/tctip---

 

四、友言

<!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js"></script>
<!-- UY END -->