自定义

头部 (Header)

页面顶部的完整导航系统，由多个子组件组成。

Header

主容器组件，整合所有头部子组件，包括 Logo、导航菜单、搜索、主题选择器等功能。

可通过创建 components/header/Header.vue 完全自定义整个头部结构。

HeaderLogo

显示站点 Logo 和名称，支持链接跳转。

HeaderCenter

桌面端导航菜单，使用 UNavigationMenu 组件渲染配置的导航链接。

可通过 useHeader() 组合式函数的 desktopLinks 自定义菜单内容。

HeaderBody

移动端导航内容，包含响应式导航菜单和文档目录导航。

HeaderBottom

文档页面专用的二级导航，以标签页形式显示主要文档分类。

仅在访问 /docs/ 路径时显示。

HeaderCTA

头部右侧的行动号召区域，默认在首页显示"Get Started"按钮，其他页面显示 AI 聊天入口。

页面组件

PageHeaderLinks

文档页面标题右侧的操作菜单，默认提供复制页面、复制链接、查看源码、AI 对话、MCP 服务器等功能。

DocsAsideLeftTop

文档页面左侧边栏顶部插槽，默认为空占位组件。

创建 components/DocsAsideLeftTop.vue 即可在左侧导航上方显示自定义内容。

DocsAsideLeftBody

文档页面左侧边栏主体内容插槽，默认为空占位组件。

创建 components/DocsAsideLeftBody.vue 即可在左侧导航主体区域显示自定义内容。

DocsAsideRightBottom

文档页面右侧边栏底部插槽，默认为空占位组件。

创建 components/DocsAsideRightBottom.vue 即可在右侧目录下方显示自定义内容。

页脚 (Footer)

页面底部布局组件。

Footer

主容器组件，整合页脚左右两侧内容，包含分隔线和布局样式。

FooterLeft

页脚左侧区域，通过 app/app.config.ts 中的 footer.credits 配置显示版权信息。

FooterRight

页脚右侧区域，通过 app/app.config.ts 中的 footer.socials 配置显示社交媒体链接按钮。

主题选择器 (ThemePicker)

ThemePicker

主题自定义工具，提供可视化界面调整：

• Primary：主色调（支持设置为黑色或预设颜色）
• Neutral：中性色
• Radius：圆角大小（0-3）
• Font：字体选择
• Icons：图标集选择
• Color Mode：颜色模式（亮色/暗色/系统）

修改后可导出 CSS 变量或 app/app.config.ts 配置。

ThemePickerButton

主题选择器内部使用的按钮组件，用于颜色、圆角等选项的选择。