[前端插件]爲本身的博客增長打賞功能

前幾天在一個博客中看到有一個打賞功能。其實簡單說來就是在頁面中加入動態DOM節點，使用的也是簡單的HTML、CSS、JS這些前端的一些簡單知識。在GitHub上有開源的代碼，這裏稍加改造就能夠用在本身的博客中了。

---

 

最簡單的使用方式是在頁面中加入以下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---

 

關鍵字：JS插件,打賞