分层刻面搜索指南

本指南分解了嵌套分层刻面的概念，并提供了使用 Meilisearch 实现的实用技巧。

目录

什么是刻面搜索？
嵌套分层刻面
分层刻面搜索的数据结构
使用 Meilisearch 创建分层刻面搜索体验
使用 InstantSearch 和 instant-meilisearch

什么是刻面搜索？

刻面搜索允许用户通过广泛的类别或刻面来细化搜索结果。 这是一种直观的筛选内容方式，使用户能够找到与他们确切要求匹配的结果。

以电子商务网站为例。 用户在搜索产品时，会遇到结果列表和一系列有助于细化的刻面。 这些刻面通常可以在侧边栏中找到。

来自我们 电子商务演示的示例

嵌套分层刻面

嵌套刻面提供了一个多级结构，可帮助用户通过应用连续的过滤器来浏览数据，通常以分层方式显示。

嵌套分层刻面 对于浏览和搜索大型数据集或集合特别有用。 用户可以在不同级别之间向上和向下导航，从而提高可发现性。

想象一下在线购书体验。 用户可以

1. 从总括的“书籍”类别开始
2. 选择“类型”来更深入地了解
3. 专注于子类型
4. 并通过“作者”、“出版日期”或“评分”等属性进一步细化

这种搜索的基础在于数据的结构。

分层刻面搜索的数据结构

在实施分层刻面搜索时，数据文档也需要分层分类——从广泛的类别到更精细的类别。

以产品数据集为例

{
    "id": 1,
    "name": "Seagate BarraCuda 1 To (ST1000DM014)",
    "hierarchicalCategories": {
        "lvl0": "Electronics",
        "lvl1": "Electronics > Computer and Tablets",
        "lvl2": "Electronics > Computer and Tablets > Computer Parts",
        "lvl3": "Electronics > Computer and Tablets > Computer Parts > Storage"
    } 
}

每个产品都链接到分层类别，从广泛到具体，以建立清晰的数据路径。 这种有组织的分类对于实施刻面搜索至关重要，可引导用户从“电子产品”等一般类别到“计算机零件”中的“存储”等更精确的类别

使用 Meilisearch 创建分层刻面搜索体验

在 Meilisearch 中，刻面是 过滤器的特定用例。 某个东西是过滤器还是刻面主要取决于 UX 和 UI 设计。 要能够基于刻面细化结果，您需要将要用作刻面的属性添加到 filterableAttributes 列表。 从我们的产品示例中，您应该将 hierarchicalCategories 设置为可过滤。

分层刻面通常使用 AND 逻辑运算符，因为层次结构的每个级别都与其他级别结合使用，以逐步缩小搜索范围。

示例

• 类别：电子产品
  • 子类别：计算机
    • 品牌：Apple

结果将显示属于电子产品类别、计算机子类别且属于 Apple 品牌的商品。

在创建刻面搜索界面时，显示不同刻面的结果分布很有帮助。 当用户细化搜索时，向他们显示不同类别中的结果数量可以增强他们的搜索体验。

Meilisearch 通过 facets 搜索参数支持此功能。 当您将 facets 参数添加到搜索查询中时，Meilisearch 将返回一个 facetDistribution 对象。 此对象提供给定刻面的值之间分布的匹配文档数量。

  "facetDistribution":{
    "categories":{
      "Electronics":20,
      "Electronics > Computer and Tablets":7,
      …
      "Electronics > Computer and Tablets > Computer Parts > Storage":3
    }

利用刻面搜索参数，您可以呈现一个组织良好且直观的搜索界面，允许用户有效地筛选分层类别。 Meilisearch 为您提供了构建自己的刻面搜索 UI 的密钥，但为了快速轻松地进行设置，使用 InstantSearch 和 instant-meilisearch 是一种非常有效的替代方案。

使用 InstantSearch 和 instant-meilisearch

InstantSearch 是一个用于构建搜索 UI 的开源前端库。 Instant-meilisearch 是将 InstantSearch 与 Meilisearch 集成的首选搜索客户端。

在本指南中，我们将使用 React 代码示例，您可以在 InstantSearch 的文档中找到更多示例

要将 InstantSearch 与 instant-meilisearch 一起使用，您需要

1. 导入所需的模块

import React from 'react';
import { InstantSearch, SearchBox, InfiniteHits, HierarchicalMenu } from 'react-instantsearch';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

2. 使用您的 Meilisearch 主机和搜索 API 密钥建立 Meilisearch 客户端

const searchClient = instantMeiliSearch( 'https://ms-7053a8dd7c09-72.lon.meilisearch.io', 'meilisearchApiKey' )

3. 使用您的 Meilisearch 索引名称和搜索客户端设置 instantsearch

function App() {
  return (
    <InstantSearch indexName="products" searchClient={searchClient}>
      {/* Widgets */}
    </InstantSearch>
  );
}

为了更好地理解 InstantSearch 和 instant-meilisearch 如何协同工作，您可以参考我们的[专门的博客文章](/blog/instant-meilisearch/

在本指南中，我们将使用 InstantSearch 的 HierarchicalMenu 小部件以分层方式显示类别。

此小部件有一个必需的 prop，称为 attributes。 它接受一个字符串值数组。 每个字符串都标识数据结构中的特定属性，旨在用于生成分层菜单。

<HierarchicalMenu
    attributes={[
        "hierarchicalCategories.lvl0",
        "hierarchicalCategories.lvl1",
        "hierarchicalCategories.lvl2",
        "hierarchicalCategories.lvl3"
    ]}
/>

使用此小部件，您可以创建类似于下面示例的菜单

本指南为您提供了使用 Meilisearch 和 InstantSearch 实现分层刻面搜索所需的基本理解和步骤，从而增强用户通过分层、直观的分类进行导航的能力。

有关 Meilisearch 的更多信息，您可以订阅我们的 新闻通讯。 您可以通过查看路线图 并参与我们的产品讨论 来了解有关我们产品的更多信息。

如有其他任何问题，请加入我们在 Discord 上的开发者社区。