Spimes模板添加打赏按钮，实现对打赏区域自由开启关闭

用户7146828

发布于 2021-08-09 15:11:10

6690

发布于 2021-08-09 15:11:10

本文转自规则之树

因为最近一直在用TePass For Typecho插件，但是它的打赏区域太大太占地方，于是几个月前，出于顺手，我在我博客的模板加了一个打赏按钮，然后让打赏区域由访问者自己控制显示。其实我以为只是个小修改吧，因为没啥难度啊，就是jQuery的隐藏显示方法，但是结果这几个月来问的人一大堆，看来还是写个教程稳妥点。

修改步骤如下： 1.打开/themes/spimes/post.php页面，大概是124行的位置，可以看到其它按钮的代码，大概就和下图一样。

然后我就在阅读模式按钮底下加一条代码

<div class="read_outer Reward"> <?php _e( '打赏' ); ?></div>

这块地方的整个代码就成如下这样了：

<div class="read_outer"> <?php _e( '封面' ); ?></div>
<div class="read_outer"> <?php _e( '阅读' ); ?></div>
<div class="read_outer Reward"> <?php _e( '打赏' ); ?></div>

然后在模版的设置中，找到自定义CSS，写入如下代码，将打赏区域默认隐藏，并且打赏按钮变成红色：

.btn_reward{display:none !important}
.Reward{background-color: #dd524e !important;}

最后，添加支持打赏显示和隐藏的js，可以加在post.php靠底部的合适位置（我这里使用了原生js，主要是可能不是所有的模板都用了jquery，那么原生js还是最稳妥的办法）：

<script type="text/javascript">
    function show_reward (event) {
        //取消冒泡
        let oevent = event || window.event
        if (document.all) {
            oevent.cancelBubble = true
        } else {
            oevent.stopPropagation()
        }
        if (document.getElementById("div_reward").style.display === "none" || document.getElementById("div_reward").style.display === "") {
            document.getElementById("div_reward").style.display = "block"
        } else {
            document.getElementById("div_reward").style.display = "none"
        }
    }
    document.onclick = function () {
        document.getElementById("div_reward").style.display = "none"
    }
    document.getElementById("div_reward").onclick = function (event) {
        let oevent = event || window.event
        oevent.stopPropagation()
    }    
</script>

然后打赏的效果就这么实现了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年04月30日，如有侵权请联系 cloudcommunity@tencent.com 删除

php