何雨果的知识库

Appearance

VitePress 快速入门 ​

VitePress 是一个基于 Vite 的静态站点生成器，专为编写技术文档而设计。

为什么选择 VitePress？ ​

优势

  • ⚡ 极快的速度：基于 Vite，开发服务器启动快，热更新快
  • 📝 Markdown 优先：使用 Markdown 编写内容，简单高效
  • 🎨 美观的主题：默认主题现代化，开箱即用
  • 🔍 内置搜索：支持本地搜索，无需额外配置
  • 📱 响应式设计：完美适配各种设备

基本语法 ​

标题 ​

使用 # 创建标题，支持 1-6 级标题。

代码块 ​

支持语法高亮和行号显示：

javascript
function hello() {
  console.log("Hello, VitePress!");
}
python
def greet(name):
    print(f"Hello, {name}!")

容器 ​

信息

这是一个信息提示框。

警告

这是一个警告框。

危险

这是一个危险警告框。

点击展开

这是一个可折叠的内容区域。

可以放置更多详细信息。

表格 ​

特性描述
速度极快
易用性简单
扩展性强大

任务列表 ​

  • [x] 安装 VitePress
  • [x] 创建项目结构
  • [x] 编写第一篇文档
  • [ ] 部署到 Vercel

数学公式 ​

支持 LaTeX 数学公式（需要配置插件）：

行内公式：(E = mc^2)

块级公式：

[ \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} ]

配置文件 ​

VitePress 的配置文件位于 docs/.vitepress/config.js：

javascript
export default {
  title: '站点标题',
  description: '站点描述',
  themeConfig: {
    nav: [...],
    sidebar: {...}
  }
}

常用命令 ​

bash
# 启动开发服务器
npm run docs:dev

# 构建生产版本
npm run docs:build

# 预览生产版本
npm run docs:preview

部署 ​

部署到 Vercel ​

  1. 将代码推送到 GitHub
  2. 在 Vercel 中导入项目
  3. Vercel 自动检测并配置
  4. 每次推送自动部署

部署到 GitHub Pages ​

在 .github/workflows/deploy.yml 中配置 GitHub Actions。

进阶技巧 ​

自定义容器 ​

可以创建自定义样式的容器：

自定义标题

这是一个带自定义标题的提示框。

代码组 ​

可以将多个代码块组合在一起：

javascript
console.log("Hello");
python
print('Hello')
go
fmt.Println("Hello")

参考资源 ​

总结 ​

VitePress 是一个优秀的文档工具，特别适合：

  1. 技术文档
  2. 个人博客
  3. 知识库
  4. 项目文档

开始使用 VitePress，让你的文档更加美观和高效！ 🚀