【插件发布】移动端底部导航：可视化配置常用入口与导航样式

在移动端使用社区时，首页、圈子、发帖、消息和个人中心都是高频入口。如果这些功能只能通过侧边栏或多级菜单访问，操作路径会比较长。

因此我制作了「移动端底部导航」插件，通过 Rhex 原生插件系统，为社区增加可配置的移动端底部导航，并提供后台管理页面和实时预览。

主要功能

• 支持配置最多 7 个导航入口
• 支持入口名称、链接和 Lucide 图标
• 支持入口名称留空，仅显示图标
• 支持设置路由匹配规则并自动高亮当前入口
• 支持指定入口突出显示，例如中间的发帖按钮
• 支持为入口设置登录要求
• 未登录访问受限入口时，可在登录后返回目标页面
• 支持浮动胶囊和贴底通栏两种布局
• 支持半透明毛玻璃和纯色背景
• 支持浅色、深色背景及图标颜色设置
• 支持隐藏指定页面
• 自动适配 iPhone 等设备的底部安全区域
• 自动避让软键盘和返回顶部按钮
• 默认仅在移动设备显示，桌面端不受影响

尺寸自定义

插件提供 9 项尺寸调节：

• 底部间距
• 导航高度
• 左右边距
• 导航圆角
• 普通图标大小
• 入口文字大小
• 强调按钮大小
• 强调图标大小
• 强调按钮上移距离

所有尺寸都可以通过后台滑块调整，并在右侧移动端预览中实时查看效果。

后台管理

安装并启用插件后，进入：

Rhex 后台 → 插件管理 → 移动端底部导航

后台支持：

• 添加、删除和排序导航入口
• 点击整行进入入口设置
• 开启或关闭单个入口
• 设置入口名称、图标和跳转链接
• 设置高亮匹配路径
• 设置登录权限和突出显示
• 实时预览导航布局
• 一键恢复默认配置

入口名称允许留空。留空后不会显示占位文字，只保留对应图标。

默认导航

插件首次安装默认提供以下入口：

1. 首页
2. 圈子
3. 发帖
4. 消息
5. 我的

所有入口都可以在后台修改，也可以根据站点需求重新排序或替换。

安装方法

1. 下载附件 mobile-bottom-navigation-1.0.3-miya.zip
2. 进入 Rhex 后台的“插件管理”
3. 上传 ZIP 安装包
4. 启用“移动端底部导航”
5. 打开插件管理页面
6. 根据站点结构设置入口和显示样式
7. 保存配置后返回移动端前台查看效果

插件使用 Rhex 原生插件接口实现，不需要修改 Rhex 核心代码。

环境要求

• 已在 Rhex 1.1.0 完成安装验证
• Rhex 已启用原生插件系统
• 站点需要允许执行可信插件服务端代码
• 正式站点建议使用 HTTPS
• 推荐使用最新版 Chrome、Safari、Edge 或 Firefox

1.0.3 更新内容

• 新增 9 项导航尺寸调节
• 支持入口名称留空
• 修复空名称无法保存的问题
• 修复强调按钮图标与文字可能重叠的问题
• 修复页面首次打开时导航短暂闪动的问题
• 优化后台设置页面和实时预览
• 优化移动端安全区域适配
• 优化导航挂载逻辑，避免重复渲染
• 完善桌面端隐藏和页面切换处理

测试情况

该版本已完成以下测试：

• Rhex 原生插件上传、安装和启用
• 插件升级和配置保留
• 首页、圈子及具体板块页面
• 当前页面自动高亮
• 未登录发帖与登录回跳
• 空名称图标入口
• 强调按钮与入口文字间距
• 九个尺寸滑块最小值和最大值组合
• 浮动胶囊与贴底通栏布局
• 桌面端自动隐藏
• 软键盘和返回顶部按钮避让
• 深色和浅色背景
• 后台实时预览
• 页面首次加载和客户端路由切换
• Chrome 桌面端及移动端视口

下载与校验

作者：Miya
版本：1.0.3
附件：mobile-bottom-navigation-1.0.3-miya.zip

SHA-256：

text
A2E364250AC306471071DF03892428F97090C9AEA6F385E9F1DBFAAA9AFA9739
使用中遇到问题时，请附上 Rhex 版本、浏览器版本、导航配置、复现步骤和相关截图，方便定位。该插件将持续更新。

后续更新地址：
https://xingqiuwu.com/article/1536