本文遵循BY-SA版权协议，转载请附上原文出处链接。

本文作者: 黑伴白

本文链接: http://heibanbai.com.cn/posts/c9e9f095/

Hexo主题Fluid增加打赏功能

别人的博客都有打赏功能，就想着给自己的也增加上，经过网络学习及验证，总结如下!

有需求的小伙伴可以参考！

增加打赏CSS内容

文件位置：themes\fluid\source\css\heibanbai.css

此文件为自定义文件，文件名可自定义，如：heibanbai.css

文件内容如下：

.tea {
    font-size: 0.8125em;
    color: #999999;
    margin-top: 10px;
}

.reward-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.reward-btn {
    padding: 8px 24px;
    font-size: 18px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 10px;
}

.reward-img-container {
    display: none;
    margin-top: 20px;
    /* 图片容器的透明度 */
    opacity: 0;
    /* 过渡效果,使动画更平滑 */
    transition: opacity 2s ease;
}

.reward-img {
    width: 200px;
    margin: 10px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    padding: 10px;
}

/* 单个图片的容器 */
.singleImgContainer {
    width: 50%;
    height: 240px;
}

/* 微信支付和支付宝支付的文字样式 */
.wechatPay,.aliPay {
	text-align: center;
    font-size: 0.8125em;
    color: #999999;
}

增加打赏JS内容

文件位置：themes\fluid\source\js\heibanbai.js

此文件为自定义文件，文件名可自定义，如：heibanbai.js

文件内容如下：

const rewardBtn = document.getElementById('rewardBtn');
const rewardImgContainer = document.getElementById('rewardImgContainer');

if(rewardBtn){
	rewardBtn.onclick = () => {
		rewardImgContainer.style.display = (rewardImgContainer.style.display === 'none' || rewardImgContainer.style.display === '') ? 'inline-flex' : 'none'
		setTimeout(() => {
			rewardImgContainer.style.opacity = (rewardImgContainer.style.opacity === '0' || rewardImgContainer.style.opacity === '') ? '1' : '0'
		}, 10);
	}
}

修改文章模板加入打赏

文件位置：themes\fluid\layout\post.ejs

此文件为已有文件，只是在里面增加内容，增加位置如下：

增加内容如下：

<!-- 添加打赏模块 -->
<div class="reward-container">
    <% if (theme.donate.enable) { %>
        <button id="rewardBtn" class="reward-btn">
            <% if (config.language == 'zh-CN') { %> 
                ❤ 打赏
            <% } else { %>
                Donate
            <% } %>	
        </button>
        <p class="tea">“<%= theme.donate.message %>”</p>
        <div id="rewardImgContainer" class="reward-img-container">
            <div class="singleImgContainer">
                <img id="wechatImg" class="reward-img" src="<%= theme.donate.wechatpay %>" alt="微信二维码">
                <p class="wechatPay">微信支付</p>
            </div>
            <div class="singleImgContainer">
                <img id="alipayImg" class="reward-img" src="<%= theme.donate.alipay %>" alt="支付宝二维码">
                <p class="aliPay">支付宝支付</p>
            </div>
        </div>
    <% } %>
</div>

引入自定义的打赏CSS和JS文件

修改主题的配置文件_config.fluid.yml，如下增加上面自定义的heibanbai.css和heibanbai.js文件：

# 指定自定义 .js 文件路径，支持列表；路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js:
  - /js/heibanbai.js
# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
  - /css/heibanbai.css

启用打赏自定义打赏语句

修改主题的配置文件_config.fluid.yml，如下增加打赏提示以及指定打赏二维码 (位置无固定要求，可以增加到最后位置)：

# Donate 自己为 Fluid 主题增加的打赏功能
# `message` 是打赏提示语，可自定义
# `alipay` 是支付宝付款码， `wechatpay` 是微信付款码。
donate:
  enable: true
  message: 您的支持，我的动力！觉得不错的话，给点打赏吧 ୧(๑•̀⌄•́๑)૭ 
  alipay: /img/alipay.jpg
  wechatpay: /img/wechatpay.jpg

参数说明：

• message： 自定义打赏提示语
• alipay：支付宝打赏图片
• wechatpay：微信打赏图片

重新部署博客

hexo clean
hexo g
hexo s # 本次验证
hexo d # 验证无问题后部署

效果图

未点击打赏按钮时：

点击打赏按钮后：

---

蚂蚁🐜再小也是肉🥩！