添加搜索
为您的 Gatsby 网站添加搜索需要三个必备组件：搜索索引、搜索引擎 和 搜索 UI。
网站搜索组件
| 搜索组件 | 描述 |
|---|---|
| 搜索索引 | 搜索索引是以一种对搜索友好的格式存储您的数据的副本。索引用于优化搜索查询执行时的速度和性能。没有索引，每次搜索都需要扫描您网站上的每个页面——这很快就会变得效率低下。 |
| 搜索引擎 | 搜索引擎索引您的内容，接收搜索查询，通过索引运行它，并返回任何匹配的文档。搜索引擎可以是托管服务（如 Algolia），也可以是您可以自行托管的开源软件（如 Elastic）。 |
| 搜索 UI | 您网站上的一个 UI 组件，允许用户编写搜索查询并查看每次查询的结果。一些搜索提供商提供开箱即用的 React 组件，您可以将其添加到 Gatsby 网站中。 |
为您的网站添加搜索
有几种方法可以为您的 Gatsby 网站添加搜索。
客户端搜索
可以在不依赖第三方解决方案的情况下，在您的 Gatsby 网站中完成所有工作。这需要编写一些代码，但使用的服务更少。对于需要索引的大量内容，它也会显著增加捆绑包的大小。
一种方法是使用 js-search 库。
还有两个 Gatsby 插件支持此功能：
使用基于 API 的搜索引擎
另一个选择是使用外部搜索引擎。这种解决方案更具可扩展性，因为访问您网站的访客无需下载您整个搜索索引（随着网站的增长，这会变得非常大）即可搜索您的网站。权衡是您需要为托管搜索引擎付费或为商业搜索服务付费。
有许多可用选项，包括自托管和商业托管的开源选项。
- Algolia — SaaS，有 Gatsby 插件
- ElasticSearch — OSS，提供商业托管
- Solr — OSS，并提供商业托管
- Meilisearch - OSS，有 Gatsby 插件
- Typesense - OSS，提供托管版本，有 Gatsby 插件
其中，最常见的解决方案是 Algolia。Gatsby 文档中包含一个关于将 Algolia 添加到您网站的指南。
使用 Algolia 时，他们会为您托管搜索索引和搜索引擎。您的搜索查询将发送到他们的服务器，服务器将返回任何结果。对于 UI 组件，Algolia 提供了一个 React 库，其中包含有用的组件。
如果您正在构建文档网站，可以使用 Algolia 的 DocSearch 功能。它将自动从您页面的内容创建搜索索引。
Elasticsearch 还有几个用于搜索的 React 组件库，例如 ReactiveSearch。
立即开始构建，在 Netlify!