3.1 KiB
3.1 KiB
导航栏
导航栏是站点全局可见的核心组件，承载着页面导航、搜索入口和主题切换等功能。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）
开启后，导航栏右侧会显示主题切换按钮，访客可以在浅色/深色模式之间切换。按钮的标签文案可在 基础设置 中的 label_theme_switch 配置项自定义。
菜单配置
导航栏的菜单项通过 Halo 后台管理，而非主题设置面板。配置步骤如下：
- 登录 Halo 后台管理控制台
- 进入 菜单 → 创建或编辑菜单组
- 添加菜单项，支持以下类型：
- 页面 — 链接到已创建的页面
- 分类 — 链接到文章分类
- 自定义链接 — 任意 URL
- 确保菜单组被设置为主菜单（主题会自动读取主菜单渲染导航栏）
::: tip 建议菜单项数量控制在 5–7 个以内，过多会导致移动端体验下降。移动端会自动切换为汉堡菜单（☰），点击后展开侧滑菜单面板。 :::
快捷键
| 快捷键 | 功能 |
|---|---|
Ctrl + K / ⌘ + K |
打开搜索面板 |
Esc |
关闭搜索面板 |
移动端适配
在移动端（屏幕宽度 ≤ 768px），导航栏会自动进行以下调整：
- 菜单项折叠为汉堡菜单（☰）
- 点击汉堡图标展开侧滑菜单面板
- 搜索和主题切换按钮移入侧滑菜单
- 导航栏高度适当缩减以节省屏幕空间