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验证，光标是否进入搜索框

转自 Vuepress配置全文搜索插件fulltext-sarch - 腾讯云开发者社区-腾讯云 (tencent.com)