Repository navigation
Menu Management
本文档详细介绍 FlecBlog 管理后台中的菜单管理功能，涵盖菜单的新增、编辑、删除、类型说明以及前台展示效果，帮助你系统了解站点菜单的配置方式与展示逻辑。
菜单管理主要用于维护博客首页右上角聚合菜单、页面顶部导航菜单以及页脚菜单等站点入口内容。
系统支持三种类型的菜单，不同类型对应不同的前台显示位置与交互方式： 通过区分菜单类型，可以更灵活地管理不同区域的导航入口。
菜单列表页面提供以下常用功能： 这些功能覆盖了菜单日常维护中的常规操作。
菜单列表通常显示以下字段： 通过这些信息，管理员可以快速了解每个菜单项的名称、目标地址及前台排序位置。
菜单支持两种类型的图标： 如果填写的是图标类名，则会按图标字体方式渲染；如果填写的是图片地址，则会按图片方式显示。
菜单列表中支持以下操作：
其中，“新增菜单”用于创建顶级菜单项，“新增子菜单”用于在已有菜单下继续增加层级结构。
这些字段共同决定了菜单在前台的名称、位置、样式与跳转行为。
菜单链接可以配置为以下三种类型： 合理使用不同链接类型，可以让菜单既能承担导航功能，也能作为分组或容器存在。
菜单支持多层级子菜单配置，用于形成树形结构。实际使用中建议注意以下几点： 支持创建多层级子菜单，形成菜单树结构 子菜单继承父菜单的打开方式设置 建议菜单层级控制在 2-3 层以内 层级过深会影响前台可用性，因此建议优先保持结构清晰、路径直观。
表单验证通过后 创建菜单记录 显示成功提示 关闭对话框并刷新列表
编辑表单会自动填充当前菜单的已有信息，包括标题、链接、排序、图标和打开方式等全部字段。
表单验证通过后 更新菜单记录 显示成功提示 关闭对话框并刷新列表
删除前系统会弹出确认框，提示内容：确定要删除这个菜单吗？
删除菜单时需要注意以下几点： 删除父菜单时，子菜单会一并删除 删除后前台对应位置的菜单将不再显示 因此，在执行删除前建议先确认该菜单及其下级菜单是否仍在使用。
聚合菜单显示在首页右上角，点击触发按钮后会展开下拉菜单，适合集中放置常用入口。
触发按钮显示为「应用图标」 悬停展开，显示网格布局的子菜单（2 列） 只显示配置了子菜单的顶级菜单项 子菜单项显示图标和标题
这类菜单适合承载入口型功能，而不是承载层级复杂的导航内容。
导航菜单显示在页面顶部主导航栏，是用户浏览博客内容时的主要入口。
横向排列的菜单项 支持下拉子菜单 子菜单垂直展开 页面滚动时菜单可设置为自动隐藏
父菜单填写标题和链接 子菜单填写具体页面链接 子菜单项支持图标显示 这类菜单适合承载博客最核心的页面入口。
页脚菜单显示在页面底部的链接区域，适合放置说明类页面、辅助导航和补充入口。
按配置分组显示 每组显示标题和链接列表 链接悬停有高亮效果 自动包含「友链」分组（随机显示 3 个友链） 友链分组支持刷新功能
聚合菜单在前台通常具有以下交互特性： 鼠标悬停触发按钮显示下拉菜单 子菜单项以 2 列网格布局展示 支持图标和文字组合显示 悬停时子菜单项有背景高亮效果
导航菜单通常具备以下交互特性： 菜单项横向排列 悬停有高亮效果 带子菜单的项显示下拉箭头 悬停父菜单时子菜单垂直展开 页面滚动时支持自动隐藏效果
页脚菜单通常具备以下交互特性： 菜单按配置分组垂直排列 链接悬停显示背景高亮 友链分组显示随机 3 个友链 点击刷新图标可重新随机获取友链 外部链接自动在新窗口打开
不同屏幕宽度下，菜单展示方式会有所不同： 通过响应式适配，可以在不同终端上保持较好的导航体验与页面可读性。
| 类型 | 显示位置 | 说明 |
|---|---|---|
| 聚合菜单 | 首页右上角 | 点击展开的网格布局菜单 |
| 导航菜单 | 页面顶部 | 主导航栏菜单，支持下拉子菜单 |
| 页脚菜单 | 页面底部 | 页脚链接区域 |
| 功能 | 说明 |
|---|---|
| 类型切换 | 切换查看不同类型的菜单 |
| 新增菜单 | 添加顶级菜单 |
| 新增子菜单 | 为现有菜单添加子菜单 |
| 编辑 | 修改菜单信息 |
| 删除 | 删除菜单（需二次确认） |
| 刷新 | 重新加载菜单列表 |
| 字段 | 说明 |
|---|---|
| 菜单标题 | 菜单的显示名称，支持图标 |
| 链接地址 | 菜单指向的 URL |
| 排序 | 菜单的显示顺序（数值越小越靠前） |
| 图标类型 | 判断方式 | 示例 |
|---|---|---|
| Remix Icon | 非 URL 格式 | ri-home-line |
| 图片图标 | http://、https://、/ 开头 | https://example.com/icon.png |
| 操作 | 说明 |
|---|---|
| 新增菜单 | 添加顶级菜单 |
| 新增子菜单 | 为现有菜单添加子菜单 |
| 编辑 | 修改菜单信息 |
| 删除 | 删除菜单，需二次确认 |
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 菜单标题 | 输入框 | 是 | 菜单显示的名称，1-50 字符 |
| 链接地址 | 输入框 | 是 | 菜单跳转的 URL |
| 排序值 | 数字输入 | 是 | 数值越小排序越靠前，默认 5 |
| 菜单图标 | 输入框 | 否 | Remix Icon 或图片 URL |
| 打开方式 | 下拉选择 | 否 | 当前窗口 / 新窗口，默认当前窗口 |
| 类型 | 说明 | 示例 |
|---|---|---|
| 内部链接 | 指向博客内部的页面 | /、/posts、/friend |
| 外部链接 | 指向外部网站的 URL | https://github.com |
| 空链接 | 不跳转，用于分组标题 | javascript:void(0) |
| 标题 | 链接 | 图标 | 说明 |
|---|---|---|---|
| 搜索 | javascript:void(0) | ri-search-line | 搜索入口 |
| 通知 | /notifications | ri-notification-3-line | 通知入口 |
| 登录 | /login | ri-user-line | 登录入口 |
| 关于 | /about | ri-information-line | 关于页面入口 |
| 标题 | 链接 | 图标 | 说明 |
|---|---|---|---|
| 首页 | / | ri-home-line | 博客首页 |
| 文章 | /posts | ri-article-line | 文章列表页 |
| 动态 | /moment | ri-bubble-chart-line | 动态页面 |
| 友链 | /friend | ri-user-heart-line | 友链页面 |
| 关于 | /about | ri-service-line | 关于页面 |
| 标题 | 链接 | 说明 |
|---|---|---|
| 关于本站 | /about | 关于页面 |
| 隐私政策 | /privacy | 隐私政策页面 |
| 留言板 | /message | 留言板页面 |
| 版权声明 | /copyright | 版权声明页面 |
| 屏幕宽度 | 导航菜单 | 页脚菜单 |
|---|---|---|
| 桌面端 | 完整显示 | 多列网格布局 |
| 平板端 | 完整显示 | 3 列网格布局 |
| 移动端 | 不显示 | 单列网格布局 |
相关页面：