Typecho 增加打赏功能
增加 custom.php
新增一个 php 文件,用于以后新增自定义设置,文件名:custom.php;路径
usr/themes/Joe/public
<?php // 收款设置 $ZNPaySet = new Typecho_Widget_Helper_Form_Element_Select( 'ZNPaySet', array( 'on' => ' 开启(默认)', 'off' => ' 关闭 ', ), 'on', ' 是否启用执念 打赏 功能 ', ' 介绍:开启后,文章底部展示打赏功能 <br> 详情可查看 <a href="http://16dajie.com/shibei/76.html">http://16dajie.com/shibei/76.html</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
修改 handle.php 文件,底部新增 代码 ,放在最后一行上面, 路径
usr/themes/Joe/public/handle.php
<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/%E6%89%93%E8%B5%8F.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
<li class="item" data-current="joe_custom"> 打赏设置 </li>
// 收款设置
require_once("public/custom.php");增加自定义css
.footer_flex { animation: star 0.5s ease-in-out infinite alternate;}
@keyframes star {
from { transform: scale();
}
to { transform: scale(1.1);
}
}

支付宝打赏
微信打赏