79 lines
3.1 KiB
Markdown
79 lines
3.1 KiB
Markdown
# 导航栏
|
||
|
||
导航栏是站点全局可见的核心组件，承载着页面导航、搜索入口和主题切换等功能。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) — 导航菜单配置步骤
|