VitePress 详解：Vue驱动的静态网站生成器

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

# 初始化 package.json
npm init -y

# 安装 VitePress
npm install -D vitepress

{
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview"
  }
}

mkdir docs
echo '# Hello VitePress' > docs/index.md

npm run docs:dev

npm init vitepress@latest

my-docs/
├── docs/                    # 文档根目录
│   ├── .vitepress/          # VitePress 配置目录
│   │   ├── config.js        # 配置文件（重要！）
│   │   ├── theme/           # 自定义主题目录
│   │   │   └── index.js     # 主题入口
│   │   └── cache/           # 构建缓存（自动生成）
│   ├── public/              # 静态资源（直接复制）
│   │   └── favicon.ico
│   ├── guide/               # 指南目录
│   │   ├── getting-started.md
│   │   └── advanced.md
│   ├── api/                 # API 目录
│   │   └── reference.md
│   ├── index.md             # 首页
│   └── sidebar.md           # 侧边栏示例
├── package.json
└── README.md

export default {
  locales: {
    root: {
      label: '中文',
      lang: 'zh-CN',
      title: '我的文档',
      description: '中文文档'
    },
    en: {
      label: 'English',
      lang: 'en-US',
      title: 'My Docs',
      description: 'English Documentation',
      link: '/en/'
    }
  },

  themeConfig: {
    // 语言切换器
    locales: {
      root: {
        nav: [{ text: '指南', link: '/guide/' }]
      },
      en: {
        nav: [{ text: 'Guide', link: '/en/guide/' }]
      }
    }
  }
}

::: tip 提示
这是一个提示信息。
:::

::: warning 警告
这是一个警告信息。
:::

::: danger 危险
这是一个危险操作！
:::

::: details 点击展开
这里是折叠的内容...
可以包含任何 Markdown 内容。
:::

```javascript {1,3-5}
// 高亮第 1 行和第 3-5 行
function hello() {
  console.log('Hello');
  return true;
}

# 可执行代码块（需要配置）
echo "Hello VitePress"

### 在 Markdown 中使用 Vue 组件

```markdown
<script setup>
import CustomComponent from './.vitepress/theme/components/CustomComponent.vue'
</script>

# 使用自定义组件

<CustomComponent title="Hello" />

:smile: :heart: :thumbsup:

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

export default {
  ...DefaultTheme,
  // 覆盖布局组件
  Layout: MyLayout
}

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

const { Layout } = DefaultTheme
</script>

<template>
  <Layout>
    <!-- 在导航栏后插入自定义组件 -->
    <template #nav-bar-content-after>
      <MyCustomComponent />
    </template>
  </Layout>
</template>

# 构建
npm run docs:build

# 将 dist 目录内容推送到 gh-pages 分支
cd docs/.vitepress/dist
git init
git add -A
git commit -m "deploy"
git push -f git@github.com:username/repo.git main:gh-pages

name: Deploy VitePress

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '18'

      - run: npm ci

      - run: npm run docs:build

      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs/.vitepress/dist

// .vitepress/config.js
export default {
  themeConfig: {
    search: {
      provider: 'algolia',
      options: {
        appId: 'YOUR_APP_ID',
        apiKey: 'YOUR_API_KEY',
        indexName: 'YOUR_INDEX_NAME'
      }
    }
  }
}

// 在自定义布局组件中添加评论