前往主页Meilisearch 标志
返回文章
使用 Meilisearch
2022 年 3 月 30 日

使用 Meilisearch 为您的 Gatsby 项目添加搜索栏

本指南将详细介绍如何将您的 Gatsby 应用内容添加到 Meilisearch 的所有步骤

Shivay Lamba
Shivay LambaMeilisearch 团队
Add a search bar to your Gatsby project using Meilisearch

Nikita 是一个用于自动化部署工作流的 Node.js 工具包。尽管我们认为它很棒，但我们注意到 Nikita 的文档网站并没有真正为用户提供快速搜索和查找所需信息的方式。然而，Nikita 的内容是开源的，文档网站是使用 Gatsby 构建的，因此我们决定借此机会向您展示如何为基于 Gatsby 的项目添加一个美观的搜索界面。

在本教程中，我们将安装 Meilisearch 以及其他一些依赖项。然后，我们将克隆 Nikita 的 Gatsby 仓库并使用 Meilisearch 索引 Nikita 的文档。最后，我们将在本地版本的 Nikita 文档中添加一个搜索 UI。

您可以此 GitHub 仓库中查看最终代码，包括所有可在服务器中运行的内容。

设置

在我们开始之前，让我们快速了解一下完成本教程所需的一切。

工具介绍

Gatsby

Gatsby 是一个基于 React 的开源框架，用于静态站点生成 (SSG)。它结合了 React、GraphQL 和 Webpack 的功能，开箱即用地提供了出色的性能、可扩展性和安全性。

要求

要完成本教程，您需要以下内容

  • 一个打开的 终端或命令提示符
  • Node.js >= 14.15.X 且 <= 16.X：这使得在浏览器之外运行 JS 成为可能
    • 您可以使用命令 node --version 检查您的当前版本
    • 如果您的 Node 版本不在该范围内，我们建议您 安装 nvm 并使用它来访问 Node 14
  • Yarn >= 1.22：Yarn 是一个兼作项目管理器的包管理器
  • Docker：Docker 将帮助我们以相对较小的努力创建一个可用的开发环境

步骤

  1. 启动 Meilisearch
  2. 设置 Gatsby 项目
  3. 添加 Meilisearch 插件
  4. 将 Gatsby 应用内容添加到 Meilisearch
  5. 构建前端

启动 Meilisearch

有多种方法可以下载和运行 Meilisearch 实例。本指南将使用 Docker。想要避免本地安装？试试我们的Meilisearch 云服务，可享 14 天免费试用！

在您的机器上安装 Docker 后，获取并运行最新的 Meilisearch 容器镜像。为此，请打开您的终端并使用以下命令

docker pull getmeili/meilisearch:latest 

docker run -it --rm -p 7700:7700 getmeili/meilisearch:latest ./meilisearch --master-key=masterKey

Meilisearch 将在http://localhost:7700 上运行。如果一切顺利，您应该在终端窗口中看到类似以下内容

Screenshot-2023-04-13-at-14.48.31

设置 Gatsby 项目

Meilisearch 准备就绪后，是时候下载 Nikita 的文档了。

在另一个终端窗口中，导航到您的工作目录，然后克隆我们将用于本指南的 Nikita 项目

git clone https://github.com/adaltas/node-nikita.git

您可以在 docs/content 文件夹内的 Markdown 文件中找到 Gatsby 应用的内容。这是 Gatsby 用于生成 Nikita 文档的数据。

| node-nikita 项目的目录结构 |

添加 Meilisearch 插件并启动 Gatsby

好的：Meilisearch 和 Gatsby 都已安装。我们将首先安装所有项目依赖项。在您的终端中运行以下命令

cd node-nikita/docs/website
yarn

完成此操作后，我们将使用 Yarn 安装 Gatsby 的官方 Meilisearch 插件

yarn add gatsby-plugin-meilisearch

太棒了！我们准备好启动 Gatsby 了。为此，只需在您的控制台中运行以下命令

yarn develop

这是 Nikita 文档网站 UI 的样子
nikita1

将 Gatsby 应用内容添加到 Meilisearch

现在我们已经安装了插件，并且 Gatsby 应用和 Meilisearch 实例都在运行，事情开始变得有趣了！让我们配置 gatsby-meilisearch-plugin 以使内容可搜索。

文档网站的主要代码位于目录 docs/website 中。

配置插件

我们需要做的第一件事是将您的 Meilisearch 凭据添加到 Meilisearch Gatsby 插件中。打开 docs/website/gatsby-config.js 并在 plugins 数组的底部添加这段代码

