Typecho赞赏功能实现

in 百宝箱 Views: 355 s with 0 comment

Typecho目前没什么好用的插件支持这个功能,尤其是1.1版本以上的。
本来没准备写这篇,因为基本是 照搬 + 魔改,但因为有人问,所以决定还是写一份免得以后忘了。

首先需要说明的是,我博客上的赞赏主要参照的是一个通用赞赏模块:zanshang-Github
为了方便说明,我才搬了一份到我自己的Github,针对原代码改动不大,我这边的这份代码地址为:Typecho-zanshang Github

效果图

65B6E30D-9693-40F3-87F0-3C37DFD57E5E.png

B1B7C01F-1415-42EA-9567-1FDFA94BEC32.png

CC68F2D9-F34A-41C2-A678-6012545B80BC.png

代码

HTML部分

插入到你当前主题的post.php里,一般如果是文章下的那个位置的话,应该是在这个代码段的下面插入

<?php parseContent($this); ?>

HTML:

<!-- 赞赏部分 begin -->
<div class="entry-shang text-center">
    <p>「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」</p>
    <button class="zs show-zs btn btn-bred">赞赏</button>
</div>
<div class="zs-modal-bg"></div>
<div class="zs-modal-box">
    <div class="zs-modal-head">
        <button type="button" class="close">×</button>
        <p class="author">
            <a href="https://www.zuozuovera.com">
                <img src="https://secure.gravatar.com/avatar/29016c0d931044b1660a872ced6c06ef?s=80&r=G&d=mm"/>
            薇拉航线</a>
        </p>
        <p class="tip"><i></i><span> (๑>ڡ<)☆谢谢老板~</span></p>
    </div>
    <div class="zs-modal-body">
        <div class="zs-modal-btns">
            <button class="btn btn-blink" data-num="2">2元</button>
            <button class="btn btn-blink" data-num="5">5元</button>
            <button class="btn btn-blink" data-num="10">10元</button>
            <button class="btn btn-blink" data-num="50">50元</button>
            <button class="btn btn-blink" data-num="100">100元</button>
            <button class="btn btn-blink" data-num="any">任意金额</button>
        </div>
        <div class="zs-modal-pay">
            <button class="btn btn-bred" id="pay-text">2元</button>
            <p>使用<span id="pay-type">微信</span>扫描二维码完成支付</p>
            <img src="./images/alipay-2.jpg" id="pay-image"/>
        </div>
    </div>
    <div class="zs-modal-footer">
        <label style="float: left;width: 130px;">
            <input type="radio" name="zs-type" value="alipay" class="zs-type" checked="checked" style="float: left;">
            <span class="zs-alipay">
                <img src="./images/alipay-btn.png"/>
            </span>
        </label>
        <label style="float: left;width: 130px;">
            <input type="radio" name="zs-type" value="wechat" class="zs-type" style="float: left;">
            <span class="zs-wechat">
                <img src="./images/wechat-btn.png"/>
            </span>
        </label>
    </div>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script> 
<script type="text/javascript" src="./js/zanshang.js"></script> 
<!-- 赞赏部分end -->

JS和CSS

在这里下载完整文件

然后将js文件夹里的jquery.min.jszanshang.js丢到你主题目录下的js文件夹里去,然后根目录下的donate.css丢到和你的post.php同级的目录下。

支付宝微信账号

二维码图片是放在当前目录中的images文件中的,支付宝和微信的命名规则为:type+'-'+data-num。详细规则在zanshang.js里有。
千万记得要改哦~不然钱就会到我这里啦~

「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」

薇拉航线

(๑>ڡ<)☆谢谢老板~

使用微信扫描二维码完成支付

Comments are closed.