搜索到
2
篇与
的结果
-
Typecho博客Joe主题实现打赏设置 其实这个主要是与Joe主题完美契合，之前有文章也写了两种设置方法。0.成品图展示1.新增一个php文件，用于以后新增自定义设置，文件名：custom.php；文件路径：usr/themes/Joe-master/public代码如下<?php // 收款设置 $ZNPaySet = new Typecho_Widget_Helper_Form_Element_Select( 'ZNPaySet', array( 'on' => '开启（默认）', 'off' => '关闭', ), 'on', '是否启用执念打赏功能', '介绍：开启后，文章底部展示打赏功能 <br> 详情可查看 <a href="https://zhinianblog.com/archives/892/">https://zhinianblog.com/archives/892/</a> ' ); $ZNPaySet->setAttribute('class', 'joe_content joe_pay'); $form->addInput($ZNPaySet->multiMode()); $ZNAlipay = new Typecho_Widget_Helper_Form_Element_Text( 'ZNAlipay', NULL, NULL, '支付宝收款码', '介绍：填写此处，打赏界面展示支付宝收款码，图片地址 <br />' ); $ZNAlipay->setAttribute('class', 'joe_content joe_pay'); $form->addInput($ZNAlipay->multiMode()); $ZNWeChat = new Typecho_Widget_Helper_Form_Element_Text( 'ZNWeChat', NULL, NULL, '微信收款码', '介绍：填写此处，微信界面展示微信收款码，图片地址 <br />' ); $ZNWeChat->setAttribute('class', 'joe_content joe_pay'); $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_pay'); $form->addInput($ZNQqPay->multiMode()); ?>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>3.修改functions.php文件，加入打赏设置菜单和底部引入新建的php文件，文件路径：usr/themes/Joe-master代码如下<li class="item" data-current="joe_pay">打赏设置</li> // 收款设置 require_once("public/custom.php"); -
给typecho添加个打赏功能 虽然没有人给我打赏，但这功能必须要有！功能虽然没用，但看着比较爽！参考两篇文章：https://www.ijkxs.com/archives/15.htmlhttps://xiamp.net/archives/new-topic-reward-button.html一、如果你没有买插件，那以下内容基本没用。我拿过来是学习它的方法。添加打赏按扭。<?php if (isPluginEnabled('TePass')) : ?> <a class="btn btn-warning" onclick="show_reward()" href="javascript:void(0);"><?php _e("打赏"); ?></a> <?php endif; ?>isPluginEnabled是检测插件是否激活的方法，具体如下function isPluginEnabled($pluginName) { return array_key_exists($pluginName, Typecho_Plugin::export()['activated']); } 然后把调用打赏区域的代码包裹起来(主要是为了限定css生效范围)<?php if (isPluginEnabled('TePass')) : ?> <div class="entry-support"> <?php echo TePass_Plugin::getReward(); ?> </div> <?php endif; ?> 接着增加CSS样式.btn_reward { /*隐藏TePass输出的按钮*/ display: none; } .entry-support .p-list { padding: 10px 0; margin: 0 -5px; /* display: none 这是捐赠用户列表，无需要就隐藏 */ } .entry-support .p-list .clusr { /* 限制头像大小 */ width: 45px; height: 45px; margin: 5px; } 然后你就可以点击打赏按钮显示打赏区域了。二、结合自己买的TePass插件，和JOE主题，折腾一上午，也基本上弄好了。我发现原理是在点击按扭 添加 onclick="show_reward()"效果，然后加个自动隐藏和显示效果。我的JQ代码比较简单：$('.pay-author').click(function(){ $(".tepasspost").toggle(); }) </script>具体在/WEB/usr/plugins/TePass/theme/reward/need_your_reward.php里可看到打赏的实现效果在想要打赏的位置添加： <?php $all = Typecho_Plugin::export();?> <?php if (array_key_exists('TePass', $all['activated'])) : ?> <?php echo TePass_Plugin::getTePass(); ?> <?php echo TePass_Plugin::getReward(); ?> <?php endif; ?>