{
    resolve: 'gatsby-plugin-meilisearch',
    options: {
      host: 'http://localhost:7700', // your host URL goes here
      apiKey: 'masterKey',   // your API key goes here       
      indexes: [],
    },
  },

目前，我们的配置告诉插件在哪里找到我们的 Meilisearch 实例，并赋予它读取 Gatsby 内部内容的凭据。现在我们需要定义要添加到 Meilisearch 的数据以及如何添加。这发生在 indexes 字段中。该字段可视为 Gatsby Meilisearch 插件的核心。

indexes 字段是一个由多个索引对象组成的数组。每个索引对象必须包含以下字段：indexUid、query 和 transformer。让我们检查这些字段。

indexUid

此字段包含 Meilisearch 索引的名称。对于本指南，我们将使用 nikita-api-docs

indexUid: 'nikita-api-docs'

query

此字段包含插件将用于从 Nikita 文档中获取内容的 GraphQL 查询。Gatsby 内置支持 GraphQL——它甚至包含一个捆绑的 GraphQL 工具，可在 (http://localhost:8000/___graphql) 访问。您可以在项目的官方文档中阅读更多关于 GraphQL 的信息。

我们的查询如下所示。

query: `query MyQuery {
    allMdx {
      edges {
        node {
          frontmatter {
            title
            navtitle
            description
          }
          slug
          rawBody
          id
        }
      }
    }
  }`,

在此查询中，我们首先通过使用 allMdx 语句包装查询来表示我们只对 Markdown 文件感兴趣。这要归功于两个非常有用的工具：gatsby-plugin-mdx 和 gatsby-source-filesystem。

然后，我们指定要包含在索引中的文档字段：title、navtitle、description、slug、id，最后是 rawBody——即文档的原始 Markdown 内容。

transformer

这是最后一个配置字段。它获取我们使用 query 从 Gatsby 获取的数据，并将其转换为 Meilisearch 能够理解的格式。

在我们的例子中，数据看起来有点像这样

data = {
    allMdx: {
        edges: [
          {
            node: {
              frontmatter: {
                title: "Introduction",
                navtitle: "intro",
              },
              body: "Introduction to the Nikita.js",
              slug: "/introduction",
              id: "1",
            },
          },
          {
            node: {
              frontmatter: {
                title: "Architecture",
                navtitle: "architecture",
              },
              body: "Architechture of Nikita.js",
              slug: "/architecture",
              id: "2",
            },
          },
        ],
    },
};

这些数据看起来很棒，但其格式 Meilisearch 无法轻松理解。我们可以通过向 transformer 添加解析器函数来改变这一点

transformer: (data) => {
    data.allMdx.edges.map(({ node }) => {
      // Node property has been destructured here
      return {
        id: node.id,
        lvl0: node.frontmatter.title,
        lvl1: node.frontmatter.navtitle,
        content: node.body,
        anchor: node.slug,
      };
    });
}

这样，gatsby-plugin-meilisearch 将获取我们用查询提取的原始数据，并将整个对象转换为一个数组。

 // It will return a list of transformed structured object
  
[
    {
      id: "1",
      lvl0: "Introduction",
      lvl1: "introduction",
      content: "Introduction to the Nikita.js",
      anchor: "/introduction"
    },
    {
      id: "2",
      lvl0: "Architecture",
      lvl1: "architecture",
      content: "Architechture of Nikita.js",
      anchor: "/architecture"
    }
]

整合所有内容并完成插件配置

如果您一直按照本指南操作，那么您的 docs/website/gatsby-config.js 文件末尾的 gatsby-plugin-meilisearch 配置现在应该看起来像这样

{
  resolve: 'gatsby-plugin-meilisearch',
  options: {
    host: 'http://localhost:7700',
    apiKey: 'masterKey',
    batchSize: 1,
    indexes: [
      {
        indexUid: 'nikita-api-docs',
        settings: {
          searchableAttributes: ['lvl0', 'lvl1', 'lvl2', 'content'],
        },
        transformer: (data) =>
          data.allMdx.edges
            .filter(
              ({ node }) =>
                node.slug.search('guide') !== -1 ||
                node.slug.search('project') !== -1 ||
                node.slug.search('api') !== -1
            )
            .map(({ node }) => {
              // Have to update for versioning
              const currentVersion =
                node.slug.substring(0, 8).search('project') === -1
                  ? '/current'
                  : ''

              return {
                id: node.id,
                lvl0:
                  node.frontmatter.navtitle || node.frontmatter.title || '',
                lvl1:
                  node.frontmatter.title || node.frontmatter.navtitle || '',
                lvl2: node.frontmatter.description || '',
                content: node.rawBody,
                url: `${currentVersion}/${node.slug}`,
              }
            }),
        query: `query MyQuery {
            allMdx {
              edges {
                node {
                  frontmatter {
                    title
                    navtitle
                    description
                  }
                  slug
                  rawBody
                  id
                }
              }
            }
          }`,
      },
    ],
  },
},

我们通过将基本数据和凭据添加到 docs/website/gatsby-config.js 来开始 gatsby-plugin-meilisearch 配置。

我们继续配置，指定要搜索的内容应添加到 nikita-api-docs 索引中，使用 GraphQL 查询选择要索引的内容，最后使用 transformer 函数格式化数据以进行索引。

构建项目

gatsby-plugin-meilisearch 将在构建过程中获取数据并发送到 Meilisearch 进行索引。要开始此过程，请运行以下命令

yarn build

一旦您的内容正在被索引，您应该在终端中看到一条消息

success gatsby-plugin-meilisearch - 0.920s - Documents are send to Meilisearch, track the indexing progress using the tasks uids.

您可以通过访问 http://localhost:7700，输入您的 API 密钥，并检查 Nikita 的文档是否已添加到 Meilisearch 来验证这一点。

构建前端

现在数据已索引，让我们构建用户界面，为最终用户创造出色的搜索体验。

在此示例中，我们将使用 docs-searchbar.js。它是 Meilisearch 的一个前端 SDK，提供了一种将搜索栏轻松集成到我们文档网站中的方法。

添加搜索栏组件

让我们首先在项目的前端目录中安装 docs-searchbar.js。

# With Yarn
yarn add docs-searchbar.js

完成此操作后，我们可以通过将此代码添加到 website/src/components/shared/AppBar.js 文件的顶部来导入 docs-searchbar 模块

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

接下来，我们需要添加一个 useEffect hook，将 docsSearchBar 函数添加到 AppBar.js。将其添加到其他 useEffect hook 下方

useEffect(() => {
    if(window !== undefined){
      const docsSearchBar = require('docs-searchbar.js').default

      docsSearchBar({
        hostUrl: 'http://localhost:7700',
        apiKey: 'masterKey',
        indexUid: 'nikita-api-docs',
        inputSelector: '#search-bar-input',
        meilisearchOptions: {
          limit: 5,
        },
        enhancedSearchInput: true,
      })
    }
  }, [])

docsSearchBar 函数带有许多不同的参数

  • hostUrl 和 apiKey 允许搜索栏访问您的 Meilisearch 实例。
  • indexUid 告诉搜索栏它应该搜索哪个索引。
  • inputSelector 是一个匹配 HTML 元素的选择器，用户将在其中输入查询。在我们的例子中，它是 #search-bar-input。别担心，我们稍后会将此元素添加到 Gatsby 中。
  • 最后，enhancedSearchInput 告诉 docs-searchbar 为搜索框应用一个主题，从而改善其外观并使其更具用户友好性。

剩下要做的就是将我们的搜索元素添加到 website/src/components/shared/AppBar.js 中。请记住使用我们配置为 inputSelector 的相同 id。将此元素添加到 </Link> 标签之后

<input type="search" id="search-bar-input" />

大功告成！

测试实现

准备好看到所有这些努力付诸实践了吗？在您的终端中，重新运行以下命令

yarn develop

然后使用您的浏览器访问 http://localhost:8000。您应该会看到 NikitaJS 文档的本地副本，其中带有一个全新的搜索栏

nikitalfinall

结论

我们希望本文能为您愉快地介绍新的 Gatsby Meilisearch 插件！

如果您有任何疑问，请加入我们的 Discord。有关 Meilisearch 的更多信息，请查看我们的 GitHub 仓库和官方文档。

Meilisearch indexes embeddings 7x faster with binary quantization
工程使用 Meilisearch

Meilisearch 通过二进制量化将嵌入索引速度提高 7 倍

通过使用向量存储 Arroy 实现二进制量化，在保持搜索相关性和效率的同时，大大减少了大型嵌入的磁盘空间使用和索引时间。

Tamo
Tamo2024 年 11 月 29 日
How to add AI-powered search to a React app
使用 MeilisearchAI

如何在 React 应用中添加 AI 驱动的搜索

使用 Meilisearch 的 AI 驱动搜索构建一个 React 电影搜索和推荐应用。

Carolina Ferreira
Carolina Ferreira2024 年 9 月 24 日
Meilisearch is too slow
工程使用 Meilisearch

Meilisearch 太慢了

在这篇博客文章中，我们探讨了 Meilisearch 文档索引器所需的增强功能。我们将讨论当前的索引引擎、其缺点以及优化性能的新技术。

Clément Renault
Clément Renault2024 年 8 月 20 日