VitePress特殊语法
一、文档元数据（Frontmatter）
Frontmatter 是位于 Markdown 文件顶部的 YAML 格式配置块，用于定义页面元数据，用 --- 包裹。
基础格式
markdown
---
title: 页面标题
description: 页面描述
---常用配置项
页面标题
定义页面标题，会显示在浏览器标签和导航中，可覆盖一级标题。
markdown
---
title: VitePress 语法指南
---自定义路由
指定页面的访问路径，默认基于文件路径生成。
markdown
---
route: /docs/vitepress-syntax
---页面描述
用于 SEO 和文档摘要展示。
markdown
---
description: 详细介绍 VitePress 的特有语法和使用方法
---侧边栏排序
控制页面在侧边栏中的位置，数字越小越靠上。
markdown
---
sidebarWeight: 2
---隐藏页面
设置页面是否在导航和侧边栏中隐藏。
markdown
---
hidden: true
---二、增强型代码块
VitePress 对代码块进行了增强，支持行号显示、代码高亮等功能。
显示行号
在代码块语言后添加 :line-numbers 即可显示行号。
markdown
```javascript:line-numbers
function add(a, b) {
return a + b;
}
### 自定义起始行号
通过 `:line-numbers=起始数字` 自定义行号的起始值。
```markdown
```python:line-numbers=5
def multiply(x, y):
return x * y
### 高亮指定行
使用 `{行号}` 格式高亮指定行，支持单个行、连续行和多个行。
```markdown
```vue{2,4-5}
<template>
<div class="container">
<h1>Hello World</h1>
<p>这是一个示例</p>
<button @click="handleClick">点击我</button>
</div>
</template>
### 代码块标题
使用 `:code-group` 和 `title` 属性为代码块添加标题。
```markdown
::: code-group
```html title="index.html"
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
</head>
</html>:::
## 三、Vue 语法集成
VitePress 会将 Markdown 文件编译为 Vue 组件，因此可以直接使用 Vue 语法。
### 插值表达式
使用 `{{ 表达式 }}` 插入动态计算结果。
```markdown
1 + 1 = {{ 1 + 1 }}
当前页面标题: {{ $page.title }}Vue 指令
可以直接使用 v-for、v-if 等 Vue 指令。
markdown
<ul>
<li v-for="i in 3" :key="i">
列表项 {{ i }}
</li>
</ul>
<p v-if="$page.frontmatter.hidden">该页面已隐藏</p>脚本块
通过 <script setup> 标签定义 Vue 组件逻辑。
markdown
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
</script>
<button @click="increment">点击次数: {{ count }}</button>四、内置组件
VitePress 提供了多个内置组件，无需导入即可直接使用。
Badge 组件
用于添加标签，如提示、状态等。
markdown
<Badge type="tip">推荐</Badge>
<Badge type="warning">注意</Badge>
<Badge type="danger">警告</Badge>Tabs 组件
实现标签页切换，用于展示多场景内容。
markdown
<Tabs>
<Tab title="Vue">
```vue
<template>
<h1>Vue 示例</h1>
</template>
```
</Tab>
<Tab title="React">
```jsx
function App() {
return <h1>React 示例</h1>;
}
```
</Tab>
</Tabs>TOC 组件
自动生成页面目录，基于页面中的标题。
markdown
<TOC />可以通过 maxDepth 属性控制显示的标题层级：
markdown
<TOC maxDepth="3" />Link 组件
用于站内路由跳转，优化链接体验。
markdown
<Link to="/guide/installation">安装指南</Link>五、运行时 API
VitePress 提供了一些 API 用于获取站点和页面信息。
useData API
获取当前页面的元数据和站点配置。
markdown
<script setup>
import { useData } from 'vitepress'
const { page, site, frontmatter } = useData()
console.log('页面标题:', frontmatter.value.title)
console.log('站点名称:', site.value.title)
</script>
<p>当前页面: {{ page.value.title }}</p>useRoute API
获取当前路由信息。
markdown
<script setup>
import { useRoute } from 'vitepress'
const route = useRoute()
console.log('当前路径:', route.path)
</script>
<p>当前路径: {{ route.path }}</p>六、目录与锚点
自定义标题锚点
通过 {#锚点名称} 自定义标题的锚点，默认锚点由标题文字转换生成。
markdown
## 增强型代码块 {#enhanced-code-block}