person

本文是“本站技术备忘”系列的第八篇,系列地址:https://ziyoo.ren/tech-note.html

多数个人博客都会在文章结尾处放一个打赏功能,并非想要报酬,只是希望能够遇到欣赏自己文章的读者。打赏的那些钱更像是一种支持和鼓励吧!

相比 WordPress,要在 Typecho 社区找到一款好插件真的很难。我尝试了广受欢迎的 Reword,但因为虚拟主机 MySQL 版本过低,启用插件就会提示“Database Query Error”而放弃。

最后解决方案来自 Ryongyon!

在 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="https://static.ziyoo.ren/wechatp.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="https://static.ziyoo.ren/alip.JPG" alt="耕读君 Alipay"></a>
            <p>
                支付宝打赏
            </p>
        </div>
    </div>
</div>

在 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}

也许是主题设计的原因,我将代码加入到 style.css 后没有生效,最后把 css 代码直接插入到 header.php 的头部解决:

<head>
    <style>
        粘贴上文的 css 代码   
    </style>
</head>

最终效果可以参考下方按钮,希望能够帮到你。

相关文章

新评论