1，信息

• vuepress-plugin-fulltext-search 官网 (opens new window)

• 效果：

  

2，安装

npm i vuepress-plugin-fulltext-search -D
# or
yarn add -D vuepress-plugin-fulltext-search -D

3，配置

1，添加

修改docs/.vuepress/config.js文件，添加插件fulltext-search

// docs/.vuepress/config.js
module.exports = {
  plugins: ['fulltext-search'],
}

如果某个页面不想被搜索，可以在文档头部分添加search: false

---
search: false
---

<!-- page content -->

2，优化

默认情况下，搜索关键字的结果是下划线的，没有高亮。阅读下源码，可得知对搜索结果如何高亮，修改如下：

// 搜索结果样式
.suggestions {
  max-height: 80vh; // 搜索结果框高度自适应
  overflow-y: scroll;
}
.suggestions .highlight{
  color: #646cff
  font-weight: bold
}

修改文件.vuepress/styles/index.styl, 添加样式：高亮和加粗

3，修改快捷键

通过源码阅读SearchBox.vue，有三个全局变量SEARCH_MAX_SUGGESTIONS,SEARCH_PATHS,SEARCH_HOTKEYS，

• SEARCH_MAX_SUGGESTIONS 定义最大搜索结果数据
• SEARCH_PATHS 搜索路径
• SEARCH_HOTKEYS 快捷键

那如何定义，才能使得三个全局变量生效了？

1.自定义 js 文件，放到.vuepress/public/js目录下，命令为pgmanor-self.js

// vuepress-plugin-fulltext-search 添加全局配置
SEARCH_MAX_SUGGESTIONS = 10;
SEARCH_PATHS = [];
SEARCH_HOTKEYS = ['s', 'i'];

2.在config.js中 head 中，将其添加引入

module.exports = {
    head: [
        // 引入自定义js
        ["script", {"language": "javascript", "type": "text/javascript", "src": "/js/pgmanor-self.js"}]
    ]
}

启动后，输入s或i验证，光标是否进入搜索框

3. 添加搜索框提示

可以在主配置文件themeConfig.js中添加如下内容：

searchPlaceholder: "按下 𝑺 搜索", // 可选：搜索栏占位文本

呈现效果如本博客搜索框所示。