项目配置

本文档介绍如何配置和自定义VitePress开发指南。

基础配置

站点信息

在 .vitepress/config.ts 中配置基本站点信息：

export default defineConfig({
  title: 'VitePress开发指南',
  description: '专业的技术文档分享平台',
  
  // 站点元数据
  head: [
    ['meta', { name: 'keywords', content: '技术文档,开发教程,前端,后端' }],
    ['meta', { name: 'author', content: 'VitePress开发指南' }],
    ['link', { rel: 'icon', href: '/favicon.ico' }]
  ]
})

多语言配置

支持中英文双语：

locales: {
  root: {
    label: '简体中文',
    lang: 'zh-CN',
    // 中文配置...
  },
  en: {
    label: 'English', 
    lang: 'en-US',
    // 英文配置...
  }
}

导航配置

顶部导航

nav: [
  { text: '首页', link: '/' },
  { text: '技术文档', link: '/docs/' },
  { text: '教程', link: '/zh/tutorials/' },
  { text: '博客', link: '/zh/blog/' },
  { text: '关于', link: '/about' }
]

侧边栏

sidebar: {
  '/docs/': [
    {
      text: '开发指南',
      items: [
        { text: '快速开始', link: '/docs/getting-started' },
        { text: '项目配置', link: '/docs/configuration' }
      ]
    }
  ]
}

主题定制

颜色配置

在 .vitepress/theme/custom.css 中自定义主题色：

:root {
  --vp-c-brand-1: #409eff;
  --vp-c-brand-2: #79bbff;
  --vp-c-brand-3: #a0cfff;
}

Element Plus 集成

已集成 Element Plus 组件库，可在 Markdown 中直接使用：

<el-button type="primary">主要按钮</el-button>
<el-alert title="提示信息" type="info" />

SEO 优化

Sitemap 生成

自动生成站点地图：

sitemap: {
  hostname: 'https://mmwk.cn'
}

Meta 标签

head: [
  ['meta', { property: 'og:title', content: 'VitePress开发指南' }],
  ['meta', { property: 'og:description', content: '专业的技术文档分享平台' }],
  ['meta', { property: 'og:type', content: 'website' }],
  ['meta', { property: 'og:url', content: 'https://mmwk.cn' }]
]

搜索配置

本地搜索

search: {
  provider: 'local',
  options: {
    locales: {
      zh: {
        translations: {
          button: {
            buttonText: '搜索文档',
            buttonAriaLabel: '搜索文档'
          }
        }
      }
    }
  }
}

部署配置

GitHub Pages

在 .github/workflows/deploy.yml 中配置自动部署：

name: Deploy VitePress site to Pages

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v2
        with:
          path: .vitepress/dist

自定义域名

在 public/CNAME 文件中添加：

mmwk.cn

高级配置

Markdown 扩展

markdown: {
  lineNumbers: true,
  theme: {
    light: 'github-light',
    dark: 'github-dark'
  }
}

构建优化

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'element-plus': ['element-plus']
      }
    }
  }
}

---

更多配置选项请参考 VitePress 官方文档。