使用 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://127.0.0.1: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 安装官方的 Meilisearch Gatsby 插件
yarn add gatsby-plugin-meilisearch
太棒了！我们准备好启动 Gatsby 了。为此，只需在你的控制台上运行以下命令
yarn develop
这是 Nikita 文档网站的 UI 外观
将 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://127.0.0.1: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://127.0.0.1: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: 'https://127.0.0.1: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://127.0.0.1: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://127.0.0.1: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://127.0.0.1:8000。您应该会看到您本地的 NikitaJS 文档副本，其中包含一个全新的搜索栏
结论
我们希望本文能为您愉快地介绍新的 Meilisearch Gatsby 插件！
如果您有任何问题，请在 Discord 上加入我们。有关 Meilisearch 的更多信息，请查看我们的 Github 存储库 和我们的官方文档。
如何向 React 应用程序添加 AI 驱动的搜索
使用 Meilisearch 的 AI 驱动搜索构建 React 电影搜索和推荐应用程序。
使用 Blazity 构建您的 Next.js Shopify 店面
学习如何使用 Next.js 和 Blazity 商业入门套件构建 Shopify 店面。
