vuepress⼊门详解（四）vuepress基本配置vuepress 基本配置
::: tip
本页所列的选项仅对默认主题⽣效。如果你在使⽤⼀个⾃定义主题，选项可能会有不同。
:::
⾸页配置
⾸页配置⽂件是doc⽬录下的README.md⽂件，以下是⼀个如何使⽤的例⼦：
---
home:true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText：快速上⼿→
actionLink: /guide/
features:
-title：简洁⾄上
details：以 Markdown 为中⼼的项⽬结构，以最少的配置帮助你专注于写作。
-title: Vue驱动
details：享受 Vue + webpack 的开发体验，在 Markdown 中使⽤ Vue 组件，同时可以使⽤ Vue 来开发⾃定义主题。
-title:⾼性能
details: VuePress 为每个页⾯预渲染⽣成静态的 HTML，同时在页⾯被加载的时候，将作为 SPA 运⾏。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
home：设置为true，意思时启⽤默认主题，对⼀般⼈来说，默认主题就够⽤了，专注写作就好。
hero：Image是设置⾸页图⽚的，图⽚的根路径是doc/.vuepress/public
actionText与actionLink是⼀对，就是⾸页的⼀个链接按钮，具体链接到那⾥⾃⼰定义。
其它属性跑起来之后就能直观感受了，没什么可说的。不需要的配置可以删除。
config.js配置⽂件
config.js⾥⾯包含了系统头部导航、左侧菜单、系统插件等配置。
config.js的路径为doc/.vupress/config.js，内容如下：
title:'java乐园',// 设置⽹站标题
description:'⽜魔王的博客',
base:'/',// 设置站点根路径
dest:'./ROOT',// 设置输出⽬录
port:8086,
head:[],
plugins:[],
themeConfig:{
// 添加导航栏
nav:[
{ text:'主页', link:'/'},
{ text:'指南', link:'/guide/'},
{ text:'⽣活', link:'/life/'},
导航菜单
{ text:'学习',
items:[
{ text:'英语', link:'/study/english/english01'},
{ text:'数学', link:'/study/math/math01'},
]
}
],
// 为以下路由添加左侧边栏
sidebar:{
'/life/':[
{
title:'⽣活测试',
collapsable:false,
children:[
{ title:'⽣活测试01', path:'/life/life01'},
{ title:'⽣活测试02', path:'/life/life02'},
{ title:'⽣活测试03', path:'/life/life03'},
]
}
],
'/study/english/':[
{
title:'英语',
collapsable:false,
children:[
{ title:'第⼀节', path:'/study/english/english01'},
{ title:'第⼆节', path:'/study/english/english02'},
{ title:'第三节', path:'/study/english/english03'},
]
}
],
'/study/math/':[
{
title:'数学',
collapsable:false,
children:[
{ title:'第⼀节', path:'/study/math/math01'},
{ title:'第⼆节', path:'/study/math/math02'},
{ title:'第三节', path:'/study/math/math03'},
]
}
],
},
sidebarDepth:2,//左侧导航显⽰的层级
lastUpdated:'Last Updated'
}
}
系统公共配置说明
title: 设置⽹站标题
description: ⽹站的描述
base: 设置站点根路径，如果访问的时候是ip+端⼝，那么这⾥就是/，如果访问的是ip+端⼝+⼯程名，那么这⾥就是/⼯程名/ dest: 设置编译后的输出⽬录./ROOT代表在⼯程的根⽬录下⽣成⼀个ROOT⽂件，⾥⾯是编译好的⽂件，可以拿ROOT直接部署。
port: 本地调试的端⼝号，默认是8080
head说明
类型: Array
默认值: []
额外的需要被注⼊到当前页⾯的 HTML <head> 中的标签，每个标签都可以以 [tagName, { attrName: attrValue }, innerHTML?] 的格式指定，举例如下：
head:[
['link',{ rel:'icon', href:'/logo.png'}]// 增加⼀个⾃定义的 favicon
['link',{ rel:'manifest', href:'/manifest.json'}],//PWA 插件需要引⼊的manifest
['meta',{ name:'theme-color', content:'#3eaf7c'}],//<meta> 元素可提供有关页⾯的元信息（meta-information），⽐如针对搜索引擎和更新频度的描述和关键词。
['meta',{ name:'apple-mobile-web-app-capable', content:'yes'}],
['meta',{ name:'apple-mobile-web-app-status-bar-style', content:'black'}],
['link',{ rel:'apple-touch-icon', href:'/icons/apple-touch-icon-152x152.png'}],
['link',{ rel:'mask-icon', href:'/icons/safari-pinned-tab.svg', color:'#3eaf7c'}],
['meta',{ name:'msapplication-TileImage', content:'/icons/msapplication-icon-144x144.png'}],
['meta',{ name:'msapplication-TileColor', content:'#000000'}]
]
}
导航栏
导航栏可能包含你的页⾯标题、搜索框、 导航栏链接、多语⾔切换、仓库链接，它们均取决于你的配置。
导航栏 Logo
你可以通过 themeConfig.logo 增加导航栏 Logo ，Logo 可以被放置在公共⽂件⽬录（就是我们的doc/puclic）：
// .vuepress/config.js
themeConfig:{
logo:'/assets/img/logo.png',
}
}
导航栏链接
你可以通过 themeConfig.nav 增加⼀些导航栏链接:
themeConfig:{
nav: nav:[
{ text:'主页', link:'/'},
{ text:'指南', link:'/guide/'},
{ text:'⽣活', link:'/life/'},
{ text:'学习',
items:[
{ text:'英语', link:'/study/english/english01'},
{ text:'数学', link:'/study/math/math01'}
]
},
{ text:'菜单分组测试', items:[
{ text:'test1',  items:[
{ text:'test1-1', link:'/frontend/test1-1/'},
{ text:'test1-2', link:'/frontend/test1-2/'}
]},
{ text:'teset2', items:[
{ text:'test2-1', link:'/frontend/test2-1/'},
{ text:'test2-2', link:'/frontend/test2-2/'}
]}
]}
],
}
}
⼀组text和link就是⼀个菜单（例如本例的主页、指南和⽣活），⼀个菜单还可以有⼦菜单，可以有⼀组（本例的“学习”），也可以有多组（例如本例的“菜单分组测试”）
禁⽤导航栏
你可以使⽤ themeConfig.navbar 来禁⽤所有页⾯的导航栏：
// .vuepress/config.js
themeConfig:{
navbar:false
}
}
你也可以通过 YAML front matter 来禁⽤某个指定页⾯的导航栏：
在当前页⾯头部输⼊下⾯代码就会在这个页⾯禁⽤导航栏
---
navbar:false
---
侧边栏
想要使 侧边栏（Sidebar）⽣效，需要配置 themeConfig.sidebar，基本的配置，需要⼀个包含了多个链接的数组：
sidebar:{
'/life/':[
{
title:'⽣活测试',
collapsable:false,
children:[
{ title:'⽣活测试01', path:'/life/life01'},
{ title:'⽣活测试02', path:'/life/life02'},
{ title:'⽣活测试03', path:'/life/life03'},
]
}
],
'/study/english/':[
{
title:'英语',
collapsable:false,
children:[
{ title:'第⼀节', path:'/study/english/english01'},
{ title:'第⼆节', path:'/study/english/english02'},
{ title:'第三节', path:'/study/english/english03'},
]
}
],
'/study/math/':[
{
title:'数学',
collapsable:false,
children:[
{ title:'第⼀节', path:'/study/math/math01'},
{ title:'第⼆节', path:'/study/math/math02'},
{ title:'第三节', path:'/study/math/math03'},
]
}
],
},
我们以“⽣活测试”举例说明：
这个⽰例是多个侧边栏，“⽣活测试”是⼀个侧边栏。最前⾯的/life/表⽰“⽣活测试”的侧边栏，同理“英语”和“数学”也有⾃⼰的侧边栏
title就是这个页⾯的标题（如果我们在页⾯也指定了标题的话以在页⾯指定的为准）
collapsable表⽰把标题合起来，默认是true，我们⼀般设置为false，让标题⾃动展开
path是页⾯路径。
以 / 结尾的路径将会被视为 */README.md，/life/表⽰doc/life/README.md⽂件。
以⽂件名结尾，可以省略 .md 拓展名，例如/life/life01表⽰doc/life/life01.MD⽂件。
::: tip
如果系统⽐较简单，只想⽤⼀个侧边栏，最简单的办法就是把我们本例的“英语”和“数学”侧边栏去掉，只保留⽣活的，并且把/life/改成/就可以了
:::
嵌套的标题链接
默认情况下，侧边栏会⾃动地显⽰由当前页⾯的标题（headers）组成的链接，并按照页⾯本⾝的结构进⾏嵌套，你可以通过themeConfig.sidebarDepth 来修改它的⾏为。
默认的深度是 1，它将提取到 h2 的标题，设置成 0 将会禁⽤标题（headers）链接，同时，最⼤的深度为 2，它将同时提取 h2 和 h3标题。
也可以使⽤ YAML front matter 来为某个页⾯重写此值：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。