推荐的 VitePress 开源主题

🏆 推荐主题列表

1. vitepress-theme-teek ⭐⭐⭐⭐⭐（强烈推荐）

简介

• GitHub: https://github.com/luoyuanxiang/vitepress-theme-teek
• 文档: https://vp.teek.top/
• 特点: 轻量、简洁高效、灵活配置、易于扩展
• 风格: 支持文档风和博客风
• Star 数: 高人气主题

核心功能

✅ 自动生成侧边栏、目录页、索引页、面包屑导航
✅ 支持文档风和博客风
✅ 大量个性化主题配置选项
✅ 支持组件、运行时 API、工具函数等扩展
✅ 提供 Markdown 插件工具
✅ 多种特色页面（归档页、清单页、登录页等）

安装方法

# 安装 VitePress
pnpm add -D vitepress

# 安装 Teek 主题
pnpm install vitepress-theme-teek -D

# 初始化
pnpm vitepress init

---

2. @sugarat/theme ⭐⭐⭐⭐⭐

简介

• GitHub: https://github.com/ATQQ/sugar-blog
• 文档: https://theme.sugarat.top/
• 特点: 功能丰富的博客主题
• 创建命令: npm create @sugarat/theme@latest

核心功能

✅ 功能丰富的博客主题
✅ 支持通过 npm 一键创建模板
✅ 集成多种插件
✅ 美观的 UI 设计

---

3. @vue/theme ⭐⭐⭐⭐

简介

• GitHub: https://github.com/vuejs/theme
• 特点: Vue3 官方文档主题
• 风格: 简洁、专业、官方风格

核心功能

✅ Vue3 官方文档同款主题
✅ 简洁专业的设计
✅ 完善的文档支持

---

4. vitepress-blog-pure ⭐⭐⭐⭐

简介

• GitHub: https://github.com/airene/vitepress-blog-pure
• 演示: https://ti.bi/
• 特点: 简洁美观的博客项目

核心功能

✅ 简洁美观的设计
✅ 独立时间线和标签页
✅ 适合个人博客

---

5. VitePress Mild Theme ⭐⭐⭐⭐

简介

• 文档: https://theme.hacxy.cn/
• 特点: 简约风格的博客主题

核心功能

✅ 简约风格设计
✅ 博客功能完善
✅ 配置简单

---

🎯 为什么推荐 Teek 主题？

优势对比

特性	Teek	@sugarat	@vue	blog-pure
文档风	✅	✅	✅	❌
博客风	✅	✅	❌	✅
自动侧边栏	✅	✅	❌	❌
个性化配置	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
易用性	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
功能丰富度	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
维护活跃度	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐

Teek 主题的独特优势

1. 双风格支持：同时支持文档风和博客风
2. 自动化功能：自动生成侧边栏、目录、索引
3. 高度可定制：大量配置选项
4. 活跃维护：持续更新，社区活跃
5. 中文文档：完善的中文文档支持
6. 易于扩展：支持组件、插件扩展

---

📦 快速安装 Teek 主题

方法一：全新安装（推荐）

# 1. 创建项目目录
mkdir my-docs && cd my-docs

# 2. 初始化 package.json
pnpm init

# 3. 安装 VitePress 和 Teek 主题
pnpm add -D vitepress vitepress-theme-teek

# 4. 初始化 VitePress
pnpm vitepress init

# 5. 启动开发服务器
pnpm docs:dev

方法二：现有项目集成

# 1. 安装 Teek 主题
pnpm add -D vitepress-theme-teek

# 2. 配置主题（见下方）

---

⚙️ 配置 Teek 主题

1. 修改 .vitepress/theme/index.ts

import Teek from "vitepress-theme-teek";
import "vitepress-theme-teek/index.css";

export default {
  extends: Teek,
};

2. 修改 .vitepress/config.mts

import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  // Teek 主题配置
  themeConfig: {
    // 站点名称
    siteTitle: "SuperSQL",
    
    // Logo
    logo: "/logo.svg",
    
    // 导航
    nav: [
      { text: "首页", link: "/" },
      { text: "指南", link: "/guide/getting-started" },
      { text: "API", link: "/api/core-classes" },
    ],
    
    // 社交链接
    socialLinks: [
      { icon: "github", link: "https://github.com/your-repo" },
    ],
  },
});

export default defineConfig({
  extends: teekConfig,
  
  // VitePress 配置
  title: "SuperSQL",
  description: "AI 驱动的 SQL 生成引擎",
  
  // 其他配置...
});

---

🎨 Teek 主题特色功能

1. 自动侧边栏

根据目录结构自动生成侧边栏，无需手动配置。

2. 博客功能

支持文章归档、标签分类、时间线等博客功能。

3. 多种页面类型

• 归档页
• 清单页
• 登录页
• 分类页
• 标签页

4. Markdown 增强

• 流程图支持
• 数学公式支持
• 代码演示
• 自定义容器

---

📚 相关资源

• Teek 官方文档: https://vp.teek.top/
• Teek GitHub: https://github.com/luoyuanxiang/vitepress-theme-teek
• VitePress 官方文档: https://vitepress.dev/
• 主题推荐列表: https://theme.sugarat.top/recommend.html

---

🚀 下一步

1. 安装 Teek 主题（推荐）
2. 配置主题样式
3. 迁移现有文档
4. 自定义配置

---

💡 提示

• Teek 主题支持热更新，修改配置后自动刷新
• 可以在配置中切换文档风和博客风
• 支持暗色模式自动切换
• 提供丰富的 Markdown 插件

选择 Teek 主题，让你的文档网站焕然一新！🎉