幻灯片轮播运维
详情介绍
一、插件简介
幻灯片轮播(slider)在社区 首页中间栏(plaza_feed_slider 插槽)输出自适应轮播图,支持自动播放、指示点与左右切换。后台可管理多条幻灯片:图片、跳转链接、排序与显示状态。
数据库支持 home(首页)与 auth(登录弹窗)两种展示位;当前前台渲染实现以首页 `home` 位为主(renderSlot 仅响应 plaza_feed_slider)。
- 前台入口:社区首页中间信息流顶部(轮播区域)
- 后台入口:插件列表 → 幻灯片
二、核心能力
| 能力 | 说明 |
|---|---|
| 首页轮播 | 插槽 plaza_feed_slider,类名 uc-slider |
| 自动播放 | 可配置间隔毫秒;填 0 不自动播放 |
| 宽高比 | 最小约 7:3,过高图片按 cover 裁剪,避免撑高版面 |
| 图片尺寸缓存 | 本地/远程探测宽高,写入 DB 与 runtime/slider_dims 缓存 |
| 跳转 | 支持站内路径或外链;_blank / _self |
| 后台管理 | 增删改、排序、显示/隐藏 |
三、依赖与安装
建议环境:
- 已安装 社区(community) 插件(首页布局与
ui.js轮播脚本)
安装步骤:
- 应用中心安装并启用「幻灯片轮播」
- 配置启用与自动播放间隔
- 后台「幻灯片」新增条目并上传图片
- 打开社区首页确认轮播出现
数据表:
slider_item:幻灯片条目(含slot、image_w/image_h)
四、应用中心基础配置
路径:应用中心 → 幻灯片轮播 → 配置
| 配置项 | 说明 | 建议 |
|---|---|---|
| 启用轮播 | 关闭后前台不输出幻灯片 | 开启 |
| 自动播放间隔(毫秒) | 3000–8000;0 表示不自动播放 | 5000 |
五、后台重点配置
路径:插件列表 → 幻灯片
| 字段 | 说明 |
|---|---|
| 标题 | 展示文案或后台备注 |
| 幻灯片图片 | 建议宽图约 1200×320;支持上传或外链 |
| 跳转链接 | 可留空 |
| 打开方式 | 新窗口 / 当前窗口 |
| 展示位置 | 表单默认 home;数据层支持 auth(登录弹窗位,需主题集成) |
| 排序 | 数字越小越靠前 |
| 状态 | 显示 / 隐藏 |
图片上传可走后台上传按钮或先在「文件管理」上传后填写路径。
六、前台用户流程
- 访客打开 社区首页
- 中间栏顶部展示轮播(有多张时可自动切换、点指示器或箭头切换)
- 点击图片按配置跳转目标页
无独立用户操作页;纯展示组件。
七、后台审核与运维
无审核流程。运维要点:
- 定期更换活动图与链接
- 隐藏过期条目(
status=0)而非删除,便于复用 - 大图建议压缩,避免首屏过慢
八、特殊说明
8.1 钩子
renderSlot('plaza_feed_slider')→renderHome()- 社区
index.html:{:hook_slot('plaza_feed_slider')} - 轮播交互由
community/static/ui.js初始化.uc-slider
8.2 后台路由(节选)
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /admin/slider | 管理页 |
| GET | /admin/slider/list | 列表数据 |
| POST | /admin/slider/save | 保存 |
| POST | /admin/slider/delete | 删除 |
| POST | /admin/slider/status | 显示状态 |
8.3 登录弹窗位(auth)
plugin.json 描述支持登录弹窗左侧海报;后台 slot=auth 可入库,社区 ui.js 含 uc-auth-slider 样式逻辑。若主题未挂载 auth 位渲染,仅 home 位会在首页生效。
九、推荐上线清单
- 启用轮播并设置合理间隔
- 上传 1–5 张比例合适的横幅图
- 检查移动端首屏高度与加载速度
- 验证链接与打开方式
- 仅一张图时确认不显示多余箭头/圆点
十、常见问题
Q:首页没有轮播? 检查「启用轮播」、是否有 status=1 且 image 非空的 home 位条目、slider 插件是否安装。
Q:图片变形或过高? 轮播强制最小宽高比 7:3;请使用宽横幅图或接受 cover 裁剪。
Q:不自动播放? 间隔填 0 或仅一张图时不会自动切换。
Q:auth 位设置了不显示? 当前 slidesForSlot() 固定查询 home;登录弹窗位需等待主题/插件联调渲染 auth 位。
更新记录 (4)
-
v1.0.4
2026-08-28
轮播图走 chrome 代理
-
v1.0.3
2026-08-26
修复未填写轮播图标题显示错误问题
-
v1.0.2
2026-08-24
优化外链图片加载方式
-
v1.0.1
2026-08-24
首次发布