动态打赏按钮

发布于 2022-03-27  555 次阅读


本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

今天在看有什么好玩的东西的时候,突然想起hexo 中的打赏效果,然后就把他弄过来了。代码有点乱,但是总算能在 Sakura 中实现了。下面来方法。

首先,把下面文件 解压上传到 Sakura 主题 中

icon.rar (cbbkk.com)

然后在主题 footer.php 最后的</html> 上引入 文件的js 跟css

<!--打赏-->
<script src="/wp-content/themes/Sakura/icon/script.js"></script>
<link href="/wp-content/themes/Sakura/icon/style.css" rel="stylesheet" type="text/css"/>
<audio autoplay="autoplay" id="audio"></audio>
    <script>
        function addVoice() {
            document.getElementById('audio').src="/wp-content/themes/Sakura/icon/aowu.m4a";
        }
    </script>

打开主题 /inc/theme_plus.php 大约966行,修改为

/*
 * 打赏
 */
 function the_reward(){
  $alipay = akina_option('alipay_code');
  $wechat = akina_option('wechat_code');
  if($alipay || $wechat){
  $alipay =  $alipay ? '<li class="alipay-code"><img src="'.$alipay.'"></li>' : '';
  $wechat = $wechat ? '<li class="wechat-code"><img src="'.$wechat.'"></li>' : '';
  ?>
  <div class="single-reward">
    <div class="reward-open">
    <button class="tip-button" onclick="addVoice();">
    <span class="tip-button__text">赏点小钱</span>
      <div class="reward-main">
        <ul class="reward-row">
          <?php echo $alipay.$wechat; ?>
        </ul></div>
    <div class="coin-wrapper">
      <div class="coin">
        <div class="coin__middle"></div>
        <div class="coin__back"></div>
        <div class="coin__front"></div>
      </div>
    </div>
  </button>
    </div>
  </div>
  <?php
  }
}

打开主题跟目录 style.css 文件 约 5942行 的css 全部注销

在下一个css 标签 约5959行的代码

left: -157px;

更改为

left: -100px;

最后在此文件最底部添加CSS代码

/*打赏*/

.single-reward .reward-open {
    text-align: center;
    display: inline-block;
}

差个点击音效,有空再研究研究。

保存刷新,清理缓存,立刻去看看效果吧,有人打赏小哥喝杯奶茶吗 XD