搜索指定网站内容(默认的主题提供了一个首页（headers）的指定home)
优采云 发布时间: 2021-10-26 22:03搜索指定网站内容(默认的主题提供了一个首页（headers）的指定home)
默认主题提供主页布局（用于此 网站 主页）。要使用它，您需要在根级 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添加导航栏的logo，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' }
]
}
}
当您提供一个 items 数组而不是单个链接时，它将显示为一个下拉列表：
// .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 front matter 禁用特定页面的导航栏：
---
navbar: false
---
侧边栏
要使侧边栏（Sidebar）生效，需要配置themeConfig.sidebar。基本配置需要一个收录多个链接的数组：
// .vuepress/config.js
module.exports = {
themeConfig: {
sidebar: [
'/',
'/page-a',
['/page-b', 'Explicit link text']
]
}
}
可以省略.md扩展名，以/结尾的路径将被视为*/README.md，并且会自动检索此链接的文本（无论是将其声明为页面的第一个标题，还是明确指定YAML 前端页面的标题）。如果要明确指定链接的文本，请使用 [link, text] 格式的数组。
嵌套标题链接
默认情况下，侧边栏会自动显示当前页面的header组成的链接，根据页面本身的结构嵌套，可以通过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
}
]
}
}
默认情况下，侧边栏的每个子组都是可折叠的。您可以设置 collapsable: 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 front matter 来完成：
---
sidebar: auto
---
您还可以通过配置在所有页面上启用它：
// .vuepress/config.js
module.exports = {
themeConfig: {
sidebar: 'auto'
}
}
在多语言模式下，您还可以将其应用于特定语言：
// .vuepress/config.js
module.exports = {
themeConfig: {
'/zh/': {
sidebar: 'auto'
}
}
}
禁用侧边栏
您可以通过 YAML front matter 禁用特定页面的侧边栏：
---
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 默认关闭。如果给出字符串，它将显示为前缀（默认值为：Last Updated）。
条款和条件
由于 lastUpdated 是基于 git 的，所以你只能在基于 git 的项目中启用它。此外，由于使用的时间戳来自 git commit，它只会在给定页面的第一次提交后显示，并且只会在后续更改提交到该页面时更新。
进一步阅读：
