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>

더 중요합니다 thing 은 구성입니다. 원저작자가 제공한 정적 파일의 상대 경로인 staticPrefix가 있는데, img와 css를 저장하는 데 사용됩니다. list는 보상 방법이고, qrimg는 보상 방법을 설정하기 위한 QR 코드 이미지입니다.

다음 단계는 블로그 정원에서 활용하는 것입니다. 먼저 로컬에서 정적 파일을 준비하세요:

JS 파일, tctip.min.js;

CSS 스타일 파일, myReward.css;

결제 QR 코드, 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 소스코드를 열어보세요. 놀라지 않는 한 누구도 말릴 수 없습니다. <… . img에도 같은 문제가 있다고 생각했을 수도 있습니다.

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

결제수단 목록에서 이미지의 상대경로를 수정합니다. Alipay, WeChat만 사용하므로 해당 경로만 수정됩니다. 실제로 여기에 다른 결제 수단을 추가할 수도 있으므로 여기서는 자세히 설명하지 않겠습니다.

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에 위 구성 파일을 추가하면 됩니다.