Verwenden Sie js, um die Blog-Belohnungsfunktion zu implementieren

Vor ein paar Tagen habe ich auf einem Blog eine Trinkgeldfunktion gesehen. Vereinfacht ausgedrückt geht es darum, der Seite dynamische DOM-Knoten hinzuzufügen und dabei einige einfache Front-End-Kenntnisse wie HTML, CSS und JS zu verwenden. Auf GitHub gibt es Open-Source-Code, den Sie mit einer kleinen Modifikation in Ihrem eigenen Blog verwenden können.

Der einfachste Weg, es zu verwenden, besteht darin, den folgenden JS-Code zur Seite hinzuzufügen:

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

Je wichtiger Die Sache ist die Konfiguration. Es gibt staticPrefix, den relativen Pfad der vom ursprünglichen Autor bereitgestellten statischen Datei, die zum Speichern von img und css verwendet wird. list ist die Belohnungsmethode und qrimg ist das QR-Code-Bild zum Festlegen der Belohnungsmethode.

Der nächste Schritt ist die Verwendung im Bloggarten. Bereiten Sie zunächst statische Dateien lokal vor:

JS-Datei, tctip.min.js;

CSS-Stildatei, myReward.css;

Zahlungs-QR-Code, bmp, iweixin .bmp;

Bild der Zahlungsmethode, alipay.bmp, weixin.bmp;

Bild der Sponsor- oder Belohnungsschaltfläche, tab_4.bmp (entsprechend buttonImageId).

Der Blogpark kann nur BMP-Bilder hochladen, Sie müssen also die Bilder in andere Formate ändern und dann die Dateien im Hintergrund Ihres Blogparks hochladen, damit die zuvor hochgeladenen statischen Dateien verwendet werden können.

Wenn Sie statische Dateien verwenden, die Sie selbst hochgeladen haben, verwenden Sie bei der Konfiguration nicht die staticPrefix-Adresse, sondern geben Sie imagePrefix und cssPrefix an:

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

Wenn das alles ist, haben Sie sich natürlich noch nicht den Quell-JS-Code des Autors angesehen. Tatsache ist, dass er nicht verwendet werden kann, ohne den Quellcode zu ändern. Tatsächlich ist der Dateipfad das Hauptproblem Einstellung.

Öffnen Sie den JS-Quellcode, nicht den komprimierten Quellcode. Wenn Sie nicht geblendet sind, wird Sie niemand aufhalten.

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

Die ursprüngliche CSS-URL ist /css/myRewards.css. Da die im Blogpark hochgeladenen Dateien keine Ordner haben, wird das CSS entfernt. Sie haben vielleicht gedacht, dass img auch das gleiche Problem hat.

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

Ändern Sie in der Zahlungsmethodenliste den relativen Pfad des Bildes. Da nur Alipay und WeChat verwendet werden, werden nur deren Pfade geändert. Tatsächlich können Sie hier auch andere Zahlungsmethoden hinzufügen, daher werde ich hier nicht näher darauf eingehen.

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

Der Bildpfad der Zahlungsschaltfläche ändert auch den zurückgegebenen relativen Pfad.

Auf diese Weise fügen Sie auf der Einstellungsseite des Blogpark-Backends einfach die obige Konfigurationsdatei zum Header-HTML hinzu.