VitePress 扩展主题

完全从零开始创建一个自定义主题可能很复杂。在很多情况下，你可能只是想对默认主题进行一些调整或添加一些新功能。VitePress 允许你扩展默认主题，这是一种更简单、更推荐的定制方式。

继承默认主题

要扩展默认主题，你需要在 .vitepress/theme/index.js 中导入它，并将其作为你自定义主题的基础进行导出。

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'

export default {
  ...DefaultTheme,
  // 在这里添加你的自定义逻辑
}

通过这种方式，你的主题将继承默认主题的所有组件、样式和功能。

使用 Vue 插槽 (Slots)

默认主题的布局组件在关键位置暴露了 Vue 的插槽（Slots），让你可以在不修改主题源代码的情况下，向特定区域注入自定义内容或组件。

可用插槽

layout-top
layout-bottom
nav-bar-title-before
nav-bar-title-after
nav-bar-content-before
nav-bar-content-after
sidebar-nav-before
sidebar-nav-after
page-top
page-bottom
doc-footer-before
doc-before
doc-after
aside-top
aside-bottom

如何使用

创建布局组件

在 .vitepress/theme 目录下创建一个布局组件，例如 Layout.vue。

<!-- .vitepress/theme/Layout.vue -->
<script setup>
import DefaultTheme from 'vitepress/theme'

const { Layout } = DefaultTheme
</script>

<template>
  <Layout>
    <template #doc-after>
      <div class="my-comment-system">
        <h3>评论区</h3>
        <!-- 在这里集成你的评论系统组件 -->
      </div>
    </template>
  </Layout>
</template>

<style>
.my-comment-system {
  margin-top: 2rem;
  padding: 1rem;
  border-top: 1px solid var(--vp-c-divider);
}
</style>

注册布局组件

在 theme/index.js 中注册你的 Layout.vue。
```
// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import Layout from './Layout.vue'

export default {
  ...DefaultTheme,
  Layout: Layout, // 使用你的自定义布局
}
```
在这个例子中，我们通过 #doc-after 插槽，在每篇文档内容的末尾添加了一个评论区。我们没有重新发明整个布局，只是在默认布局的基础上注入了新的内容。

覆盖内部组件

如果你想替换默认主题的某个特定组件（例如 Logo 或导航栏搜索框），你可以在你的主题配置中通过 enhanceApp 函数来覆盖它。

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import MyLogo from './MyLogo.vue'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // 注册一个全局组件来覆盖默认的 VPNavBarTitle
    app.component('VPNavBarTitle', MyLogo)
  }
}

通过这种方式，你可以用自己的 MyLogo.vue 组件来替换默认的 Logo 和标题区域，而无需触及其他部分。

扩展默认主题是在保持默认功能和外观的同时，实现高度定制化的强大方式。

#VitePress 扩展主题

#继承默认主题

#使用 Vue 插槽 (Slots)

#覆盖内部组件

VitePress 扩展主题

继承默认主题

使用 Vue 插槽 (Slots)

覆盖内部组件