Appearance
配置
欧贝提供了灵活的配置选项,让您可以根据项目需求进行定制。
基础配置
配置文件位于 docs/.vitepress/config.js,以下是一个基础配置示例:
js
import { defineConfig } from 'vitepress'
export default defineConfig({
title: '欧贝文档',
description: '欧贝项目技术文档',
lang: 'zh-CN'
})站点配置
title
- 类型:
string - 默认值:
'VitePress'
站点的标题。这将会显示在导航栏中。
description
- 类型:
string - 默认值:
'A VitePress site'
站点的描述。这将会渲染为 HTML <meta> 标签。
base
- 类型:
string - 默认值:
'/'
站点部署的基础路径。如果站点部署在子路径下(如 GitHub Pages),则需要设置此项。
js
export default defineConfig({
base: '/obei/'
})主题配置
主题配置通过 themeConfig 字段进行设置:
js
export default defineConfig({
themeConfig: {
logo: '/logo.svg',
nav: [...],
sidebar: {...},
socialLinks: [...]
}
})导航栏
配置顶部导航栏菜单:
js
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '指南', link: '/guide/' },
{ text: 'API', link: '/api/' },
{ text: '外部链接', link: 'https://example.com' }
]
}侧边栏
配置侧边栏导航:
js
themeConfig: {
sidebar: {
'/guide/': [
{
text: '开始',
items: [
{ text: '介绍', link: '/guide/' },
{ text: '快速开始', link: '/guide/getting-started' }
]
}
]
}
}社交链接
配置社交媒体链接:
js
themeConfig: {
socialLinks: [
{ icon: 'github', link: 'https://github.com/your-org/obei' }
]
}高级配置
Markdown 配置
自定义 Markdown 渲染行为:
js
export default defineConfig({
markdown: {
lineNumbers: true,
theme: {
light: 'github-light',
dark: 'github-dark'
}
}
})头部配置
添加自定义 <head> 标签:
js
export default defineConfig({
head: [
['link', { rel: 'icon', href: '/favicon.ico' }],
['meta', { name: 'theme-color', content: '#3eaf7c' }]
]
})完整配置示例
js
import { defineConfig } from 'vitepress'
export default defineConfig({
title: '欧贝文档',
description: '欧贝项目技术文档',
lang: 'zh-CN',
base: '/',
head: [
['link', { rel: 'icon', href: '/favicon.ico' }]
],
themeConfig: {
logo: '/logo.svg',
nav: [...],
sidebar: {...},
footer: {
message: '基于 MIT 许可发布',
copyright: '版权所有 © 2026 欧贝团队'
}
}
})提示
更多详细配置请参考 VitePress 官方文档。