ホームページ > 記事 > ウェブフロントエンド > 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に追加するだけです。