搭建博客

搜索功能

# 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
    ]
}

1
2
3
4
5
6

‍ 更丰富的配置项：

// .vuepress/config.js

module.exports = {
    plugins: [
      ['flexsearch-pro', {
        /*
          自定义搜索参数
        */
        searchPaths: ['path1', 'path2'],    // 搜索路径数组，为空表示搜索全部路径
        searchHotkeys: ['s'],    // 激活搜索控件的热键, 默认是 "s" ，也可以添加更多热键
        searchResultLength: 60,    // 搜索结果展示的字符长度, 默认是60个字节
      }],
      // other plugins
    ]
}

1
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>',
    }
  }
}

1
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：