系统覆写 // SYSTEM OVERRIDE

Appearance

VitePress-Specific Features ​

VitePress extends standard markdown with powerful features for documentation sites.

Frontmatter ​

Add metadata to your pages using YAML frontmatter:

markdown
---
title: Page Title
description: Page description for SEO
layout: doc
---

# Page Content

Common Frontmatter Options ​

yaml
---
title: Custom Page Title
description: Custom description
layout: doc | home | page
navbar: true | false
sidebar: true | false
aside: true | false | left
outline: [2, 3]
---

Custom Layouts ​

Home Layout ​

markdown
---
layout: home

hero:
  name: Project Name
  text: Tagline goes here
  tagline: A longer description
  actions:
    - theme: brand
      text: Get Started
      link: /guide/getting-started
    - theme: alt
      text: View on GitHub
      link: https://github.com/username/repo

features:
  - title: Feature 1
    details: Description of feature 1
  - title: Feature 2
    details: Description of feature 2
---

Page Layout ​

markdown
---
layout: page
---

Custom page content without sidebar.

VitePress automatically handles internal links:

markdown
[Getting Started](../guide/getting-started.md)
[Customization](../guide/customization)
[Home](/)

Asset Handling ​

Public Assets ​

Place assets in docs/public/:

markdown
![Logo](/logo.svg)

Relative Assets ​

Use relative paths for assets next to markdown files:

markdown
![Diagram](./diagram.png)

Code Groups ​

Display multiple code examples with tabs:

javascript
const greeting = "Hello, World!"
console.log(greeting)
typescript
const greeting: string = "Hello, World!"
console.log(greeting)
python
greeting = "Hello, World!"
print(greeting)

Import Code Snippets ​

Import code from files:

markdown
<<< @/path/to/file.js

With line highlighting:

markdown
<<< @/path/to/file.js{2,4-6}

With specific lines:

markdown
<<< @/path/to/file.js#region-name

Badges ​

infotipwarningdanger

Team Page ​

Create a team page with member cards:

markdown
---
layout: page
---

<script setup>
import { VPTeamMembers } from 'vitepress/theme'

const members = [
  {
    avatar: 'https://github.com/username.png',
    name: 'Member Name',
    title: 'Role',
    links: [
      { icon: 'github', link: 'https://github.com/username' }
    ]
  }
]
</script>

# Our Team

<VPTeamMembers :members="members" />

Last Updated ​

Enable last updated timestamp in frontmatter:

yaml
---
lastUpdated: true
---

Configure in config.mts:

typescript
export default defineConfig({
  lastUpdated: true
})

VitePress includes built-in local search. Configure in config.mts:

typescript
export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local'
    }
  }
})

Auto Sidebar ​

Use the included sidebar generator:

typescript
import { set_sidebar } from "../utils/auto-gen-sidebar.mjs"

export default defineConfig({
  themeConfig: {
    sidebar: set_sidebar("docs/guide")
  }
})

Manual Sidebar ​

typescript
sidebar: {
  '/guide/': [
    {
      text: 'Guide',
      items: [
        { text: 'Getting Started', link: '/guide/getting-started' },
        { text: 'Customization', link: '/guide/customization' }
      ]
    }
  ]
}

Multi-Sidebar ​

Different sidebars for different sections:

typescript
sidebar: {
  '/guide/': [/* guide sidebar */],
  '/api/': [/* api sidebar */],
  '/examples/': [/* examples sidebar */]
}

Add "Edit this page" links:

typescript
export default defineConfig({
  themeConfig: {
    editLink: {
      pattern: 'https://github.com/username/repo/edit/main/docs/:path',
      text: 'Edit this page on GitHub'
    }
  }
})

Configure in site.config.js:

javascript
theme: {
  socialLinks: [
    { icon: 'github', link: 'https://github.com/username/repo' },
    { icon: 'twitter', link: 'https://twitter.com/username' },
    { icon: 'discord', link: 'https://discord.gg/invite' }
  ]
}

Add a footer in config.mts:

typescript
export default defineConfig({
  themeConfig: {
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2024-present Your Name'
    }
  }
})

Next Steps ​