vitepress
wen 2021/4/23 vitepress
# 1. Guide
# Markdown Extensions
# Emoji
:tada: :100:
1
A list of all emojis (opens new window) is available.
# Table of Contents
[[toc]]
1
# Custom Containers
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details
This is a details block.
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
::: danger STOP
Danger zone, do not proceed
:::
::: details Click me to view the code
```js
console.log('Hello, VitePress!')
```
:::
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
::: raw
Wraps in a <div class="vp-raw">
:::
1
2
3
2
3
::: v-pre
{{ This will be displayed as-is }}`
:::
1
2
3
2
3
# Line Highlighting in Code Blocks
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
Line ranges: for example {5-8}, {3-10}, {10-17}
Multiple single lines: for example {4,7,9}
Line ranges and single lines: for example {4,7-13,16,23-27,40}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Focus in Code Blocks
```js
export default {
data () {
return {
msg: 'Focused!' // [!code focus]
}
}
}
```
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# Code Groups
::: code-group
```js [config.js]
const config = {
// ...
}
export default config
```
```ts [config.ts]
const config: Config = {
// ...
}
export default config
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Asset Handling
Referencing Static Assets
./docs/src/public/imgs/avatar.png --> 
1
2
2
# Frontmatter
https://vitepress.dev/guide/frontmatter (opens new window)
# Using Vue in Markdown
https://vitepress.dev/guide/using-vue (opens new window)
# Using a Custom Theme
https://vitepress.dev/guide/custom-theme (opens new window)
# 2. Reference
# Site Config
// .vitepress/config.ts
import { defineConfig } from 'vitepress'
export default defineConfig({
title: "My Blog",
// titleTemplate: 'Custom Suffix',
description: "A VitePress Siteee",
head: [
[
'link',
{
rel: "icon",
href: "/imgs/favicon.ico"
}
]
],
// base: '/repo/', // https://foo.github.io/repo/
cleanUrls: true,
srcDir: './src',
outDir: './.vitepress/dist', // '../dist'
// cacheDir: './.vitepress/cache',
lastUpdated: true,
// Markdown
markdown: {
theme: 'material-theme-palenight', // https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
lineNumbers: true
},
// Vite
// vite: {
// // Vite config options
// },
// Vue
// vue: {
// // @vitejs/plugin-vue options
// }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# Frontmatter Config
https://vitepress.dev/reference/frontmatter-config (opens new window)
https://jekyllrb.com/docs/front-matter/ (opens new window)
---
title: VitePress
titleTemplate: Vite & Vue powered static site generator
description: VitePress
head:
- - meta
- name: description
content: hello
- - meta
- name: keywords
content: super duper SEO
---
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
仅在使用默认主题时适用
layout: doc | home | page
aside: boolean | 'left'
outline: number | [number, number] | 'deep' | false
lastUpdated: boolean
editLink: boolean
---
layout: home
hero:
features:
aside: true
outline: 2
lastUpdated: true
editLink: true
---
---
hero:
name: My Blog
text: "A VitePress Site"
tagline: My great project tagline
# image:
# src: /imgs/avatar.png
# alt: avatar
actions:
- theme: brand
text: Markdown Examples
link: /markdown-examples
- theme: alt
text: API Examples
link: /api-examples
- theme: alt
text: View on GitHub
link: https://github.com/vuejs/vitepress
features:
- icon: 🛠️
title: Feature A
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
- icon:
src: /imgs/avatar.png
title: Feature B
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
- icon:
dark: /imgs/avatar.png
light: /imgs/avatar.png
title: Feature C
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
link: https://github.com/vuejs/vitepress
linkText: GitHub
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
Common Config
---
title: VitePress
---
1
2
3
4
2
3
4
# Default Theme Config
// .vitepress/config.ts
import { defineConfig } from 'vitepress'
export default defineConfig({
// Theme related configurations.
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
logo: '/imgs/favicon.ico', // in nav bar
siteTitle: 'Hello World', // in nav bar, Type: string | false
nav: NavItem[],
sidebar: Sidebar[],
aside: true,
outline: [2,4],
outlineTitle: 'On this page',
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
{ icon: { svg: 'svg' }, link: 'https://github.com/vuejs/vitepress' }
],
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2019-present Evan You'
},
// editLink: {
// pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
// text: 'Edit this page on GitHub'
// }
lastUpdatedText: 'Last updated',
// algolia: AlgoliaSearch,
// carbonAds: CarbonAdsOptions,
docFooter: {
prev: 'Previous page',
next: 'Next page'
},
darkModeSwitchLabel: 'Appearance', // only displayed in the mobile view
sidebarMenuLabel: 'Menu', // only displayed in the mobile view
returnToTopLabel: 'Return to top', // only displayed in the mobile view
// langMenuLabel: 'Change language'
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// nav
nav: [
{ text: 'Home', link: '/' },
{ text: 'Example', link: '/markdown' },
{
text: 'Dropdown Menu',
items: [
{ text: 'Item A', link: '/markdown' },
{ text: 'Item B', link: '/markdown' },
{ text: 'Github A', link: 'https://github.com/vuejs/vitepress' },
{ text: 'Github B', link: 'https://github.com/vuejs/vitepress' }
]
},
{
text: 'Dropdown Menu Group',
items: [
{
items: [
{ text: 'Item A', link: '/markdown' },
{ text: 'Item B', link: '/markdown' }
]
},
{
text: 'Github',
items: [
{ text: 'Github A', link: 'https://github.com/vuejs/vitepress' },
{ text: 'Github B', link: 'https://github.com/vuejs/vitepress' }
]
}
]
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// sidebar -- array
sidebar: [
{
text: 'Guide',
link: '/markdown'
},
{
text: 'Examples',
collapsed: true,
items: [
{ text: 'Markdown A', link: '/markdown' },
{ text: 'Markdown B', link: '/markdown' }
]
},
{
text: 'Github',
collapsed: true,
items: [
{ text: 'Github A', link: 'https://github.com/vuejs/vitepress' },
{ text: 'Github B', link: 'https://github.com/vuejs/vitepress' }
]
}
]
// sidebar -- object
sidebar: {
'/guide/': [
{
text: 'Guide',
items: [
{ text: 'Index', link: '/guide/' },
{ text: 'One', link: '/guide/one' },
{ text: 'Two', link: '/guide/two' },
{
text: 'Examples',
collapsed: true,
items: [
{ text: 'One', link: '/guide/one' },
{ text: 'Two', link: '/guide/two' }
]
}
]
}
],
'/config/': [
{
text: 'Config',
items: [
{ text: 'Index', link: '/config/' },
{ text: 'Three', link: '/config/three' },
{ text: 'Four', link: '/config/four' }
]
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
# Badge
徽章可让您为标题添加状态。例如，指定部分的类型或支持的版本可能很有用。您可以使用全局可用的 Badge 组件。
### Title <Badge type="info" text="default" />
### Title <Badge type="tip" text="^1.9.0" />
### Title <Badge type="warning" text="beta" />
### Title <Badge type="danger" text="caution" />
### Title <Badge type="info">custom element</Badge>
1
2
3
4
5
6
2
3
4
5
6
# Team Page
https://vitepress.dev/reference/default-theme-team-page (opens new window)
# Search
https://vitepress.dev/reference/default-theme-search (opens new window)
# Carbon Ads
https://vitepress.dev/reference/default-theme-carbon-ads (opens new window)
