Hexo集成Algolia实现搜索功能

Posted 2023-02-24 Baret-H

2年前搭建的hexo博客好久没有维护了，一看 hexo 以及先前使用 butterfly 主题已经更新好几个版本了，看介绍在速度性能上有了很大的提高，于是打算给 hexo 升个级，整理整理翻翻新。通过阅读 butterfly 的官方文档，发现 butterfly 内置功能越来越丰富并且支持了更多的三方功能，本文就带大家通过搜索引擎Algolia实现 hexo 站内的高效检索～

参考：

• https://butterfly.js.org/（ hexo-butterfly 官方）
• https://www.dazhuanlan.com/fjshlm/topics/1384262
• https://blog.csdn.net/lol155/article/details/107023079

什么是 Alogolia

Algolia 是一个托管搜索引擎，提供全文，数字和多面搜索，能够从第一次击键中提供实时结果，它提供了一组工具，可简化制作完整搜索体验并将其集成到您的网站和应用程序中的过程。这些包括：

• 支持多种不同语言的后端 API 客户端，用于索引、配置和管理数据。
• 用于构建 Web 和移动搜索体验的前端小部件。
• 与流行的框架和平台集成，进一步简化Algolia在现有项目中的集成。
• 一个安全的分布式搜索网络，可托管您的内容并快速将其提供给客户。
• 透明、可自定义的相关性算法。
• 一个经过大量优化的搜索引擎，从头开始构建，C++。
• 大量文档、实现指南和代码示例。

简单来说，Algolia 是一个提供云搜素服务的第三方平台，我们可以通过调用 Algolia 的API接口把我们自己站点的数据上传到 Alogolia 中，实现我们自己站点的搜索功能。

1. 创建 Alogolia Index

首先登陆进入 Algolia 官网，我们可以使用 GitHub 或 Google 帐号登录。

然后进入 Dashboard，选择 Indices 新建一个 Index，这里创建了一个名为hexo的索引

Index(索引)也就是搜索引擎中的数据库，我们所有的搜索相关信息都存在里面。

2. 配置 API Key

接下来我们需要配置 Algolia——API Keys 到我们自己的 hexo 站点中，关联两者，使得 Algolia 能够搜集我们 hexo 站点的数据通过 API 发送给 Aloglia

点击 Dashborad 左侧的 API Keys，其中的 Application ID 、Search-Only API Key、Admin API KEY信息将会被用到

首先我们需要修改 hexo 站点根目录下的 _config.yml，进行以下配置：

algolia:
  applicationID: 'RF2NKDLHP9'
  apiKey: '605b8fc4325b813cfebbc5618f2887f5'
  indexName: 'hexo'

• applicationID 就是网页中的 Applicaiton ID
• apiKey 就是网页中的 Search-Only API Key
• indexName 就是我们前面创建的索引名称

然后我们需要配置一个名称为 HEXO_ALGOLIA_INDEXING_KEY，内容为 Alogolia 网页中 Admin API KEY 的环境变量：

vim ~/.bash_profile
source ~/.bash_profile

3. 通过 Hexo Aloglia 获取站点数据

前面我们创建了 Index，但是此时为空，不包含任何数据。我们需要安装 Hexo Aloglia 扩展，这个扩展的功能是搜集站点的内容并通过 API 发送给 Aloglia

npm install --save hexo-algolia

安装完成后，在 hexo 站点根目录下执行hexo algolia 来搜集数据更新到我们刚创建的 Index 中

如上图所示则代表成功将 hexo 站点中的数据发送到了 Alogolia 的 Index 中，我们可以在网页中看到所有的数据

4. 主题集成 Alogolia

更改主题配置文件 _config.yml，找到 Algolia Search 配置部分，将enable 改为true 即可：

# Algolia search
algolia_search:
  enable: true
  hits:
    per_page: 6

5. 重新部署

hexo clean
hexo g
hexo d

然后重新部署到 Gitee Page，部署完成后再次访问，即可看到搜索功能已经配置完成：