默认的主题提供了一个首页（Homepage）的布局

　　默认的主题提供了一个首页（Homepage）的布局

　　默认主题提供主页布局（此网站主页）。要使用它，您需要在根级别README.md中指定home：true。这是一个使用方法的示例：

　　---

home: true

heroImage: /hero.png

heroText: Hero 标题

tagline: Hero 副标题

actionText: 快速上手 →

actionLink: /zh/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

---

　　您可以将相应的内容设置为null以禁用标题和副标题。

　　任何YAML封面内容之后的多余内容将以常规降价呈现，并插入到功能之后。

　　导航栏

　　导航栏可能收录您的页面标题，多语言切换，它们都取决于您的配置。

　　导航栏徽标

　　您可以通过themeConfig.logo在导航栏中添加徽标，该徽标可以放置在以下位置：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

logo: '/assets/img/logo.png',

}

}

　　导航栏链接

　　您可以通过themeConfig.nav添加一些导航栏链接：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

nav: [

{ text: 'Home', link: '/' },

{ text: 'Guide', link: '/guide/' },

{ text: 'External', link: 'https://google.com' },

]

}

}

　　默认情况下，外部链接标记的属性将收录target =“ _ blank”，您可以提供target和rel，它们将作为属性添加到标记中：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

nav: [

{ text: 'External', link: 'https://google.com', target:'_self', rel:'' },

{ text: 'Guide', link: '/guide/', target:'_blank' }

]

}

}

　　当您提供项目数组而不是单个链接时，它将显示为下拉列表：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

nav: [

{

text: 'Languages',

ariaLabel: 'Language Menu',

items: [

{ text: 'Chinese', link: '/language/chinese/' },

{ text: 'Japanese', link: '/language/japanese/' }

]

}

]

}

}

　　此外，您还可以通过嵌套项目在下拉列表中设置分组：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

nav: [

{

text: 'Languages',

items: [

{ text: 'Group1', items: [/* */] },

{ text: 'Group2', items: [/* */] }

]

}

]

}

}

　　禁用导航栏

　　您可以使用themeConfig.navbar禁用所有页面的导航栏：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

navbar: false

}

}

　　您还可以通过YAML前端功能禁用特定页面的导航栏：

　　---

navbar: false

---

　　侧边栏

　　要使补充工具栏生效，您需要配置themeConfig.sidebar。基本配置需要一个收录多个链接的数组：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

sidebar: [

'/',

'/page-a',

['/page-b', 'Explicit link text']

]

}

}

　　您可以省略.md扩展名，以/结尾的路径将被视为* / README.md，此链接的文本将被自动检索（无论您将其声明为页面的第一个标头，或在YAML前题中明确指定页面标题）。如果要显式指定链接的文本，请使用[link，text]格式的数组。

　　嵌套标题链接

　　默认情况下，侧边栏将自动显示由当前页面的标题组成的链接，并根据页面本身的结构嵌套它们。您可以通过themeConfig.sidebarDepth修改其行为。默认深度为1，它将提取h2的标题。将其设置为0将禁用标题链接。同时，最大深度为2，这将同时提取h2和h3的标题。

　　您还可以使用YAML前件重写页面的该值：

　　---

sidebarDepth: 2

---

　　显示所有页面的标题链接

　　默认情况下，侧边栏将仅显示由当前活动页面的标题组成的链接。您可以将themeConfig.displayAllHeaders设置为true以显示所有页面的标题链接：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

displayAllHeaders: true // 默认值：false

}

}

　　活动的标题链接

　　默认情况下，当用户滚动查看页面的不同部分时，嵌套标题链接和URL中的哈希值将实时更新。可以通过以下配置禁用此行为：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

activeHeaderLinks: false, // 默认值：true

}

}

　　提醒

　　值得一提的是，当您禁用此选项时，将不会加载此功能的相应脚本。这只是我们性能优化的一小部分。

　　侧边栏分组

　　您可以使用对象将侧边栏分为多个组：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

