博客添加打赏功能

Nov 10, 2016 | Experience | 阅读

文章目录

打赏图
代码块
结尾

打赏图

用支付宝调取你的收款二维码图，选择一个图床，可以是qq空间，也可是是新浪微博。将图片发送成微博，查看微博，右键图片，复制图片链接地址。

代码块

一般在 \Hexo\themes\hexo-theme-next-master\layout\ _partials 目录下可以找到 comments.swig文件，打开，在文件最前面添上以下代码块。
将你的图片链接地址覆盖34、35行的链接地址。成功！

  <!-- Donate Module -->
<div id="donate_module">
  <!-- css -->
  <style type="text/css">
    .donate_bar a.btn_donate{
      display: inline-block;
      width: 82px;
      height: 82px;
      text-align:center;
    }
    .donate_bar a.btn_donate:hover{ background-position: 0px -82px;}
    .donate_bar .donate_txt {
      display: block;
      color: #9d9d9d;
      font: 14px/2 "Microsoft Yahei";
      text-align:center;
    }
    .bold{ font-weight: bold; }
  </style>
  <!-- /css -->
  <!-- btn_donate & tips -->
  <div id="donate_board" class="donate_bar center">
    <span class="donate_txt">
      If you enjoy the article, please feel free to <span class="bold">donate~</span> Thx.<br/>
      若本文对您有帮助，<span class="bold">求打赏~</span> 谢谢您的鼓励。
    </span>
    <br/>
  </div>
  <!-- /btn_donate & tips -->
  <!-- donate guide -->
  <div id="donate_guide" class="donate_bar center hidden">
    <a href="http://ww1.sinaimg.cn/mw690/0064P7sNjw1f9mqg3p42kj30ja0r276s.jpg" title="Alipay_Scan_Payment" class="fancybox" rel="article0">
      <img src="http://ww1.sinaimg.cn/mw690/0064P7sNjw1f9mqg3p42kj30ja0r276s.jpg" title="Donate 打赏" height="164px" width="164px"/>
    </a> &nbsp;
    <span class="donate_txt">
      Use App <span class="bold"><a href="http://global.alipay.com/ospay/home.htm">Alipay</a> </span>
      to scan QRCode~ Thx for your support.<br/>
      用手机 <span class="bold"><a href="https://mobile.alipay.com/index.htm">支付宝钱包</a></span>，
      扫一扫即可~ 谢谢您的鼓励。<br/>
      <br/>
     
    </span>
    <br/>
  </div>

结尾

由于我换主题了，现在模块文件编程了.jade文件类型，暂时不知道怎么弄。

Hexo