VuePress 博客优化之开启 Algolia 全文搜索

前言

在 《一篇带你用 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>',
    }
  }
}

你只用如此简单的配置即可实现全文搜索：