Opccii

Appearance

布局组件演示 ​

1. Badge 组件 ​

基本 Badge ​

默认 Badge：default

主题 Badge：

infotipwarningdangeroutlineVitePress1.0.0

Badge 在标题中使用 ​

标题中使用 Badge 新功能 ​

2. 页面布局 ​

VitePress 支持多种页面布局：

  • 文档页面（默认）
  • 首页（layout: home）
  • 页面布局

3. Frontmatter 配置 ​

在 Markdown 文件顶部使用 YAML frontmatter：

yaml
---
title: 页面标题
description: 页面描述
layout: doc
editLink: true
lastUpdated: true
contributors: true
---

4. 首页配置 ​

首页支持丰富的配置选项：

yaml
---
layout: home

hero:
  name: "VitePress"
  text: "Vue 驱动的高性能静态站点生成器"
  tagline: 简单、强大、高性能
  actions:
    - theme: brand
      text: 快速开始
      link: /guide/
    - theme: alt
      text: 查看示例
      link: /features

features:
  - title: 极速开发
    details: 基于 Vite，服务即时启动，刷新即更新
    icon: 🚀
  - title: 简洁至上
    details: Markdown 优先，零配置，开箱即用
    icon: ✨
  - title: Vue 驱动
    details: 利用 Vue 3 的强大能力，轻松扩展
    icon: 💚
---

5. 团队页面 ​

yaml
---
team:
  - name: Eric
    title: Creator
    org: Vite
    orgLink: https://vitejs.dev
    links:
      - icon: github
        link: https://github.com/yyx990803
---

6. 侧边栏分组 ​

js
sidebar: [
  {
    text: '分组标题',
    collapsed: false, // 可折叠
    items: [
      { text: '页面1', link: '/page1' },
      { text: '页面2', link: '/page2' }
    ]
  }
]

7. 搜索配置 ​

本地搜索配置：

js
search: {
  provider: 'local',
  options: {
    detailedView: true,
    locales: {
      'zh-CN': {
        translations: {
          button: {
            buttonText: '搜索',
            buttonAriaLabel: '搜索文档'
          }
        }
      }
    }
  }
}

8. 上/下篇导航 ​

配置 docFooter 以显示上/下篇链接：

js
docFooter: {
  prev: '上一篇',
  next: '下一篇'
}

9. 目录配置 ​

js
outline: {
  level: [2, 3], // 显示的标题级别
  label: '目录'
}

10. 页脚配置 ​

js
footer: {
  message: '基于 MIT 许可证发布',
  copyright: 'Copyright © 2023-present'
}

11. 编辑链接 ​

js
editLink: {
  pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
  text: '在 GitHub 上编辑此页'
}

12. 最后更新时间和贡献者 ​

js
lastUpdated: {
  text: '最后更新于',
  formatOptions: {
    dateStyle: 'full',
    timeStyle: 'short'
  }
},
contributors: {
  text: '贡献者'
}

13. 深色/浅色模式 ​

VitePress 自动支持主题切换：

  • 跟随系统设置
  • 手动切换（页面右上角）
  • 自定义主题颜色

14. 社交链接 ​

js
socialLinks: [
  { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
  { icon: 'twitter', link: 'https://twitter.com/vitepress' },
  { icon: 'discord', link: 'https://discord.gg' }
]

15. Logo 和网站标题 ​

js
logo: '/logo.svg',
siteTitle: 'My VitePress Site'

16. 多语言支持 ​

js
locales: {
  '/': {
    lang: 'en-US',
    title: 'VitePress',
    description: 'Static Site Generator'
  },
  '/zh/': {
    lang: 'zh-CN',
    title: 'VitePress',
    description: '静态站点生成器'
  }
}

17. 清理 URL ​

js
cleanUrls: true

生成不带 .html 后缀的 URL。