使用 Meilisearch 为您的 Gatsby 项目添加搜索栏
本指南将详细介绍将 Gatsby 应用内容添加到 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 将帮助我们以相对较小的努力创建工作开发环境
步骤
- 启动 Meilisearch
- 设置 Gatsby 项目
- 添加 Meilisearch 插件
- 将 Gatsby 应用程序的内容添加到 Meilisearch
- 构建前端
启动 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 将在 https://:7700 上运行。如果一切顺利，您应该会在终端窗口中看到类似以下内容：
设置 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 文档网站的用户界面看起来的样子
将 Gatsby 应用程序的内容添加到 Meilisearch
现在我们已经安装了插件，并且 Gatsby 应用程序和 Meilisearch 实例都在运行，事情开始变得有趣了！让我们配置 gatsby-meilisearch-plugin 以使内容可搜索。
文档网站的主要代码位于 docs/website 目录中。
配置插件
我们首先需要做的是将您的 Meilisearch 凭证添加到 Meilisearch Gatsby 插件中。打开 docs/website/gatsby-config.js 并在 plugins 数组的底部添加这段代码：
{ resolve: 'gatsby-plugin-meilisearch', options: { host: 'https://: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 工具，可在 (https://: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" } ]
整合并最终确定插件配置
如果您一直跟着操作，那么 gatsby-plugin-meilisearch 配置在您的 docs/website/gatsby-config.js 的末尾现在应该看起来像这样：
{ resolve: 'gatsby-plugin-meilisearch', options: { host: 'https://: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.
您可以通过访问 https://:7700，输入您的 API 密钥，并检查 Nikita 的文档是否已添加到 Meilisearch 来验证这一点。
构建前端
现在数据已经索引，让我们构建用户界面，为我们的最终用户创造一个出色的搜索体验。
对于这个示例，我们将使用 docs-searchbar.js。它是 Meilisearch 的前端 SDK，提供了一种将搜索栏轻松集成到我们的文档网站中的方法。
添加搜索栏组件
我们首先在项目的前端目录中安装 docs-searchbar.js。
# With Yarn yarn add docs-searchbar.js
完成后，我们可以将 docs-searchbar 模块导入到 website/src/components/shared/AppBar.js 中，方法是在文件顶部添加以下内容：
import 'docs-searchbar.js/dist/cdn/docs-searchbar.css'
接下来，我们需要添加一个 useEffect 钩子，将 docsSearchBar 函数添加到 AppBar.js 中。将其添加到其他 useEffect 钩子下方：
useEffect(() => { if(window !== undefined){ const docsSearchBar = require('docs-searchbar.js').default docsSearchBar({ hostUrl: 'https://: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
然后使用您的浏览器访问 https://:8000。您应该会看到 NikitaJS 文档的本地副本，带有一个全新的搜索栏。
结论
我们希望本文能愉快地向您介绍新的 Gatsby Meilisearch 插件！
如果您有任何问题，请加入我们的 Discord。有关 Meilisearch 的更多信息，请查看我们的 Github 仓库和我们的官方文档。
Meilisearch 使用二值量化将嵌入索引速度提高7倍
通过在向量存储 Arroy 中实现二值量化，显著减少了大型嵌入的磁盘空间使用和索引时间，同时保持了搜索相关性和效率。
