jsを使ってブログ報酬機能を実装する

数日前にブログで投げ銭機能があるのを見ました。実際、簡単に言うと、HTML、CSS、JS などの簡単なフロントエンドの知識を使用して、動的 DOM ノードをページに追加することです。 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 は報酬メソッドを設定するための QR コード画像です。

次のステップは、ブログガーデンで使用することです。まずローカルで静的ファイルを準備します:

JS ファイル、tctip.min.js;

CSS スタイル ファイル、myReward.css;

支払い方法の画像、alipay。 bmp、weixin.bmp;

スポンサーまたは報酬ボタンの画像、tab_4.bmp (buttonImageId に対応)。

ブログ パークでは bmp 画像のみをアップロードできるため、画像を他の形式で変更してから、ブログ パークのバックグラウンドでファイルをアップロードして、以前にアップロードした静的ファイルを使用できるようにする必要があります。

自分でアップロードした静的ファイルを使用する場合は、設定時に staticPrefix アドレスを使用しないでください:

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

支払い方法リストで、画像の相対パスを変更します。 Alipay と WeChat のみが使用されるため、それらのパスのみが変更されます。実際、ここで他の支払い方法を追加することもできるので、ここでは詳しく説明しません。

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に追加するだけです。