自定义

TockDocs 基于 Nuxt 4 构建，提供灵活的组件层系统，允许您通过在自有应用中重新定义特定组件来覆盖 UI 的部分区域。这使得在不触及核心主题的情况下，轻松自定义文档的视觉外观和行为成为可能。

要覆盖组件，只需在 components/ 目录中创建一个同名的 Vue 文件。TockDocs 将自动使用您的版本而非默认版本。

应用页头

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

AppHeaderLogo

对于简单的调整（如更改 logo 大小），您可以使用 app.config.ts 中的 logo.class 选项而无需覆盖组件（例如 class: 'h-8'）。

要完全替换页头中的默认 logo，请创建 components/AppHeaderLogo.vue 文件。您的组件将替换 TockDocs 主题提供的默认组件。您可以使用 useLogoAssets() 组合式函数来保留带复制和下载操作的右键上下文菜单。

AppHeaderLeft

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

AppHeaderCTA

要自定义页头中的行动号召区域（例如添加「开始使用」按钮或外部链接），请覆盖 components/AppHeaderCTA.vue 组件。

AppHeaderCenter

要自定义页头的中间区域，请覆盖 components/AppHeaderCenter.vue 组件。您的组件将替换 TockDocs 主题提供的搜索栏。

AppHeaderBody

默认情况下，在移动端打开菜单时，TockDocs 会使用 ContentNavigation 组件将您的 content/ 目录树显示为菜单。您可以使用 components/AppHeaderBody.vue 组件覆盖此菜单，并在移动端填充菜单内容（页头下方）。

AppHeaderBottomRight

当 navigation.sub 设置为 'header' 时，TockDocs 会在页头下方渲染辅助标签栏。要在此栏右侧添加自定义内容（如开关、徽章），请创建 components/AppHeaderBottomRight.vue 组件。

应用页脚

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

AppFooterLeft

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

AppFooterRight

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

文档页面

您还可以自定义文档页面的页头和两侧边栏。

DocsPageHeaderLinks

在文档页面的右侧页头区域，TockDocs 的默认行为是显示一个下拉菜单，其中包含与当前页面 Markdown 源相关的快速操作。它允许文档读者：

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

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

DocsAsideRight

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

DocsAsideRightBottom

要自定义文档页面右侧边栏的底部部分，请创建 components/DocsAsideRightBottom.vue 组件。您的组件将替换 TockDocs 主题提供的默认底部目录。

DocsAsideLeftTop

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

DocsAsideLeftBody

要自定义文档页面左侧边栏的主要部分，请创建 components/DocsAsideLeftBody.vue 组件。您的组件将替换 TockDocs 主题提供的默认文件导航。

自定义图标

TockDocs 使用 Nuxt Icon 搭配 Iconify 提供商，让您开箱即用数以千计的图标（例如 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: '预览',
          to: '/preview',
        },
      ],
    },
  },
})

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