产品目录

分类目录是整合和设计来自 CMS 分类或电子商务分类的动态内容的两种方法之一（另一种方法是使用分类页面）。您可以将分类目录添加到您网站上的任何 category 页面。

在深入研究分类目录之前，请随意在我们的其他教程中了解有关 CMS 和 CMS 集合的更多信息：

• Webflow CMS 简介
• 动态内容概述
• 选择

在本教程中，您将发现：

1. 如何添加商品目录
2. 如何将您的分类目录链接到系列
3. 如何设计分类目录
4. 分类目录的结构
5. 如何配置分类目录设置
6. 关于分类目录中的组件

如何整合商品目录

只要您拥有一个或多个包含系列产品的系列，您就可以将系列目录添加到您网站上的任何永久页面或系列页面。要添加系列目录：

1. 发起 插入面板
2. 点击并绘制 产品目录 到您的网站页面

您还可以使用快速搜索来包含分类目录： 命令 + 埃 （在 Mac 上）或 控制 + 埃 （在 Windows 上）。

如何将您的分类目录链接到系列

分类目录只有在与系列关联后才有效。要将分类目录链接到系列，请执行以下操作：

1. 双击 产品目录 展开分类目录设置
2. 选择您喜欢的系列 来源 （例如作者、博客文章、客户等）

评论： 当您将分类目录连接到集合时，除非您之前已在 CMS 面板中显示集合，否则集合项目名称不会显示在集合目录项目标签上。为了解决此问题，请在将分类目录链接到集合之前在 CMS 面板中显示集合。

如何设计分类目录

将集合连接到您的分类目录后，分类目录将以空白块的形式显示该集合中的所有项目。您可以将元素附加到分类目录并将这些元素链接到集合字段。然后，这些元素将自发填充来自您的集合的数据。

整合固定和动态组件

将元素添加到其中一个空置的分类目录块后，该元素将在每个分类目录块中复制。这被视为“固定”内容 — 不源自集合的内容。

当您将元素连接到 Collection 字段时，它会自动用每个 Collection 项的内容替换元素的默认内容（例如，标题元素中的“Heading”一词）。它成为“动态”内容，因为内容源自 CMS Collection。

固定元素在画布上有蓝色轮廓，而动态元素（来自 CMS 的数据元素）有紫色轮廓。 

将元素链接到集合字段

您可以将固定元素链接到 Collection 字段，以动态修改该元素的内容。要将元素链接到 Collection 字段：

1. 导航至 插入面板
2. 附加 元素 （例如标题、段落等）添加到您的分类目录
3. 在分类目录中选择元素
4. 导航 元素设置
5. 选中标有“接收 文本 从 博客文章“（字段类型和集合名称可能因您选择的元素和集合而不同）
6. 揭开 选择字段 落下
7. 选择 集合字段 您希望收到来自

了解有关如何将每个 Collection 字段类型链接到相关元素的更多信息。

将元素与集合字段分开

您还可以选择从 Collection 字段中分离元素：

1. 在分类目录中选择元素
2. 导航 元素设置‍
3. 取消选择“接收 文本 从 博客文章“（字段类型和集合名称可能因您选择的元素和集合而不同）
   • 您的选择

   实现动态方面

   当您为集合列表中的任何元素（无论是静态还是动态）引入样式时，样式将反映在该集合列表中的所有项目中。例如，如果您将标题链接到集合字段并使用绿色字体颜色对其进行样式设置，则该集合列表中的所有标题都将继承相同的绿色字体颜色。

   您还可以雇用 交互样式配置 通过从收藏品项目内的颜色和图像字段中提取颜色和背景图像来获取收藏品列表。

   

   收藏列表的结构组成

   

   集合列表的包装器

   默认情况下，Collection 列表包装器包括 收藏列表 和 无效状态。如果激活了分页功能，它还包括 分页 容器。您可以选择通过复制包装器来插入其他分页容器。

   藏品清单

   这 集合列表包装器 包含 Collection 列表中的 Collection 项目。无法向此包装器添加其他元素。

   集合内的元素

   这 收藏品 存放您集成到 Collection 列表中的特定内容。此处添加的任何元素都将分发到列表中的所有项目。这些元素保持静态，直到链接到 Collection 字段或启用条件可见性特征。这些修正会将它们转换为动态元素。动态元素在导航器中以紫色图标标记。

   

   无效状态

   这 空的 如果列表中没有要展示的项目，status 将替换 Collection 列表。默认情况下，它会显示灰色背景以及一个文本块，说明“未找到项目”。您可以修改样式并增加或替换元素以制作个性化的空白状态。

   分页

   分页由两个链接块组成： 事先的 按钮和 随后的 按钮。每个按钮都可以个性化和设计。深入了解分页收藏列表。

   配置集合列表参数

   您可以通过收藏夹列表设置来调节收藏夹列表的显示内容和布局。要访问收藏夹列表设置：

   1. 选择 集合列表包装器 或者 收藏列表 在工作区中
   2. 导航至 元素设置面板

   

   收藏

   在这里，您可以指定要将哪个集合与您的集合列表配对。在选择其他集合链接到集合列表之前，请确保集合列表中的任何元素目前均未链接到集合。

   用户界面条件

   此功能可让您在 项目 条件和 空白 条件来编辑收藏夹列表的两种状态。

   请记住，调整此功能不会 建立 实时网站上收藏列表的状态。收藏列表的真实状态由其项目决定。 空白 仅当收藏夹中没有项目或项目被过滤掉时，才会显示状态。了解有关过滤收藏夹列表的更多信息。

   设计

   您可以将 Collection 列表保持在垂直堆栈中，也可以将布局更改为列。或者，您可以为 Collection 列表实现网格设计以形成动态网格。在这种情况下，确保 Collection 列表 设计 设置仍然配置为 全屏宽度.

   内部提示： 我们建议利用弹性框来为 Collection 列表构建统一高度的结构。每个 Collection 项中的内容可能有所不同，并会导致非基于弹性框的列布局出现错位。

   筛选器

   结合过滤器，您可以仅显示所需的 Collection 项目（即满足一个或多个过滤条件的项目）。获取有关过滤 Collection 列表的更多见解。

   排列顺序

   排列顺序使您能够根据特定字段组织收藏列表。了解有关排列收藏列表的更多信息。

   项目分页

   您可以对收藏列表进行分页，以在每页中显示一定数量的项目。深入了解对收藏列表进行分页的详细信息。

   展示商品上限

   此功能允许您指定收藏列表中显示的项目数以及哪个项目启动收藏列表。例如，您可以从项目 5 开始列表并仅显示 3 个项目。因此，您的列表将显示项目 5、6 和 7。了解有关限制收藏项目的更多信息。

   附加信息： 除非启用分页，否则每个收藏列表的最大上限为 100 个项目，每页最多 20 个收藏列表。了解如何使用分页显示收藏列表中的 100 个以上项目。

   集合列表中的组件

   您可以选择在 Collection 列表项中插入或生成组件。随后，您可以将 Collection 字段链接到组件属性并在组件中使用动态数据。进一步了解如何在 Collection 列表中使用组件。