最近手头有点紧吧,所以想弄个讨饭的小功能,记录开始:

打开主题根目录下的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=<?php $this->options->themeUrl('img/Pay/WeChatPay.JPG'); ?> alt="WeChat Pay'"></a><!--记得把收款图路径改为自己的-->
            <p>微信打赏</p>
        </div>
        <div id="alipay" style="display: inline-block">
            <a class="fancybox" rel="group">
                <img id="alipay_qr" src=<?php $this->options->themeUrl('img/Pay/AliPay.JPG'); ?> alt="Alipay"></a><!--记得把收款图路径改为自己的-->
            <p>支付宝打赏</p>
        </div>
    </div>
</div>

reward-post.png

header.php中引用css样式

<link rel="stylesheet" href="<?php $this->options->themeUrl('css/qr.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:#80766e;
    border-color:#80766e;
    outline-style:none
}

reward-css.png

3、完工,看下效果

ps:后来发现独立页面没有打赏按钮,只好再补充下,在主题根目录下的page.php中添加打赏功能的代码即可

reward-demo.png

原文:
547的Blog - 萌萌哒 ~在Typecho文章底部添加打赏功能的实现-https://www.wusiqi.cn/archives/445/

标签: typecho, 打赏

添加新评论