VuePress 博客优化之开启 Algolia 全文搜索_vuepress docsearch 配置了apikey 搜索不出来-CSDN博客

本文链接：https://blog.csdn.net/weixin_55475226/article/details/123363042

本文介绍了如何使用Algolia为VuePress博客提供全文搜索功能。首先阐述了Algolia的服务特点，接着详细讲解了申请过程和配置步骤，包括申请Algolia服务、设置VuePress默认主题以及处理搜索为空的情况。对于非默认主题，还提到了手动添加CSS和JavaScript的解决方案。文章是VuePress博客搭建系列的第24篇。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。

由于 VuePress 的内置搜索只会为页面的标题、h2 、 h3 以及 tags 构建搜索索引。如果你需要全文搜索，可则以使用 Algolia 搜索，本篇讲讲如何申请以及配置 Algolia 搜索。

Algolia

Algolia 是一个数据库实时搜索服务，能够提供毫秒级的数据库搜索服务，并且其服务能以 API 的形式方便地布局到网页、客户端、APP 等多种场景。

像 VuePress 官方文档就是使用的 Algolia 搜索，使用 Algolia 搜索最大的好处就是方便，它会自动爬取网站的页面内容并构建索引，你只用申请一个 Algolia 服务，在网站上添加一些代码，就像添加统计代码一样，然后就可以实现一个全文搜索功能：

申请

搜索服务申请地址：https://docsearch.algolia.com/apply/

打开后填写地址、邮箱和仓库地址等信息，这里注意，网站需要是公开可访问的：

填写完后，等待一段时间（我等了三天），如果申请通过，我们就会收到邮件：

此时需要回复邮件，告诉自己就是网站的维护者，并且可以修改代码：

然后第二天就会收到包含 AppId 等所需信息的邮件：

默认主题

如果你用的是 VuePress 的默认主题，VuePress 直接提供了themeConfig.algolia选项来用 Algolia 搜索替换内置的搜索框：

// .vuepress/config.js
module.exports = {
   
  themeConfig: {
   
    algolia: {
   
      apiKey: '<API_KEY>',
      indexName: '<INDEX_NAME>'
      // 如果 Algolia 没有为你提供 `appId` ，使用 `BH4D9OD16A` 或者移除该配置项
      appId: '<APP_ID>',
    }
  }
}