Typecho增加打赏功能

增加custom.php

• 路径 usr/themes/Joe/public

代码语言：javascript复制

<?php 

    // 收款设置
    $ZNPaySet = new Typecho_Widget_Helper_Form_Element_Select(
        'ZNPaySet',
        array(
            'on' => '开启（默认）',
            'off' => '关闭',
        ),
        'on',
        '是否启用执念打赏功能',
        '介绍：开启后，文章底部展示打赏功能 <br>
        详情可查看 <a href="https://zhinianboke.com/archives/892/">https://zhinianboke.com/archives/892/</a>
        '
    );
    $ZNPaySet->setAttribute('class', 'joe_content joe_custom');
    $form->addInput($ZNPaySet->multiMode());
    
    $ZNAlipay = new Typecho_Widget_Helper_Form_Element_Text(
        'ZNAlipay',
        NULL,
        NULL,
        '支付宝收款码',
        '介绍：填写此处，打赏界面展示支付宝收款码，图片地址 <br />'
    );
    $ZNAlipay->setAttribute('class', 'joe_content joe_custom');
    $form->addInput($ZNAlipay->multiMode());
    
    $ZNWeChat = new Typecho_Widget_Helper_Form_Element_Text(
        'ZNWeChat',
        NULL,
        NULL,
        '微信收款码',
        '介绍：填写此处，微信界面展示微信收款码，图片地址 <br />'
    );
    $ZNWeChat->setAttribute('class', 'joe_content joe_custom');
    $form->addInput($ZNWeChat->multiMode());
    
    $ZNQqPay = new Typecho_Widget_Helper_Form_Element_Text(
        'ZNQqPay',
        NULL,
        NULL,
        'QQ收款码',
        '介绍：填写此处，QQ界面展示QQ收款码，图片地址 <br />'
    );
    $ZNQqPay->setAttribute('class', 'joe_content joe_custom');
    $form->addInput($ZNQqPay->multiMode());
?>

修改handle.php

• 路径 usr/themes/Joe/public/handle.php

代码

截图

代码语言：javascript复制

<style>
    /*  */
    .footer_flex { width: px; height: px; background-color: #f56c6c; border-radius: %; cursor: pointer; position: relative; z-index: ; display: flex; justify-content: center; align-items: center; color:#909399; font-size:px}
    .footer_flex:hover { background-color: #409eff; }
    /*top*/
    .footer_flex:hover .flex-footer { display: block; }
    .footer_flex .flex-footer { box-shadow: px px px px #409eff; border-radius: px; width: px; height: px; position: absolute; left: -180px; top: -320px; text-align: center; padding-top: px; background: #fff; display: none; }
    .flex-footer input{vertical-align:middle; margin-bottom:px; *margin-bottom:px;}
    </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:px; <?php if(Helper::options()->ZNPaySet !== 'on') echo 'display:none;' ?>">
        <div class="footer_flex">
            <img src="https://www.xiaodongdong.asia:9999/random-img/打赏.png" width="30px" height="30px">
            <div class="flex-footer">
            <img id="ewm" src="<?php $this->options->ZNAlipay() ?>" width="400px" height="266.67px">
            <div style="margin-top:px;">
            <label><input name="pay" type="radio" value="wx" checked="checked" onclick="wx()">微信</label>
            <label style="margin-left:px; display:block-inline"><input name="pay" type="radio" value="zfb" onclick="zfb()" checked>支付宝</label>
            <label style="margin-left:px;"><input name="pay" type="radio" value="qq" onclick="qq()">QQ</label>
            </div>
            <div style="height:px; background:rgba(,,,);"></div>
            </div>
        </div>
        <p style="margin-top:px; color:#909399; font-size:px">打赏</p>
    </div>

修改functions.php

• 路径 usr/themes/Joe/functions.php

代码

截图

代码语言：javascript复制

<li class="item" data-current="joe_custom">打赏设置</li>

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

增加自定义css

代码语言：javascript复制

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

php handle public themes typecho

1 人点赞