17

Vuepress配置全文搜索插件fulltext-sarch

 3 years ago
source link: https://wiki.eryajf.net/pages/8aafb1/#%E4%BF%AE%E6%94%B9%E5%BF%AB%E6%8D%B7%E9%94%AE
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Vuepress配置全文搜索插件fulltext-sarch

# 1，信息

# 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 -->
1
2
3
4
5

# 2，优化

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

.suggestions .highlight{
  color: #3eaf7c
  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"}]
    ]
}
1
2
3
4
5
6

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK