如何为您的 Gatsby 网站添加搜索功能：分步指南

如果您正在寻找一种可靠、快速且可扩展的搜索功能，可以直接添加到您的静态网站，那么 Gatsby 搜索就是答案。只需点击几下，Gatsby 搜索就能让任何用户在其 Gatsby 网站上查找相关内容，因此您无需担心传统的导航问题。

Gatsby 用户可以通过使用诸如 gatsby-plugin-meilisearch、gatsby-plugin-local-search 等插件，或连接外部搜索 API 来实现搜索功能。这些工具使用 GraphQL 查询来索引 Markdown、JSON 或 HTML 文件中的数据，并支持客户端或预渲染的搜索组件。

本文将指导您如何为 Gatsby 网站添加一个实时、全文搜索引擎。我们还将介绍插件、配置以及 GraphQL 查询的详细信息。除此之外，您还将学习如何转换数据和部署一个可用的搜索索引。

让我们从使用 Meilisearch 为任何 Gatsby 项目添加搜索功能的步骤开始。

1. 为您的 Gatsby 网站安装 Meilisearch 插件

第一步是安装一个开源插件：gatsby-plugin-meilisearch。为什么？

这个 gatsby-plugin 是您的 Gatsby 网站与 Meilisearch 实例之间通过定义的 API 凭证建立的连接。主要好处是它允许您的项目在构建时生成实时搜索索引。此外，它支持全文搜索、过滤器和流畅的客户端搜索操作。那么，让我们开始吧。

使用 npm

npm install gatsby-plugin-meilisearch

安装后，进入您的 gatsby-config.js 文件。您可以在这里定义站点设置和 Gatsby 插件选项。将插件添加到插件数组中，并指定您的 Meilisearch 实例的正确主机和 API 密钥。

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-meilisearch',
      options: {
        host: 'https://:7700',
        apiKey: 'masterKey',
      },
    },
  ],
}

您可以在 GitHub 上了解更多关于此插件的信息。

这为您的搜索引擎奠定了基础。接下来，您将定义搜索索引并配置要获取的数据。

2. 配置搜索索引和 GraphQL 查询

安装 gatsby-plugin-meilisearch 后，您需要定义要发送到 Meilisearch 的内容。这将在 gatsby-config.js 中完成，您将在其中设置索引数组。

每个条目代表一个搜索索引。您还可以在此处指定与您如何转换数据对齐的 GraphQL 查询和索引名称。

这是一个示例配置

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-meilisearch',
      options: {
        host: 'https://:7700',
        apiKey: 'masterKey',
        indexes: [
          {
            indexUid: 'pages_index',
            query: `
              {
                allSitePage {
                  nodes {
                    path
                  }
                }
              }
            `,
            transformer: data =>
              data.allSitePage.nodes.map((node, index) => ({
                id: index,
                path: node.path,
              })),
          },
        ],
      },
    },
  ],
}

这个 graphql 查询从您的 Gatsby 网站页面获取数据。转换器函数通过为每个条目分配一个唯一的 ID 来准备它进行索引。这确保了 Meilisearch 现在可以正确存储和返回相关的搜索结果。

3. 构建并索引您的 Gatsby 内容

现在，是时候构建和索引内容了。我们已经配置了搜索索引和 GraphQL。当您运行 gatsby build 时，gatsby-plugin-meilisearch 会从您的 Gatsby 网站中获取数据并将其推送到您的 Meilisearch 实例。此步骤将您的本地内容与实时搜索索引连接起来。

运行构建

gatsby build

完成后，您将看到类似以下消息

success gatsby-plugin-meilisearch - Documents added to Meilisearch

这确认您的数据已索引。Meilisearch 仪表板或本地实例将帮助您检查已索引的内容。

如果您忘记此步骤，您的搜索查询将不会返回任何结果，因为没有可供搜索的内容。

您还可以参考官方的 Gatsby 插件文档，了解其他选项，例如 batchSize、skipIndexing 或自定义设置，如 searchableAttributes。

现在您的内容已索引，是时候连接搜索 UI 了。

4. 为您的 Gatsby 前端添加搜索组件

在您的 Gatsby 网站内容被索引后，下一步是构建用户界面。为了简化这一点，您可以使用像 docs-searchbar.js 这样的搜索组件。它之所以有效，是因为它与 Meilisearch 集成并支持我们正在构建的搜索功能。

首先安装软件包

yarn add docs-searchbar.js

然后，在您的 src/components 文件夹中，找到合适的 JS 文件（例如 AppBar.js）。现在，导入搜索模块和 CSS

import 'docs-searchbar.js/dist/cdn/docs-searchbar.css'

在您的 React 组件中，使用 useEffect hook 初始化搜索

useEffect(() => {
  const docsSearchBar = require('docs-searchbar.js').default
  docsSearchBar({
    hostUrl: 'https://:7700',
    apiKey: 'masterKey',
    indexUid: 'your-index',
    inputSelector: '#search-bar-input',
    meilisearchOptions: { limit: 5 },
    enhancedSearchInput: true,
  })
}, [])

最后，在您的 JSX 中添加搜索输入字段

<input type="search" id="search-bar-input" placeholder="Search..." className="searchbox" />

此设置将您的静态前端连接到实时搜索索引。用户在输入时会获得结果，并且完全支持搜索查询解析、自动完成和容错。

接下来是自定义。您将学习如何修改搜索体验，使其更好地匹配您网站的设计和结构。

5. 定制您的搜索体验

要为您的 Gatsby 网站解锁自定义功能，您需要一个可用的搜索组件。一旦它正常工作，您就可以根据您网站的结构和设计修改搜索体验。

首先，您将修改 gatsby-config.js 中的转换器函数。

此函数决定了您的数据在 Meilisearch 中如何显示。您可以为每个搜索索引项添加元数据，例如 frontmatter.title、description、slug 或任何自定义字段。

transformer: (data) =>
  data.allMdx.edges.map(({ node }) => ({
    id: node.id,
    title: node.frontmatter.title,
    description: node.frontmatter.description,
    url: node.slug,
  }))

优先级是定制的重要组成部分。为了优先考虑 Meilisearch 应该首先匹配的字段，您将更新插件设置中的 searchableAttributes

settings: {
  searchableAttributes: ['title', 'description', 'content']
}

Meilisearch 为您的定制过程带来了其他一些好处。例如，您可以轻松调整查询行为，例如拼写容错和过滤。此外，您始终可以调整搜索输入框的 CSS 样式并添加 classname 以匹配您的设计系统。

手动通过 React 组件构建组件？您可以参考React 搜索引擎指南以获得更高的前端控制。定制是为了增强用户体验，这也不例外。

6. 构建并部署带有搜索功能的 Gatsby 网站

搜索功能已到位，自定义也已完成，现在是最后一步：构建并部署您的 Gatsby 网站。让我们运行保护构建命令

gatsby build

在构建过程中，gatsby-plugin-meilisearch 运行您的 GraphQL 查询，应用转换器，并将数据推送到搜索索引。如果您的 Gatsby 网站托管在 Netlify 等平台，此过程将在每次部署时运行。

上线后，测试您的搜索框，确认搜索输入行为，并验证查询结果。在 Meilisearch Cloud 上，您还可以访问内置分析功能。

使用官方的 Gatsby 插件文档 或此Gatsby 搜索教程以获取完整的设置步骤。

Gatsby 中如何使用搜索？

搜索功能为静态内容（Gatsby 网站通常用于博客、文档、电子商务和营销页面）增添了速度和可用性。

使用 gatsby-plugin，Markdown、JSON 或 HTML 中的内容变得可搜索。这改善了导航，使您的网站搜索快速高效。

让我们看看一些关键用例

• 站点搜索：一种快速帮助用户在您的 Gatsby 网站上找到他们正在寻找的内容的方式。
• 文档搜索：更容易在用 Markdown 和 frontmatter 构建的开发人员文档中查找命令。
• 博客搜索：通过标签、类别或标题进行过滤，更容易找到您感兴趣的内容。
• 电子商务搜索：帮助购物者查找产品并在输入时查看建议。
• 静态知识库：它负责对索引内容进行快速的客户端搜索。

简而言之，搜索负责所有这些格式的用户体验和参与度。

Gatsby 支持服务器端搜索吗？

不，不支持。Gatsby 是一个静态站点生成器，因此它提前构建您的所有内容并显示预制的 HTML 页面。如果您想为您的网站添加实时搜索，外部工具（如 Meilisearch）可能是解决方案。它通过处理查询并返回 API 结果来工作。例如，在您的网站上添加所需搜索功能的一种方法是使用 Meilisearch React 集成。

Gatsby 支持本地搜索吗？

是的。Gatsby 支持使用 gatsby-plugin-local-search 和 lunr 等插件进行本地搜索。这些工具在构建时索引内容，并提供轻量级、基于浏览器的搜索，无需依赖外部 API。虽然这适用于小型项目，但大型网站通常使用 Meilisearch 以获得更快的索引、拼写容错和高级搜索功能。对于复杂的内容驱动型网站，Meilisearch 是一个更灵活的选择。

在 Gatsby 网站中构建强大的搜索功能

搜索功能是任何内容丰富的 Gatsby 网站的必备功能。快速搜索对于博客、文档，尤其是在线商店来说，都是无价的。像 gatsby-plugin-meilisearch 这样的工具为您的 React 组件带来了实时、容错的搜索功能。

Meilisearch 通过您的 gatsby-config.js 连接，使用 GraphQL 查询、转换器函数和定义的搜索索引。它支持 Markdown、JSON 和嵌套内容结构。通过最少的设置，您的静态 Gatsby 网站可以提供动态搜索查询处理和现代用户体验。