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），也是一个搜索引擎，主程序完全开源，除了使用官方提供的美丽云服务进行对接之外，还可以通过自建搜索引擎来实现完全独立的搜索服务，下一篇就会讲讲怎么搭建。

‍

小结

使用第三方插件的缺点是，会让静态文件包变得很大，使得首页的加载速度变慢，而首页加载速度慢很可能导致用户的流失。推荐使用第三方搜索功能。

‍

参考

VuePress 博客优化之开启 Algolia 全文搜索_冴羽的 JavaScript 博客的博客-CSDN 博客
Vuepress 全文搜索终极版-algolia 的开源实现 meilisearch 全接入指南 | 二丫讲梵

__EOF__

本文作者： PeterJXL 本文链接： https://www.cnblogs.com/PeterJXL/p/18289384 关于博主： 评论和私信会在第一时间回复。或者直接私信我。 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！ 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。