Appearance
项目目录
目录说明
docs 文档目录
.vitepress 配置目录
config.mjs 配置文件
node_modules 依赖目录
package.json 记录依赖
项目配置
其中title和description自然不用说 主要是 themeConfig
其中 nav字段代表配置首页头部的导航栏
sidebar 代表侧边栏
nav导航
js
export default {
themeConfig: {
nav: [
{ text: 'Guide', link: '/guide' },
{ text: 'Config', link: '/config' },
{ text: 'Changelog', link: 'https://github.com/...' }
]
}
}text 是 nav 中显示的实际文本，而 link 是单击文本时将导航到的链接。对于链接，将路径设置为不带 .md 后缀的实际文件，并且始终以 / 开头。
导航链接也可以是下拉菜单。为此，请替换 link 选项，设置 items 数组。
js
export default {
themeConfig: {
nav: [
{ text: 'Guide', link: '/guide' },
{
text: 'Dropdown Menu',
items: [
{ text: 'Item A', link: '/item-1' },
{ text: 'Item B', link: '/item-2' },
{ text: 'Item C', link: '/item-3' }
]
}
]
}
}自定义链接的“target”和“rel”属性
默认情况下，VitePress 会根据链接是否为外部链接自动判断 target 和 rel 属性。但如果愿意，也可以自定义它们。
js
export default {
themeConfig: {
nav: [
{
text: 'Merchandise',
link: 'https://www.thegithubshop.com/',
target: '_self',
rel: 'sponsored'
}
]
}
}sidebar 侧边栏
侧边栏菜单的最简单形式是传入一个链接数组。第一级项目定义侧边栏的“部分”。它应该包含作为小标题的 text 和作为实际导航链接的 items。
js
export default {
themeConfig: {
sidebar: [
{
text: 'Section Title A',
items: [
{ text: 'Item A', link: '/item-a' },
{ text: 'Item B', link: '/item-b' },
...
]
},
{
text: 'Section Title B',
items: [
{ text: 'Item C', link: '/item-c' },
{ text: 'Item D', link: '/item-d' },
...
]
}
]
}
}每个 link 都应指定以 / 开头的实际文件的路径。如果在链接末尾添加斜杠，它将显示相应目录的 index.md。
js
export default {
themeConfig: {
sidebar: [
{
text: 'Guide',
items: [
// 显示的是 `/guide/index.md` 页面
{ text: 'Introduction', link: '/guide/' }
]
}
]
}
}可以进一步将侧边栏项目嵌入到 6 级深度，从根级别上计数。请注意，深度超过 6 级将被忽略，并且不会在侧边栏上显示。
js
export default {
themeConfig: {
sidebar: [
{
text: 'Level 1',
items: [
{
text: 'Level 2',
items: [
{
text: 'Level 3',
items: [
...
]
}
]
}
]
}
]
}
}多侧边栏
可能会根据页面路径显示不同的侧边栏.
js
export default {
themeConfig: {
sidebar: {
// 当用户位于 `guide` 目录时，会显示此侧边栏
'/guide/': [
{
text: 'Guide',
items: [
{ text: 'Index', link: '/guide/' },
{ text: 'One', link: '/guide/one' },
{ text: 'Two', link: '/guide/two' }
]
}
],
// 当用户位于 `config` 目录时，会显示此侧边栏
'/config/': [
{
text: 'Config',
items: [
{ text: 'Index', link: '/config/' },
{ text: 'Three', link: '/config/three' },
{ text: 'Four', link: '/config/four' }
]
}
]
}
}
}注意 : 文章中
link起始的/都是相对于docs目录开始的
我自己的配置
js
import { defineConfig } from "vitepress";
// https://vitepress.dev/reference/site-config
export default defineConfig({
// base: "/blog/",
head:[
['link',{ rel: 'icon', href: '/favicon.ico' }],
['meta', { name: 'referrer', content: 'no-referrer' }]
],
title: "老赵",
//打包的输出位置
outDir: "../dist",
description: "",
themeConfig: {
docFooter: {
prev: "上一篇",
next: "下一篇",
},
lastUpdated: {
text: "最后更新时间",
// formatOptions: {
// dateStyle: "full",
// timeStyle: "medium",
// },
},
//这个logo的路径是基于public目录开始的 如果没有public目录 需要自己在docs中创建
logo: "/像素_猫.svg",
// https://vitepress.dev/reference/default-theme-config
outline: {
label: "本页目录",
},
search: {
provider: "local",
},
nav: [
{text:'搭建博客系统', link: "/搭建博客系统/1.安装vite-press"},
{
text: "我的日常",
items: [
{
text: "windows系统配置别名",
link: "/我的日常/windows配置命令别名",
},
{
text: "软件卸载错误",
link: "/我的日常/安装或者卸载软件时遇到trying to use is on a network resource that is unavailable",
},{
text: "美化windows终端",
link: "/我的日常/美化windows终端",
}
],
},{
text: "前端",
items: [
{
text: "网格布局",
link: "/前端/网格布局/1.容器声明",
},
{
text: "Electron",
link: "/前端/electron/1.Electron由来",
},
{
text: "Flex布局",
link: "/前端/flex布局/容器属性/1.弹性盒",
}
],
},{
text: "杂七杂八",
items: [
{
text: "考勤",
link: "/杂七杂八/考勤",
}
],
},
],
sidebar: {
"/我的日常": [
{
text: "windows系统配置别名",
link: "/我的日常/windows配置命令别名",
},
{
text: "软件卸载错误",
link: "/我的日常/安装或者卸载软件时遇到trying to use is on a network resource that is unavailable",
},{
text: "美化windows终端",
link: "/我的日常/美化windows终端",
},
],
"/搭建博客系统":[
{text:'开始',items:[{
text: "起步",
link: "/搭建博客系统/1.安装vite-press",
},{
text: "配置",
link: "/搭建博客系统/2.配置vite-press",
},{
text: "PicGo",
link: "/搭建博客系统/3.图片上传策略",
},,{
text: "github 工作流",
link: "/搭建博客系统/4.github自动部署",
},]}
],
"/前端/网格布局": [
{
text: "开始",
items: [{
text: "容器声明",
link: "/前端/网格布局/1.容器声明",
},{
text: "划分行列",
link: "/前端/网格布局/2.划分行列",
},{
text: "设置间距",
link: "/前端/网格布局/3.设置间距",
},{
text: "栅格线部署",
link: "/前端/网格布局/4.栅格线部署",
},{
text: "区域部署",
link: "/前端/网格布局/5.区域部署",
},{
text: "栅格控制",
link: "/前端/网格布局/6.栅格控制",
},{
text: "栅格简写",
link: "/前端/网格布局/7.栅格简写",
}]
}
],
"/前端/electron": [
{
text: "开始",
items: [{
text: "Electron由来",
link: "/前端/electron/1.Electron由来",
},{
text: "Electron架构",
link: "/前端/electron/2.Electron架构",
},]
}
],
"/前端/flex布局":[
{
text: "容器属性",
items: [{
text: "弹性盒子",
link: "/前端/flex布局/容器属性/1.弹性盒",
},{
text: "主轴方向",
link: "/前端/flex布局/容器属性/2.主轴方向",
},{
text: "换行",
link: "/前端/flex布局/容器属性/3.换行",
},{
text: "主轴对齐方式",
link: "/前端/flex布局/容器属性/4.主轴对齐方式",
},{
text: "交叉轴对齐方式",
link: "/前端/flex布局/容器属性/5.交叉轴对齐方式",
},{
text: "多交叉轴对齐方式",
link: "/前端/flex布局/容器属性/6.多交叉轴对齐方式",
}]
},
{
text: "项目属性",
items: [{
text: "排序",
link: "/前端/flex布局/项目属性/1.排序",
},{
text: "flex-basis",
link: "/前端/flex布局/项目属性/2.flex-basis.md",
},{
text: "放大比例",
link: "/前端/flex布局/项目属性/3.放大比例.md",
},{
text: "缩小比例",
link: "/前端/flex布局/项目属性/4.缩小比例.md",
},{
text: "独立对齐方式",
link: "/前端/flex布局/项目属性/5.独立对齐方式",
}]
}
]
},
socialLinks: [
// { icon: "github", link: "https://github.com/vuejs/vitepress" },
],
},
});