Typecho 打赏插件Donate 魔改适配JOE主题

序言

Donate插件有个好处是可以分别设置微信和支付宝的收款码。虽然、但是、也许没什么鸟用，因为我从来也没收到过一笔打赏。但是本着我可以不用，但不能没有的原则，这个功能还是不能缺失的。万一哪天遇到个金主，也许失恋了，一下给咱赏个万儿八千的也说不定不是？ 😁

JOE默认主题有个点赞功能，在每篇文章的结尾会有个红心点赞的图标，我的目的是把打赏图标也和点赞功能放在一行，并且调整好图标大小、位置即可。

但是Donate插件默认并不对JOE主题有适配，强制放到一起的结果就是这样，图标大小不一也不对齐：

所以我们要对代码进行一下微调。

第一步：增加Donate插件的调用代码

修改joe/post.php文件,找到如下代码：

<?php $this->need('public/article.php'); ?>
<?php $this->need('public/handle.php'); ?>
<?php $this->need('public/operate.php'); ?>
<?php $this->need('public/copyright.php'); ?>
<?php $this->need('public/related.php'); ?>

其中第二行<?php $this->need('public/handle.php'); ?>即为点赞代码，我们需要对这一行进行魔改，增加打赏插件的调用，以使其能够排在一起，魔改好之后的代码如下：

<?php $this->need('public/article.php'); ?>
<!-- 在点赞右侧增加打赏功能  -->
<div style="display: flex; justify-content: center; align-items: center; gap: 15px; margin: 10px 0;">
    <?php $this->need('public/handle.php'); ?>
    <div style="position: relative; top: -23px;">
        <?php Typecho_Plugin::factory('rootvip.cn.Donate')->Donate(); ?>
    </div>
</div>
<?php $this->need('public/operate.php'); ?>
<?php $this->need('public/copyright.php'); ?>
<?php $this->need('public/related.php'); ?>

其中，top: -23px;参数则为打赏图标的上下位置控制变量，负数向上，正数向下。-23是我针对JOE主题适配的数值。

第二步：对Donate插件原生css样式进行修改

修改/plugins/Donate/assets/style.css文件，找到如下代码：

#donate-btn{
    width: 50px;
    height: 50px;
    background: #e26d6d;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

我们要改三个地方：

#donate-btn{
    width: 45px; /* 改成45适配JOE主题，图标宽 */
    height: 45px; /* 改成45适配JOE主题，图标高 */
    background: #e26d6d;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50%;
    text-align: center;
    line-height: 45px; /* 改成45适配JOE主题，图标里面文字高度 */
    cursor: pointer;
    display: inline-block;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

OK，就这些了，保存后清空一下缓存刷新网页试试：

修改好的插件下载：回复可见