Typecho 免插件实现下载文件按钮和打赏按钮的方法

应朋友要求，在这里分享给大家 Typecho 免插件实现下载文件按钮和打赏按钮的方法，有需要的朋友可以试试。

该方法采用自定义字段，部署代码以后，只要在文末自定义字段添加链接即可。

下载按钮教程

1.在Typecho 模板的functions.php 中添加如下代码（部分模板有过functions themeFields($layout)，则只需添加｛｝之间的代码即可）

function themeFields($layout) {
$xiazai= new Typecho_Widget_Helper_Form_Element_Text('xiazai', NULL, NULL, _t('网盘'), _t('名称'));
$xiazai->input->setAttribute('class', 'w-100');
$xiazai_link =new
Typecho_Widget_Helper_Form_Element_Text('xiazai_link', NULL, NULL, _t('下载地址'), _t('输入'));
$xiazai_link->input->setAttribute('class', 'w-100');
$layout->addItem($xiazai);
$layout->addItem($xiazai_link);
}

2.在post.php相应位置自行调用，网盘名称<?php echo $this->fields->xiazai;?>，下载链接<?php echo $this->fields->xiazai_link;?>

<?php if (($this->fields->xiazai) == ''): ?>
<span>没有下载链接时输出内容，可参考本博客没有下载地址的显示</span>
<?php else: ?>
<a href="<?php echo $this->fields->xiazai_link;?>" target="_blank" rel="nofollow"><?php echo $this->fields->xiazai;?></a>
<?php endif; ?>

3.编辑文章时，自定义字段输入链接即可

4.因为有些朋友不会css，所以在这里分享个简洁的样式，如下图

• 下载按钮简洁

post.php需要修改的，自己把上面代码的<a></a>替换下面的即可

 <h2>下载地址</h2>
 <p><a href="<?php echo $this->fields->xiazai_link;?>" target="_blank" rel="nofollow noopener noreferrer"><button class="btn-download" type="button"><?php echo $this->fields->xiazai;?></button></a></p>

css放在main.css最下面就可以

 .btn-download{color:#fff;background:#45B6F7;border:2px solid #fff;padding:11px 15px;line-height:1;border-radius:7px;font-weight:bold;} .btn-download:hover{color:#45B6F7;background-color:#fff;border-color:#45B6F7;}

打赏按钮

1.在 post.php 适当的位置添加代码

<div style="padding: 10px 0; margin: 20px auto; width: 100%; font-size:16px; text-align: center;">
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
    </button>
    <div id="QR" style="display: none;">
        <div id="wechat" style="display: inline-block">
            <a class="fancybox" rel="group"><img id="wechat_qr" src="收款码图片地址" alt="拾叁 WeChat Pay"></a>
            <p>
                微信打赏
            </p>
        </div>
        <div id="alipay" style="display: inline-block">
            <a class="fancybox" rel="group"><img id="alipay_qr" src="收款码图片地址" alt="拾叁 Alipay"></a>
            <p>
                支付宝打赏
            </p>
        </div>
    </div>
</div>

2.在main.css最下面添加CSS样式

#QR{padding-top:20px;}
#QR a{border:0}
#QR img{width:180px;max-width:100%;display:inline-block;margin:.8em 2em 0 2em}
#rewardButton{border:1px solid #ccc;line-height:36px;text-align:center;height:36px;display:block;border-radius:4px;-webkit-transition-duration:.4s;transition-duration:.4s;background-color:#fff;color:#999;margin:0 auto;padding:0 25px}
#rewardButton:hover{color:#f77b83;border-color:#f77b83;outline-style:none}