帝国cms如何实现简单的文章打赏功能_帝国cms文章打赏功能实现方法-帝国CMS-PHP中文网

帝国cms如何实现简单的文章打赏功能_帝国cms文章打赏功能实现方法

裘德小鎮的故事

发布： 2025-09-30 19:24:01

原创

910人浏览过

通过添加字段和前端代码实现打赏功能：1. 后台为数据表增加is_reward和reward_amount字段；2. 模板中用条件标签判断并显示打赏按钮；3. 添加CSS和JS实现点击弹出二维码；4. 可选创建数据表记录打赏信息。

帝国cms如何实现简单的文章打赏功能_帝国cms文章打赏功能实现方法

帝国CMS本身没有内置文章打赏功能，但可以通过简单的HTML+CSS+JS结合后台字段扩展的方式实现一个基础的打赏模块。下面介绍一种实用、易操作的实现方法。

1. 添加打赏开关和金额字段

进入帝国CMS后台，为数据表添加两个字段，用于控制打赏是否开启以及设置默认打赏金额：

字段名：is_reward（开关，0=关闭，1=开启）
字段名：reward_amount（默认金额，如：5,10,20元）

在“系统”→“管理数据表”→选择对应的数据表（如新闻系统数据表）→“管理字段”→“增加字段”，完成后记得在“修改数据表”中将这两个字段勾选到可编辑项目中。

2. 前台内容页添加打赏按钮

打开对应的内容模板（如 article.template.html），在合适位置插入打赏触发按钮：

[!--if $navinfor['is_reward']==1--]

如果觉得本文对你有帮助，欢迎打赏支持！

[!--endif--]

3. 弹出打赏金额与二维码

接着在页面底部或</body>前加入以下JS和样式，实现点击弹窗展示打赏选项：

AI新媒体文章

专为新媒体人打造的AI写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能

查看详情

<style>
#rewardModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  text-align: center;
  padding-top: 15%;
}
#rewardModal img {
  width: 200px; height: 200px;
  margin: 10px;
  border-radius: 8px;
}
.reward-close {
  color: #fff;
  font-size: 28px;
  position: absolute;
  top: 10px; right: 20px;
  cursor: pointer;
}
</style>

<div id="rewardModal">
  <span class="reward-close" onclick="document.getElementById('rewardModal').style.display='none'">&times;</span>
  <h3 style="color:#fff;margin-bottom:15px;">选择打赏金额</h3>
  <img src="/images/reward_5.png" alt="5元">
  <img src="/images/reward_10.png" alt="10元">
  <img src="/images/reward_20.png" alt="20元">
  <p style="color:#ccc;margin-top:20px;">长按二维码完成支付</p>
</div>

<script>
document.getElementById('showReward')?.addEventListener('click', function() {
  document.getElementById('rewardModal').style.display = 'block';
});
</script>

登录后复制

注意：/images/reward_x.png 是你提前准备好的微信/支付宝收款二维码图片，需上传至服务器对应目录。