MdPress

# @mdpress/plugin-search

基于 Headers 的搜索插件

# 安装

yarn add -D @mdpress/plugin-search
# OR npm install -D @mdpress/plugin-search

::: tip 请注意，此插件已包含在默认主题中，你现在看到的搜索便是由本插件提供支持。 :::

# 使用

  1. 启用此插件：
// .mdpress/config.js or themePath/index.js
module.exports = {
  plugins: [
    ['@mdpress/search', {
      searchMaxSuggestions: 10
    }]
  ]
}
  1. 本插件将自动注入指向搜索组件的 webpack 别名 @SearchBox，以便您可以直接在 layout 组件中使用它：
import SearchBox from '@SearchBox'
// 其他代码

<div>
  <div class="foo-layout">
    <header>
      <SearchBox/>
    </header>
    <main>
      ...
    </main>
  </div>
</div>

# 选项

# searchMaxSuggestions

  • 类型: number
  • 默认值: 5

设置搜索的最大结果数。

# 技巧

# 调整默认颜色

由于该搜索组件使用了内置调色板，你可以通过 styles/palette.styl 来调整搜索框的默认颜色：

// 你现在看到的这个搜索栏的颜色：
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc

← pwa