搭建博客

搜索功能

# 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 · vuejs/vuepress (opens new window)，但没什么人回复，就此作罢。这里仅仅简单介绍下如何配置。

对接流程简单来说分为两步：

1. 创建 Algolia 索引
2. 在 VuePress 中配置 Algolia DocSearch

1
2

‍

首先，打开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