49

用Trae开发的第一个插件,就拿最简单的轮播图练练手。
插件功能:在首页列表上方,加一个轮播图。可以最多设置5张轮播图,并且支持移动顺序。

效果演示:https://yuminga.com/

首页轮播图插件功能简介

📌 基本信息

  • 插件名称:首页轮播图
  • 插件IDhome-carousel
  • 版本:1.0.0
  • 作者:秦始黄

🎨 前端功能

  1. 轮播图展示

    • 在首页帖子列表上方显示轮播图
    • 支持 PC 端和移动端自适应显示
    • 宽度自动填充,高度自动调整
  2. 自动轮播

    • 每 5 秒自动切换到下一张
    • 支持手动左右切换
    • 支持点击指示器快速跳转
  3. 交互功能

    • 点击轮播图可跳转到指定链接(新窗口打开)
    • 鼠标移入显示手型光标
    • 左右切换按钮柔和显示,支持暗黑/白天模式
  4. 视觉效果

    • 支持添加标题,覆盖在图片底部
    • 圆角边框设计
    • 与系统主题完美融合

⚙️ 后台管理功能

  1. 轮播图管理

    • 最多添加 5 张轮播图
    • 支持上移/下移调整顺序
    • 支持删除轮播图
  2. 图片上传

    • 支持本地上传图片(上传到 /uploads/carousel
    • 支持直接填写图片地址
    • 建议尺寸提示(1600px × 500px,16:5 宽高比)
    • 实时预览效果
  3. 内容配置

    • 设置跳转链接(可选)
    • 设置标题文字(可选)
  4. 保存功能

    • 一键保存所有更改
    • 操作成功/失败即时反馈
    • 输入框交互流畅不丢焦点

🔧 技术特点

  • 基于 Rhex 插件系统开发
  • 使用 Preact 渲染轮播组件
  • 支持 SPA 路由导航后的重新渲染
  • 数据存储使用插件配置 API
  • UI 风格与系统后台一致

📂 插件文件结构

text
addons/home-carousel/ ├── addon.json # 插件配置 ├── dist/ │ └── server.mjs # 服务端渲染逻辑 └── assets/ └── admin.js # 后台管理界面

附件列表

1
站内附件

home-carousel.zip

ZIP · 8 KB · 下载 1回复可下
登录并回复本帖后可下载

域名论坛 yuminga.com

1 条附言·8分钟前

v1.0.1 更新内容:

优化前端代码,移除对外部 esm.sh 的依赖
使用纯原生 JavaScript 实现轮播图功能
提升加载速度和稳定性
增强了 SPA 路由切换后的兼容性

回复讨论
3

登录后可参与回复讨论。

文明发言,理性讨论
Blue·53分钟前
1
1
秦始黄 OP·1分钟前