---
title: "自定义"
description: "在 components/ 目录中创建同名 Vue 文件即可覆盖内置组件。涵盖头部 Logo、桌面端导航菜单、移动端抽屉、页脚、左侧/右侧侧边栏插槽及主题选择器等所有界面区域的完整自定义指南，附默认组件源码链接。"
seo_title: "Customization"
seo_description: "Customize Movk Nuxt Docs by overriding built-in Vue components for the header, navigation, drawers, footer, sidebars, and theme picker."
canonical_url: "https://docs.mhaibaraai.cn/docs/getting-started/customization"
---
# 自定义

> 在 components/ 目录中创建同名 Vue 文件即可覆盖内置组件。涵盖头部 Logo、桌面端导航菜单、移动端抽屉、页脚、左侧/右侧侧边栏插槽及主题选择器等所有界面区域的完整自定义指南，附默认组件源码链接。

> \[\!TIP\]
> 
> 在 
> 
> components/
> 
>  目录下创建同名 Vue 文件即可覆盖组件。

## 头部 (Header)

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

### `Header`

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

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

### `HeaderLogo`

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

![HeaderLogo](/components/HeaderLogo.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/header/HeaderLogo.vue)

### `HeaderCenter`

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

![HeaderCenter](/components/HeaderCenter.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/header/HeaderCenter.vue)

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

### `HeaderBody`

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

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/header/HeaderBody.vue)

### `HeaderBottom`

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

![HeaderBottom](/components/HeaderBottom.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/header/HeaderBottom.vue)

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

### `HeaderCTA`

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

![HeaderCTA](/components/HeaderCTA.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/header/HeaderCTA.vue)

## 页面组件

### `PageHeaderLinks`

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

![PageHeaderLinks](/components/PageHeaderLinks.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/PageHeaderLinks.vue)

### `DocsAsideLeftTop`

文档页面左侧边栏顶部插槽（`UPageAside` 的 `#top` 粘性区域），默认承载导航过滤框：当 [`aside.filter.enabled`](/docs/getting-started/configuration) 开启且当前分组导航项数达到阈值时显示。

![DocsAsideLeftTop](/components/DocsAsideLeftTop.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/DocsAsideLeftTop.vue)

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

### `DocsAsideLeftBody`

文档页面左侧边栏主体内容插槽，默认渲染当前文档区段的分类导航，并在过滤框有输入时按标题与描述过滤。

![DocsAsideLeftBody](/components/DocsAsideLeftBody.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/DocsAsideLeftBody.vue)

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

### `DocsAsideRightBottom`

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

![DocsAsideRightBottom](/components/DocsAsideRightBottom.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/DocsAsideRightBottom.vue)

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

## 页脚 (Footer)

页面底部布局组件。

### `Footer`

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

![Footer](/components/Footer.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/footer/Footer.vue)

### `FooterLeft`

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

![FooterLeft](/components/FooterLeft.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/footer/FooterLeft.vue)

### `FooterRight`

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

![FooterRight](/components/FooterRight.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/footer/FooterRight.vue)

## 主题选择器 (ThemePicker)

### `ThemePicker`

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

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

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

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/theme-picker/ThemePicker.vue)

### `ThemePickerButton`

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

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/theme-picker/ThemePickerButton.vue)


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.