sidebar: [

{

title: 'Group 1', // 必要的

path: '/foo/', // 可选的, 标题的跳转链接，应为绝对路径且必须存在

collapsable: false, // 可选的, 默认值是 true,

sidebarDepth: 1, // 可选的, 默认值是 1

children: [

'/'

]

},

{

title: 'Group 2',

children: [ /* ... */ ],

initialOpenGroupIndex: -1 // 可选的, 默认值是 0

}

]

}

}

　　默认情况下，边栏中的每个子组都是可折叠的。您可以将可折叠设置为：false，以使组始终展开。

　　侧边栏的子组配置还支持用于覆盖默认侧边栏深度（1)的字段。

　　提醒

　　还支持嵌套侧边栏分组。

　　多个侧边栏

　　如果要为不同的页面组显示不同的侧边栏，请首先将页面文件组织为以下目录结构：

　　.

├─ README.md

├─ contact.md

├─ about.md

├─ foo/

│  ├─ README.md

│ ├─ one.md

│ └─ two.md

└─ bar/

├─ README.md

├─ three.md

└─ four.md

　　接下来，请按照下面的侧边栏配置进行操作：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

sidebar: {

'/foo/': [

'', /* /foo/ */

'one', /* /foo/one.html */

'two' /* /foo/two.html */

],

'/bar/': [

'', /* /bar/ */

'three', /* /bar/three.html */

'four' /* /bar/four.html */

],

// fallback

'/': [

'', /* / */

'contact', /* /contact.html */

'about' /* /about.html */

]

}

}

}

　　注意

　　确保后备侧边栏是最后定义的。 VuePress将遍历侧边栏配置，以找到匹配的配置。

　　自动生成侧边栏

　　如果您想自动生成仅收录指向当前页面标题（标题）链接的侧边栏，则可以通过YAML首要任务做到这一点：

　　---

sidebar: auto

---

　　您还可以通过配置在所有页面上启用它：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

sidebar: 'auto'

}

}

　　在多语言模式下，您还可以将其应用于特定语言：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

'/zh/': {

sidebar: 'auto'

}

}

}

　　禁用侧边栏

　　您可以通过YAML前端功能禁用特定页面的侧边栏：

　　---

sidebar: false

---

　　搜索框内置搜索

　　您可以通过将themeConfig.search设置为false来禁用默认搜索框，或者通过themeConfig.searchMaxSuggestions来调整默认搜索框中显示的搜索结果数量：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

search: false,

searchMaxSuggestions: 10

}

}

　　您可以用来优化搜索结果：

　　---

tags:

- 配置

- 主题

- 索引

---

　　您可以用于禁用单独页面的内置搜索框：

　　---

search: false

---

　　提醒

　　内置搜索将仅为页面的标题，h2，h3和标签建立搜索索引。如果需要全文搜索，则可以使用。

　　阿尔及利亚搜索

　　您可以使用themeConfig.algolia选项将内置搜索框替换为Algolia搜索（打开新窗口）。要启用Algolia搜索，您至少需要提供apiKey和indexName：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

algolia: {

apiKey: '',

indexName: ''

}

}

}

　　注意

　　与开箱即用的不同，Algolia搜索（在新窗口中打开）要求您将网站提交给他们，以便在使用前创建索引。

　　有关更多选项，请参阅。

　　最后更新时间

　　您可以使用themeConfig.lastUpdated选项获取每个文件的最后git提交的UNIX时间戳（ms），它将以合适的日期格式显示在每页底部：

　　// .vuepress/config.js

module.exports = {

themeConfig: {

lastUpdated: 'Last Updated', // string | boolean

}

}

　　请注意，themeConfig.lastUpdated默认关闭。如果提供了字符串，它将显示为前缀（默认值为：“上次更新”）。

　　使用说明

　　由于lastUpdated基于git，因此只能在基于git的项目中启用它。另外，由于使用的时间戳来自git commit，因此它将仅在给定页面的第一次提交之后显示，并且仅在后续更改提交到该页面时才更新。

　　扩展阅读：