update README.md

2026-05-19 17:25:43 +08:00
parent 31997e51c8
commit 5194d14fb0
57 changed files with 39100 additions and 0 deletions
@@ -0,0 +1,78 @@
+# 导航栏
+
+导航栏是站点全局可见的核心组件，承载着页面导航、搜索入口和主题切换等功能。WarmIsland 提供了三种导航栏样式和灵活的功能开关。
+
+## 配置项一览
+
+| 配置项 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `navbar_style` | 下拉 | `glass` | 导航栏样式：`glass` / `minimal` / `float` |
+| `navbar_show_search` | 开关 | `true` | 显示搜索按钮 |
+| `navbar_show_theme_switch` | 开关 | `true` | 显示主题切换按钮 |
+
+## 详细说明
+
+### 导航栏样式（navbar_style）
+
+| 值 | 说明 |
+| --- | --- |
+| `glass` | 毛玻璃效果，背景模糊半透明，与页面内容产生层次感（默认） |
+| `minimal` | 极简风格，纯色背景，线条简洁，适合内容导向型站点 |
+| `float` | 浮动样式，导航栏悬浮于内容之上，带有圆角和阴影 |
+
+::: tip
+`glass` 样式在滚动时会产生毛玻璃模糊效果，视觉效果最佳但需要浏览器支持 `backdrop-filter`。在不支持的浏览器中会自动降级为半透明背景。
+:::
+
+### 显示搜索按钮（navbar_show_search）
+
+开启后，导航栏右侧会显示搜索按钮。点击按钮或按 `Ctrl + K`（macOS 为 `⌘ + K`）快捷键即可打开搜索面板。
+
+::: danger
+搜索功能依赖 Halo 的 **PluginSearchWidget** 插件。如果未安装此插件，搜索按钮将无法正常工作。请确保已在 Halo 后台安装并启用该插件。
+
+安装方式：Halo 后台 → **插件** → **安装** → 搜索「Search Widget」→ 安装并启用。
+:::
+
+### 显示主题切换按钮（navbar_show_theme_switch）
+
+开启后，导航栏右侧会显示主题切换按钮，访客可以在浅色/深色模式之间切换。按钮的标签文案可在 [基础设置](/config/basic) 中的 `label_theme_switch` 配置项自定义。
+
+## 菜单配置
+
+导航栏的菜单项通过 Halo 后台管理，而非主题设置面板。配置步骤如下：
+
+1. 登录 Halo 后台管理控制台
+2. 进入 **菜单** → 创建或编辑菜单组
+3. 添加菜单项，支持以下类型：
+   - **页面** — 链接到已创建的页面
+   - **分类** — 链接到文章分类
+   - **自定义链接** — 任意 URL
+4. 确保菜单组被设置为主菜单（主题会自动读取主菜单渲染导航栏）
+
+::: tip
+建议菜单项数量控制在 5–7 个以内，过多会导致移动端体验下降。移动端会自动切换为汉堡菜单（☰），点击后展开侧滑菜单面板。
+:::
+
+## 快捷键
+
+| 快捷键 | 功能 |
+| --- | --- |
+| `Ctrl + K` / `⌘ + K` | 打开搜索面板 |
+| `Esc` | 关闭搜索面板 |
+
+## 移动端适配
+
+在移动端（屏幕宽度 ≤ 768px），导航栏会自动进行以下调整：
+
+- 菜单项折叠为汉堡菜单（☰）
+- 点击汉堡图标展开侧滑菜单面板
+- 搜索和主题切换按钮移入侧滑菜单
+- 导航栏高度适当缩减以节省屏幕空间
+
+## 相关页面
+
+- [基础设置](/config/basic) — 站点名称、Logo、标签文案配置
+- [样式设置](/config/style) — 配色方案与动画效果配置
+- [Hero 首屏](/config/hero) — 首屏区域配置
+- [快速开始](/guide/getting-started) — 导航菜单配置步骤