自定义

Docus 构建在 Nuxt 4 之上，Nuxt 4 提供灵活的组件 layer 系统，允许你在自己的应用中重新定义特定组件来覆盖部分 UI。这样你无需修改核心主题，就能轻松完整地自定义文档的视觉外观和行为。

要覆盖组件，只需在 components/ 目录中创建同名 Vue 文件。Docus 会自动使用你的版本替代默认组件。

App Header

你可以通过覆盖以下组件来自定义页眉的不同部分：

AppHeaderLogo

对于修改 Logo 尺寸这类简单调整，可以在 app.config.ts 中使用 logo.class 选项，无需覆盖组件（例如 class: 'h-8'）。

要完全替换页眉中的默认 Logo，请创建 components/AppHeaderLogo.vue 文件。你的组件会替换 Docus 主题提供的默认组件。你可以使用 useLogoAssets() composable 保留带复制和下载操作的右键上下文菜单。

AppHeaderLeft

Logo 位于默认首页链接包装器中。如果你想修改该链接（URL、属性）或 AppHeaderLogo 周围的布局，请改为覆盖 components/AppHeaderLeft.vue。

AppHeaderCTA

要自定义页眉中的行动号召区域（例如添加 “Get Started” 按钮或外部链接），请覆盖 components/AppHeaderCTA.vue 组件。

AppHeaderCenter

要自定义页眉中间区域，请覆盖 components/AppHeaderCenter.vue 组件。你的组件会替换 Docus 主题提供的搜索栏。

AppHeaderBody

默认情况下，在移动端打开菜单时，Docus 会使用 ContentNavigation 组件把 content/ 文件夹树显示为菜单。你可以用 components/AppHeaderBody.vue 组件覆盖这个菜单，并填充移动端页眉下方的菜单主体。

AppHeaderBottomRight

当 navigation.sub 设置为 'header' 时，Docus 会在页眉下方渲染二级标签栏。要在该栏右侧添加自定义内容（例如开关或徽章），请创建 components/AppHeaderBottomRight.vue 组件。

App Footer

你可以通过覆盖以下组件来自定义页脚的不同部分：

AppFooterLeft

要替换页脚左侧，请创建 components/AppFooterLeft.vue 文件。你的组件会替换 Docus 主题提供的默认组件。

AppFooterRight

要替换页脚右侧，请创建 components/AppFooterRight.vue 文件。你的组件会替换 Docus 主题提供的默认组件。

Docs

你也可以自定义文档页面的页眉和左右侧栏。

DocsPageHeaderLinks

在文档页面页眉右侧，Docus 默认会显示一个下拉菜单，包含与当前页面 Markdown 源文件相关的快捷操作。它允许读者：

• 复制原始 .md 文件的直接链接到剪贴板。
• 在新浏览器标签页中查看 Markdown 源文件。
• 在 ChatGPT 或 Claude 中打开页面内容，并预填用于分析 Markdown 文件的 prompt。

这些操作对贡献者、读者或 AI 辅助工作流尤其有用，但你也可以创建自己的 components/DocsPageHeaderLinks.vue 组件来覆盖它。

DocsAsideRight

要完全替换文档页面右侧栏，请创建 components/DocsAsideRight.vue 组件。

DocsAsideRightBottom

要自定义文档页面右侧栏底部，可以创建 components/DocsAsideRightBottom.vue 组件。你的组件会替换 Docus 主题提供的默认底部目录区域。

DocsAsideLeftTop

要自定义文档页面左侧栏顶部，可以创建 components/DocsAsideLeftTop.vue 组件。

DocsAsideLeftBody

要自定义文档页面左侧栏主体，可以创建 components/DocsAsideLeftTop.vue 组件。你的组件会替换 Docus 主题提供的默认文件导航。

自定义图标

Docus 使用 Nuxt Icon 和 Iconify provider，让你开箱即可访问数千个图标（例如 i-lucide-arrow-right、i-simple-icons-github）。

要添加自己的图标，请把 SVG 文件放到应用的 assets/icons/ 目录中。它们会自动注册到 custom 前缀下，并可在项目任意位置使用。

assets/
  icons/
    my-logo.svg

然后你可以使用 i-custom: 前缀引用它们：

---
navigation:
  icon: i-custom:my-logo
---

export default defineAppConfig({
  toc: {
    bottom: {
      links: [{
        icon: 'i-custom:my-logo',
        label: 'Preview',
        to: '/preview'
      }]
    }
  }
})

<template>
  <UIcon name="i-custom:my-logo" />
</template>