Typecho博客Joe主题实现打赏设置

执念博客
2021-05-12 / 303 评论 / 4,251 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月25日,已超过1123天没有更新,若内容或图片失效,请留言反馈。

点击广告查看隐藏内容....

0.成品图展示
komd3vp6.png
1.新增一个php文件,用于以后新增自定义设置,文件名:custom.php;文件路径:usr/themes/Joe-master/public


kom53g0u.png

2.修改handle.php文件,底部新增代码,放在最后一行上面,文件路径:usr/themes/Joe-master/public

<style>
    /*弹出*/
    .footer_flex { width: 42px; height: 42px; background-color: #f56c6c; border-radius: 50%; cursor: pointer; position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; color:#909399; font-size:12px}
    .footer_flex:hover { background-color: #409eff; }
    /*top*/
    .footer_flex:hover .flex-footer { display: block; }
    .footer_flex .flex-footer { box-shadow: 0px 0px 5px 0px #409eff; border-radius: 8px; width: 156px; height: 166px; position: absolute; left: -52px; top: -175px; text-align: center; padding-top: 15px; background: #fff; display: none; }
    .flex-footer input{vertical-align:middle; margin-bottom:3px; *margin-bottom:3px;}
    </style>
    <script language="javascript" type="text/javascript">
    function zfb(){
     var obj=document.getElementById("ewm");
     obj.src=`<?php $this->options->ZNAlipay() ?>`;
    };
    function wx(){
     var obj=document.getElementById("ewm");
     obj.src=`<?php $this->options->ZNWeChat() ?>`;
    };
    function qq(){
     var obj=document.getElementById("ewm");
     obj.src=`<?php $this->options->ZNQqPay() ?>`;
    };
    </script> 
    <div style="text-align: center; margin-left:30px; <?php if(Helper::options()->ZNPaySet !== 'on') echo 'display:none;' ?>">
        <div class="footer_flex">
            <img src="https://cdn.jsdelivr.net/gh/aill66/cdn/shang.png" width="20px" height="20px">
            <div class="flex-footer">
            <img id="ewm" src="<?php $this->options->ZNAlipay() ?>" width="120px" height="120px">
            <div style="margin-top:5px;">
            <label><input name="pay" type="radio" value="wx" checked="checked" onclick="wx()">微信</label>
            <label style="margin-left:3px; display:block-inline"><input name="pay" type="radio" value="zfb" onclick="zfb()" checked>支付宝</label>
            <label style="margin-left:3px;"><input name="pay" type="radio" value="qq" onclick="qq()">QQ</label>
            </div>
            <div style="height:40px; background:rgba(0,0,0,0);"></div>
            </div>
        </div>
        <p style="margin-top:5px; color:#909399; font-size:12px">打赏</p>
    </div>

kom5644a.png
3.修改functions.php文件,加入打赏设置菜单和底部引入新建的php文件,文件路径:usr/themes/Joe-master

<li class="item" data-current="joe_custom">自定义设置</li>

// 收款设置
require_once("public/custom.php");

kom591ey.png
kom59iez.png

4.为打赏按钮增加跳动特效,将以下代码放在主题的全局设置-自定义CSS里面

.footer_flex {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

kp3vjvbo.png

本文共 251 个字数,平均阅读时长 ≈ 1分钟

点击广告查看隐藏内容....

45

打赏

海报

正在生成.....

评论 (303)

语录
取消
  1. 头像
    牛牛 Lv.1
    ·Android · Google Chrome
    沙发

    如果英雄联盟有停服的那一天,我会用寒冰射手在打一局简单人机,因为从哪里开始就从哪里结束。

    回复 删除 垃圾
  2. 头像
    匿名 Lv.6
    ·Windows 10 · Google Chrome
    板凳

    没有谁能够永远坚强下去的,每个人都会有疲累的无法站起的时候。世间的故事,就是为了这一刻而存在的哦。

    回复 删除 垃圾
  3. 头像
    牛牛 Lv.1
    ·Windows 7 · Google Chrome
    地毯

    等闲识得东风面,万紫千红总是春。

    回复 删除 垃圾
  4. 头像
    匿名 Lv.6
    ·Android · Google Chrome
    第4楼

    当世界背叛你的那天到来时,我会为你背叛全世界。

    回复 删除 垃圾
  5. 头像
    苏顾. Lv.1
    ·Windows 10 · Google Chrome
    第5楼

    煩い!煩い!煩い!

    回复 删除 垃圾
  6. 头像
    梵蒂冈反对 Lv.1
    ·Windows 10 · Google Chrome
    第6楼

    窗外下起了雨,雨水落向大地,远方的人却渐行渐远,我的心又该去往何方呢。

    回复 删除 垃圾
  7. 头像
    匿名 Lv.6
    ·Windows 10 · Google Chrome
    第7楼

    我想要如清泉般的爱。

    回复 删除 垃圾
  8. 头像
    艾霂 Lv.1
    ·Windows 10 · Google Chrome
    第8楼

    你们认为没有路,是因为没有学会不择手段。

    回复 删除 垃圾
  9. 头像
    早晨的粥 Lv.1
    ·MacOS · Safari
    第9楼

    书上说,如果有一天你梦见了一个很久没见的人,代表他/她正在遗忘你。

    回复 删除 垃圾
  10. 头像
    冷风 Lv.1
    ·iPhone · Safari
    第10楼

    如果人类都是神之子的话——是否愿意给我…这个不听话的逆子一点奖赏?

    回复 删除 垃圾
  11. 头像
    青州 Lv.1
    ·MacOS · Safari
    第11楼

    每个人能走到现在,都是自己选择的结果。

    回复 删除 垃圾
  12. 头像
    匿名 Lv.6
    ·Android · Google Chrome
    第12楼

    谁说死后文只能寄信件。 清澄才藏君, 你寄出的,是五十年不变的誓约。

    回复 删除 垃圾
  13. 头像
    大千 Lv.1
    ·Windows 7 · QQ Browser
    第13楼

    二维码弹出的时候图片没法固定,选择微信或者QQ后,图片就没了,还需要再次点击打赏才能显示

    回复 删除 垃圾
  14. 头像
    大千 Lv.1
    ·Windows 10 · Google Chrome
    第14楼

    666试试看

    回复 删除 垃圾
  15. 头像
    云菟 Lv.2
    ·Windows 10 · Google Chrome
    第15楼

    6666

    回复 删除 垃圾
  16. 头像
    Lv.2
    ·Android · Google Chrome
    第16楼

    春心莫共花争发,一寸相思一寸灰!

    回复 删除 垃圾
  17. 头像
    Lv.2
    ·Android · Google Chrome
    第17楼

    身处谷底有谁能分清我在哪片迷雾里。

    回复 删除 垃圾
  18. 头像
    fcf Lv.1
    ·Windows 10 · Google Chrome
    第18楼

    画图

    回复 删除 垃圾
  19. 头像
    木子李 Lv.1
    ·iPhone · Safari
    第19楼

    好像二维码弹出来的那个样式有些问题

    回复 删除 垃圾
  20. 头像
    aa Lv.1
    ·Windows 10 · Google Chrome
    第20楼

    神啊,求求你。已经足够了。已经没事了。我们都会熬过去的。

    回复 删除 垃圾
  21. 头像
    去哦牛 Lv.1
    ·Windows 10 · Google Chrome
    第21楼

    成长是学着接受,一个人向前进的同时也是失去的过程。

    回复 删除 垃圾
  22. 头像
    彧曦 Lv.1
    ·Windows 10 · Google Chrome
    第22楼

    世界上一成不变的东西,只有“任何事物都是在不断变化的”这条真理。

    回复 删除 垃圾
  23. 头像
    Devil Lv.1
    ·Android · Google Chrome
    第23楼

    千山鸟飞绝,万径人踪灭。

    回复 删除 垃圾
  24. 头像
    Lv.1
    ·Windows 10 · Google Chrome
    第24楼

    前天我遇见了小兔,昨天遇见了小鹿,今天则遇见了你。

    回复 删除 垃圾
  25. 头像
    123213321 Lv.1
    ·MacOS · Google Chrome
    第25楼

    荣誉之于生死,救赎之于荣誉

    回复 删除 垃圾
  26. 头像
    鱼儿哈 Lv.1
    ·Android Oreo · Google Chrome
    第26楼

    你知不知道,难做的事和应该做的事,往往是同一件事。

    回复 删除 垃圾
  27. 头像
    笔记堡 Lv.1
    ·Android · Google Chrome
    第27楼

    寻觅归乡之路,一次一颗子弹

    回复 删除 垃圾
  28. 头像
    笔记堡 Lv.1
    ·Android · Google Chrome
    第28楼

    I'm still asking you to believe - not in my ability to bring about change, but in yours. I believe in change because I believe in you.

    回复 删除 垃圾
  29. 头像
    1400808 Lv.1
    ·Windows 7 · Google Chrome
    第29楼

    7.3.7不能用,能不能把6.9.0的版本分享一下

    回复 删除 垃圾
  30. 头像
    1400808 Lv.1
    ·Windows 7 · Google Chrome
    第30楼

    我的是7.3.7的可以用么

    回复 删除 垃圾