主题定制

学习如何定制 VitePress 主题，打造独特的文档站点。

主题系统概览

主题	说明
默认主题	VitePress 内置主题配置详解
自定义主题	开发自定义主题
社区主题	使用社区提供的主题

定制指南

快速定制

方式	说明
CSS 变量	覆盖 CSS 变量快速定制样式
布局插槽	通过插槽扩展布局
自定义布局	创建自定义页面布局

深度定制

方式	说明
Vue 组件	开发自定义 Vue 组件
主题架构	理解主题系统架构
主题开发教程	从零开发博客主题

主题开发

开发流程

理解架构 → 设计组件 → 实现样式 → 添加功能 → 测试发布

核心概念

概念	说明
Layout	页面布局组件
Slot	布局插槽系统
Composable	组合式函数
CSS Variable	CSS 变量系统

进阶主题

主题	说明
性能优化	主题性能优化技巧
主题测试	主题测试策略
主题发布	发布主题到 npm
开发工具	提高开发效率的工具
常见问题	主题开发常见问题

默认主题定制

样式定制

通过覆盖 CSS 变量快速定制默认主题：

/* .vitepress/theme/style.css */
:root {
  --vp-c-brand-1: #646cff;
  --vp-c-brand-2: #747bff;
}

布局扩展

通过插槽扩展默认布局：

<!-- .vitepress/theme/index.ts -->
import DefaultTheme from 'vitepress/theme'

export default {
  ...DefaultTheme,
  Layout: () => h(DefaultTheme.Layout, null, {
    'home-hero-after': () => h(MyComponent)
  })
}

下一步

• Vue 组件开发 - 学习组件开发
• 高级功能 - 组件高级用法
• 最佳实践 - 无障碍访问