搜索功能
# 15.搜索功能
搜索功能是非常重要的,但 VuePress 内置的搜索功能,只是基于 headers 的搜索 —— 它会自动为所有页面的标题、h2
和 h3
构建起一个简单的搜索索引,也就是我们能搜索的东西只有标题,如果标题里没有你输入的关键字,就搜不到。
也就是说,不能搜索 Markdown 文件里的内容,非常不方便。
# 第三方插件
有 2 个插件:
- vuepress-plugin-flexsearch (opens new window):不支持中文,且是比较早创建的仓库,而且作者最后一次提交是在 21 年
- vuepress-plugin-flexsearch-pro (opens new window):基于上面的插件,改进了支持中文、英文、德文、韩文、日文的搜索。
使用方法:先安装依赖
npm i vuepress-plugin-flexsearch-pro
在 config.js 里配置:
module.exports = {
plugins: [
['flexsearch-pro'],
// other plugins
]
}
2
3
4
5
6
更丰富的配置项:
// .vuepress/config.js
module.exports = {
plugins: [
['flexsearch-pro', {
/*
自定义搜索参数
*/
searchPaths: ['path1', 'path2'], // 搜索路径数组,为空表示搜索全部路径
searchHotkeys: ['s'], // 激活搜索控件的热键, 默认是 "s" ,也可以添加更多热键
searchResultLength: 60, // 搜索结果展示的字符长度, 默认是60个字节
}],
// other plugins
]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
使用第三方插件的缺点是,会让静态文件包变得很大,使得首页的加载速度变慢,而首页加载速度慢很可能导致客户的流失。因此本文着重介绍第三方搜索。
第三方搜索,简单来说就是第三方通过爬虫的方式爬取网站里的内容,然后做好相应的分词等功能,并提供第三方接口用于查询
# Aligo 搜索
在第三方搜索中,目前大多数文章介绍的、使用最广的都是针对 algolia 的对接,例如 VuePress 官方网站 (opens new window) 使用的也是 Algolia,使用效果如下:
ElementUI 也是用的 Algolia:组件 | Element (opens new window)
并且 VuePress 内置了对 Algolia 的支持:默认主题配置 - Algolia 搜索 | VuePress (opens new window)
对接 Algolia 很简单,看到很多文章最后都正常使用了,但博主本人一直无法正常使用 Algolia,进行了很多的配置,但是搜索框就是没有正常显示,为此我还提了一个 issue:关于 VuePress 集成 Algolia 不生效的咨询 · Issue #3107 (opens new window),但没什么人回复,就此作罢。这里仅仅简单介绍下如何配置。
对接流程简单来说分为两步:
- 创建 Algolia 索引
- 在 VuePress 中配置 Algolia DocSearch
首先,打开 DocSearch: Search made for documentation | DocSearch by Algolia (opens new window),填写一些相关信息:
提交后会告诉你正在处理中,有结果后会发邮件反馈:
反馈时间看情况,有的人三天,我等了 7 天,邮件内容大致如下:
简单来说就是请在 3 天内回复你是否网站的拥有者。
此时需要回复邮件,告诉自己就是网站的维护者,并且可以修改代码,例如:
Thanks!
I am the maintainer of the website, I can modify the code ~
然后过几天就会收到回复,例如 APPID 等,这些参数是我们需要在 VuePress 中配置的:
如果你用的是 VuePress 的默认主题,VuePress 直接提供了 themeConfig.algolia 选项来用 Algolia 搜索替换内置的搜索框:
// .vuepress/config.js
module.exports = {
themeConfig: {
algolia: {
apiKey: '<API_KEY>',
indexName: '<INDEX_NAME>'
// 如果 Algolia 没有为你提供 `appId` ,使用 `BH4D9OD16A` 或者移除该配置项
appId: '<APP_ID>',
}
}
}
2
3
4
5
6
7
8
9
10
11
12
然后按理说就可以用了,简单吧...
以上是 VuePress 默认主题的配置,如果使用了其他主题,则需看该主题是否有做什么修改。
主要参考:VuePress 博客优化之开启 Algolia 全文搜索_冴羽的 JavaScript 博客 (opens new window)
# 关于 Algolia 的更多说明
如果你搜任何数据,都显示搜索不到数据,那很可能是爬取的数据有问题,我们注册并登录 https://www.algolia.com/ 打开管理后台,点击左侧选项栏里的 Search,查看对应的 indexName 数据,如果 Browse 这里没有显示数据,那说明爬取的数据可能有问题,导致没有生成对应的 Records:
登录后点击 search:
然后点击 Index:
如果没有数据,那我们就查下爬取的逻辑,打开爬虫后台,点击对应 indexName 进入后台:
如果显示成功爬取,也有 Monitoring Success 的数据:
如果没有记录,那大概是爬虫提取数据的逻辑有问题。登录爬虫控制台:Crawler Admin Console (opens new window),然后点击左侧选项栏中的 Editor,查看具体的爬虫逻辑:
像 pathsToMatch 这里如果是 https://www.peterjxl.com/docs/**
,但我们的的网址 https://www.peterjxl.com/**
都是开头的,没有 docs 文件夹,所以提取错误
我们修改一下 pathsToMatch,然后在右侧的输入框里输入我们的网址,点击右侧的数据进行测试:
如果能像这样提取到数据,就说明没有什么问题了,点击右上角的 Save。特别注意:爬取数据的时候,是用境外的服务器爬取的。如果你的网站设置了境外不能访问,那么爬取会失败,这一步是爬取不出来数据的。
切换回 Overview,点击右上角的 Restart crawling,我们重新爬取一下数据:
如果 Records 这里有数据,那搜索的时候基本也会有数据了。
注意:爬虫是每周执行一次,并且每周会有爬取结果和本周使用的搜索次数的统计邮件:
# 美丽云搜索
algolia 非常优秀,提供了免费的额度供普通博客进行接入,当博客内容足够多之后,免费额度不够用,就得付费购买服务,且 algolia 是闭源的,没有自建搜索的可能。
后来我在二丫讲梵的博客上看到了美丽云搜索(meilisearch),也是一个搜索引擎,主程序完全开源,除了使用官方提供的美丽云服务进行对接之外,还可以通过自建搜索引擎来实现完全独立的搜索服务,下一篇就会讲讲怎么搭建。
# 小结
使用第三方插件的缺点是,会让静态文件包变得很大,使得首页的加载速度变慢,而首页加载速度慢很可能导致用户的流失。推荐使用第三方搜索功能。