从 01 开始 从 01 开始
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • RSS
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金等
  • 职场规划
  • 关于离职
  • 杂谈
  • 📖 读书

    • 读书工具
    • 读书笔记
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档

晓林

程序猿,自由职业者,博主,英语爱好者,健身达人
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • RSS
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金等
  • 职场规划
  • 关于离职
  • 杂谈
  • 📖 读书

    • 读书工具
    • 读书笔记
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档
  • 从零开始搭建博客系列
  • 什么是博客
  • VuePress
  • VuePress 日常使用
  • 主题
  • 插件
  • 更多配置
  • 部署
  • 域名、HTTPS 和备案
  • 图床
  • 搜索功能
    • 第三方插件
    • Aligo 搜索
    • 关于 Algolia 的更多说明
    • 美丽云搜索
    • 小结
    • 参考
  • Meilisearch 自建实践
  • 评论区
  • Twikoo 配置表情包
  • CDN
  • 数据统计
  • SEO
  • 友情链接
  • 网站安全

  • SSL 证书续费
  • 配置 RSS 订阅
  • 显示数学公式块
  • 添加 mermaid 支持
  • 关于邮件服务器
  • 我的写作流
  • 增加浏览器控制台输出
  • 从零开始搭建博客系列-终
  • 搭建博客
2023-02-22
目录

搜索功能

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

在 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),但没什么人回复,就此作罢。这里仅仅简单介绍下如何配置。

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

  1. 创建 Algolia 索引
  2. 在 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:

​​​

如果没有数据,那我们就查下爬取的逻辑,打开爬虫后台,点击对应 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),也是一个搜索引擎,主程序完全开源,除了使用官方提供的美丽云服务进行对接之外,还可以通过自建搜索引擎来实现完全独立的搜索服务,下一篇就会讲讲怎么搭建。 ‍

# 小结

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

# 参考

  • VuePress 博客优化之开启 Algolia 全文搜索_冴羽的 JavaScript 博客的博客-CSDN 博客 (opens new window)
  • Vuepress 全文搜索终极版-algolia 的开源实现 meilisearch 全接入指南 | 二丫讲梵 (opens new window)
上次更新: 2025/5/17 12:26:09
图床
Meilisearch 自建实践

← 图床 Meilisearch 自建实践→

最近更新
01
吐槽一下《僵尸校园》
05-15
02
2025 年 4 月记
04-30
03
山西大同 “订婚强奸案” 将会给整个社会带来的影响有多严重? - 知乎 转载
04-26
更多文章>
Theme by Vdoing | Copyright © 2022-2025 | 粤 ICP 备 2022067627 号 -1 | 粤公网安备 44011302003646 号 | 点击查看十年之约
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式