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

如何使用

1. 创建布局组件

   在 .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>

2. 注册布局组件

   在 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 和标题区域，而无需触及其他部分。

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