49
用Trae开发的第一个插件,就拿最简单的轮播图练练手。
插件功能:在首页列表上方,加一个轮播图。可以最多设置5张轮播图,并且支持移动顺序。
效果演示:https://yuminga.com/
首页轮播图插件功能简介
📌 基本信息
- 插件名称:首页轮播图
- 插件ID:
home-carousel - 版本:1.0.0
- 作者:秦始黄
🎨 前端功能
-
轮播图展示
- 在首页帖子列表上方显示轮播图
- 支持 PC 端和移动端自适应显示
- 宽度自动填充,高度自动调整
-
自动轮播
- 每 5 秒自动切换到下一张
- 支持手动左右切换
- 支持点击指示器快速跳转
-
交互功能
- 点击轮播图可跳转到指定链接(新窗口打开)
- 鼠标移入显示手型光标
- 左右切换按钮柔和显示,支持暗黑/白天模式
-
视觉效果
- 支持添加标题,覆盖在图片底部
- 圆角边框设计
- 与系统主题完美融合
⚙️ 后台管理功能
-
轮播图管理
- 最多添加 5 张轮播图
- 支持上移/下移调整顺序
- 支持删除轮播图
-
图片上传
- 支持本地上传图片(上传到
/uploads/carousel) - 支持直接填写图片地址
- 建议尺寸提示(1600px × 500px,16:5 宽高比)
- 实时预览效果
- 支持本地上传图片(上传到
-
内容配置
- 设置跳转链接(可选)
- 设置标题文字(可选)
-
保存功能
- 一键保存所有更改
- 操作成功/失败即时反馈
- 输入框交互流畅不丢焦点
🔧 技术特点
- 基于 Rhex 插件系统开发
- 使用 Preact 渲染轮播组件
- 支持 SPA 路由导航后的重新渲染
- 数据存储使用插件配置 API
- UI 风格与系统后台一致
📂 插件文件结构
textaddons/home-carousel/ ├── addon.json # 插件配置 ├── dist/ │ └── server.mjs # 服务端渲染逻辑 └── assets/ └── admin.js # 后台管理界面
附件列表
站内附件
home-carousel.zip
ZIP · 8 KB · 下载 1回复可下
登录并回复本帖后可下载
域名论坛 yuminga.com
第 1 条附言·8分钟前
v1.0.1 更新内容:
优化前端代码,移除对外部 esm.sh 的依赖
使用纯原生 JavaScript 实现轮播图功能
提升加载速度和稳定性
增强了 SPA 路由切换后的兼容性