docs($cn): @vuepress/plugin-search

This commit is contained in:
ULIVZ
2018-11-04 04:37:59 +08:00
parent 17e1fc38e3
commit 7ce5f5f562
2 changed files with 54 additions and 20 deletions
@@ -4,7 +4,7 @@ title: search
# @vuepress/plugin-search
> Header-based search plugin.
> [Headers](../../miscellaneous/glossary.md#headers)-based search plugin.
## Install
@@ -14,7 +14,7 @@ yarn add -D @vuepress/plugin-search
```
::: tip
Note that this plugin has been included in **default theme**, the search box you see in the navbar is powered by the plugin.
Note that this plugin has been included in **default theme**, the search box you see now is powered by the plugin.
:::
## Usage
@@ -32,10 +32,27 @@ module.exports = {
}
```
2. After using this plugin, VuePress will set a webpack alias `@SearchBox` pointing to the search component so that you can use it directly in your layout component:
2. This plugin will automatically inject a webpack alias `@SearchBox` pointing to the search component so that you can use it directly in your [layout](../../miscellaneous/glossary.md#layout) component:
```js
```vue
<template>
<div class="foo-layout">
<header>
<SearchBox/>
</header>
<main>
...
</main>
</div>
</template>
<script>
import SearchBox from '@SearchBox'
export default {
components: { SearchBox }
}
</script>
```
## Options
@@ -54,7 +71,7 @@ Set the maximum number of results for search.
Since the Search component leverages the built-in palette, you can tweak the default colors via `styles/palette.styl`:
```stylus
// colors of the website you see now:
// colors of the searchbox you see now:
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
@@ -4,9 +4,9 @@ title: search
# @vuepress/plugin-search
> Header-based search plugin.
> 基于 [Headers](../../miscellaneous/glossary.md#headers) 的搜索插件
## Install
## 安装
```bash
yarn add -D @vuepress/plugin-search
@@ -14,12 +14,12 @@ yarn add -D @vuepress/plugin-search
```
::: tip
Note that this plugin has been included in **default theme**, the search box you see in the navbar is powered by the plugin.
请注意,此插件已包含在**默认主题**中,你现在看到的搜索便是由本插件提供支持。
:::
## Usage
## 使用
1. Enable this plugin:
1. 启用此插件:
```js
// .vuepress/config.js or themePath/index.js
@@ -32,29 +32,46 @@ module.exports = {
}
```
2. After using this plugin, VuePress will set a webpack alias `@SearchBox` pointing to the search component so that you can use it directly in your layout component:
2. 本插件将自动注入指向搜索组件的 webpack 别名 `@SearchBox`,以便您可以直接在 [layout](../../miscellaneous/glossary.md#layout) 组件中使用它:
```js
```vue
<template>
<div class="foo-layout">
<header>
<SearchBox/>
</header>
<main>
...
</main>
</div>
</template>
<script>
import SearchBox from '@SearchBox'
export default {
components: { SearchBox }
}
</script>
```
## Options
## 选项
### searchMaxSuggestions
- Type: `number`
- Default: 5
- 类型: `number`
- 默认值: 5
Set the maximum number of results for search.
设置搜索的最大结果数。
## Tips
## 技巧
### Tweak the default colors.
### 调整默认颜色
Since the Search component leverages the built-in palette, you can tweak the default colors via `styles/palette.styl`:
由于该搜索组件使用了内置调色板,你可以通过 `styles/palette.styl` 来调整搜索框的默认颜色:
```stylus
// colors of the website you see now:
//
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef