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