FloatingNavLite - 侧边悬浮导航（无字版）
在桌面端前台页面侧边显示悬浮导航栏（仅图标版），支持首页、商品分类、购物车、用户中心、收藏夹等快捷入口。
✨ 特性
- ✅ 仅图标显示 - 简洁美观，不显示文字标签
- ✅ 5个可配置菜单项 - 支持自定义图标和链接
- ✅ Bootstrap Icons - 支持 2000+ 图标
- ✅ 悬停特效 - 鼠标悬停时图标变色
- ✅ 当前页面高亮 - 自动标记当前页面
- ✅ 回到顶部 - 滚动后出现回到顶部按钮
- ✅ 颜色可配置 - 支持自定义悬停和选中颜色
- ✅ 多语言链接 - 支持
{locale}变量
📋 要求
- InnoShop v1.0.0+
🔧 安装
- 将插件上传到
plugins/目录 - 进入后台：扩展 → 插件管理
- 找到 "FloatingNavLite" 并点击安装
- 启用插件
⚙️ 配置
进入：后台 → 插件 → FloatingNavLite → 设置
菜单项设置
每个菜单项可配置：
- 标签 - 仅用于无障碍访问（屏幕阅读器），前台不显示
- 链接 - 点击后跳转的地址
- 图标 - 选择 Bootstrap Icons 图标
颜色配置
- 滑过时图标颜色 - 鼠标悬停时图标颜色
- 滑过时背景颜色 - 鼠标悬停时背景颜色
- 选中时图标颜色 - 当前页面匹配时图标颜色
- 选中时背景颜色 - 当前页面匹配时背景颜色
🎨 图标选择
支持的图标类型（Bootstrap Icons）：
bi bi-house- 首页（房子）bi bi-grid- 分类（网格）bi bi-cart- 购物车bi bi-chat-dots- 聊天/客服bi bi-person- 用户/我的bi bi-heart- 收藏夹bi bi-search- 搜索bi bi-telephone- 电话bi bi-envelope- 邮件bi bi-share- 分享
🌐 多语言支持
链接支持 {locale} 变量，系统会自动替换为当前语言代码：
/{locale}/categories → /zh-cn/categories (中文)
→ /en/categories (英文)
如果只有一个语言，{locale} 会自动替换为空字符串。
📸 效果图
前台显示
- 右侧悬浮导航栏（仅图标）
- 鼠标悬停时图标变色
- 当前页面高亮显示
- 滚动后显示"回到顶部"按钮
后台设置
- 5个菜单项配置
- 图标选择器
- 颜色配置器
🆚 与 FloatingNav 的区别
| 特性 | FloatingNav | FloatingNavLite |
|---|---|---|
| 显示文字 | ✅ 是 | ❌ 否（仅图标） |
| 菜单项标签 | 双语（中/英） | 单标签（无障碍用） |
| 适用场景 | 需要文字说明 | 简洁设计风格 |
🐛 故障排除
图标不显示？
- 检查 Bootstrap Icons CSS 是否加载
- 确认图标类名正确（如
bi bi-house）
链接不工作？
- 检查链接格式是否正确
- 外部链接需要加
https://
颜色不生效？
- 清除浏览器缓存（
Ctrl + F5） - 检查颜色设置是否保存
📝 版本历史
v1.0.0 (2026-06-10)
- 初始版本
- 仅图标显示
- 支持5个菜单项
- 支持颜色自定义
📄 许可
OSL-3.0
👤 作者
- 作者: 半夏微凉
- 邮箱: ikwang@qq.com
⭐ 如果觉得这个插件有用，请给我们一个星标！