mirror of https://github.com/vuejs/vitepress
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
4.2 KiB
154 lines
4.2 KiB
# Search
|
|
|
|
## Local Search
|
|
|
|
VitePress supports fuzzy full-text search using a in-browser index thanks to [minisearch](https://github.com/lucaong/minisearch/). To enable this feature, simply set the `themeConfig.search.provider` option to `'local'` in your `.vitepress/config.ts` file:
|
|
|
|
```ts
|
|
import { defineConfig } from 'vitepress'
|
|
|
|
export default defineConfig({
|
|
themeConfig: {
|
|
search: {
|
|
provider: 'local'
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
Example result:
|
|
|
|
|
|
|
|
Alternatively, you can use [Algolia DocSearch](#algolia-search) or some community plugins like <https://www.npmjs.com/package/vitepress-plugin-search> or <https://www.npmjs.com/package/vitepress-plugin-pagefind>.
|
|
|
|
### i18n {#local-search-i18n}
|
|
|
|
You can use a config like this to use multilingual search:
|
|
|
|
```ts
|
|
import { defineConfig } from 'vitepress'
|
|
|
|
export default defineConfig({
|
|
themeConfig: {
|
|
search: {
|
|
provider: 'local',
|
|
options: {
|
|
locales: {
|
|
zh: {
|
|
translations: {
|
|
button: {
|
|
buttonText: '搜索文档',
|
|
buttonAriaLabel: '搜索文档'
|
|
},
|
|
modal: {
|
|
noResultsText: '无法找到相关结果',
|
|
resetButtonTitle: '清除查询条件',
|
|
footer: {
|
|
selectText: '选择',
|
|
navigateText: '切换'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
## Algolia Search
|
|
|
|
VitePress supports searching your docs site using [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). Refer their getting started guide. In your `.vitepress/config.ts` you'll need to provide at least the following to make it work:
|
|
|
|
```ts
|
|
import { defineConfig } from 'vitepress'
|
|
|
|
export default defineConfig({
|
|
themeConfig: {
|
|
search: {
|
|
provider: 'algolia',
|
|
options: {
|
|
appId: '...',
|
|
apiKey: '...',
|
|
indexName: '...'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
### i18n {#algolia-search-i18n}
|
|
|
|
You can use a config like this to use multilingual search:
|
|
|
|
```ts
|
|
import { defineConfig } from 'vitepress'
|
|
|
|
export default defineConfig({
|
|
themeConfig: {
|
|
search: {
|
|
provider: 'algolia',
|
|
options: {
|
|
appId: '...',
|
|
apiKey: '...',
|
|
indexName: '...',
|
|
locales: {
|
|
zh: {
|
|
placeholder: '搜索文档',
|
|
translations: {
|
|
button: {
|
|
buttonText: '搜索文档',
|
|
buttonAriaLabel: '搜索文档'
|
|
},
|
|
modal: {
|
|
searchBox: {
|
|
resetButtonTitle: '清除查询条件',
|
|
resetButtonAriaLabel: '清除查询条件',
|
|
cancelButtonText: '取消',
|
|
cancelButtonAriaLabel: '取消'
|
|
},
|
|
startScreen: {
|
|
recentSearchesTitle: '搜索历史',
|
|
noRecentSearchesText: '没有搜索历史',
|
|
saveRecentSearchButtonTitle: '保存至搜索历史',
|
|
removeRecentSearchButtonTitle: '从搜索历史中移除',
|
|
favoriteSearchesTitle: '收藏',
|
|
removeFavoriteSearchButtonTitle: '从收藏中移除'
|
|
},
|
|
errorScreen: {
|
|
titleText: '无法获取结果',
|
|
helpText: '你可能需要检查你的网络连接'
|
|
},
|
|
footer: {
|
|
selectText: '选择',
|
|
navigateText: '切换',
|
|
closeText: '关闭',
|
|
searchByText: '搜索提供者'
|
|
},
|
|
noResultsScreen: {
|
|
noResultsText: '无法找到相关结果',
|
|
suggestedQueryText: '你可以尝试查询',
|
|
reportMissingResultsText: '你认为该查询应该有结果？',
|
|
reportMissingResultsLinkText: '点击反馈'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
[These options](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts) can be overridden. Refer official Algolia docs to learn more about them.
|
|
|
|
<style>
|
|
img[src="/search.png"] {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
</style>
|