回到所有的课程
课程库

收藏列表

集合列表是从集合中添加和设计动态内容的两种方法之一。

这个视频的特点是一个旧的UI。更新版本即将发布!
克隆这个项目

集合列表是添加和设计的两种方法之一动态内容从CMS集合或电子商务集合。可以将集合列表添加到任何类型的页面。添加动态内容的另一种方法是with收藏页面

先决条件
在这节课中
  1. 添加集合列表
  2. 将集合列表连接到集合
  3. 设计一个收藏列表
  4. 了解集合列表的结构
  5. 配置集合列表设置

添加集合列表

只要您有一个或多个带有项的集合,您就可以将集合列表添加到项目中的任何静态页面或集合页面。你可以简单地拖动收藏列表添加面板或者从快速找到(CMD / CTRL + E)

集合列表图标缩略图

连接到集合

集合列表除非连接到集合,否则是无用的。双击Collection列表以打开Collection列表设置,并从下拉菜单中选择您想要的Collection。

所选集合项的源下拉菜单。有6个CMS集合,没有一个作为源。

设计一个收藏列表

一旦选择了集合,集合列表将把该集合中的所有项显示为空块。您将能够向列表中添加元素,并且在将其连接到Collection字段后,自动为每个Collection项获得正确的数据。

6篇博客文章集合项目的集合列表。有2列,每列3行。

添加静态和动态元素

当您将一个元素放入一个空集合项块中时,该项将对该集合中的所有项重复。这被称为“静态”内容,或不来自集合的内容。

6个H3标题分别在2列3行中输入。

现在,当您将该元素连接到Collection字段时,它将自动用来自每个Collection项的内容替换元素中的内容。它成为“动态”内容,因为内容来自CMS。

将元素连接到集合字段

您可以将静态元素连接到Collection字段并动态更新该元素的内容。静态元素的轮廓是蓝色的,而动态元素(或拥有来自CMS的数据的元素)的轮廓是蓝色的紫色的轮廓在画布上。将一个元素连接到Collection字段:

  1. 选择Collection列表中的元素
  2. 打开元素设置
  3. 勾选标有“获取
  4. 打开下拉菜单并选择要从中获取内容的集合字段
选择名称字段作为标题的源。H3标题将从Team members收集列表中收集信息。

了解更多:如何将每个Collection字段类型连接到相关元素

风格动态元素

就像向集合列表中添加静态元素将重复这些项一样,向任何元素(静态或动态)添加样式将跨该列表中的所有collection项应用样式。例如,如果我们将一个标题连接到一个字段,然后将该标题设置为绿色文本颜色,那么该列表中的所有项目将具有不同的内容,但相同的绿色样式。

您可以应用动态风格设置通过从颜色和图像字段中提取颜色和背景图像。

2列和3行团队成员卡,包括他们的姓名,职业和描述。

了解Collection列表的结构

导航器显示集合列表内部的层。
集合包装列表

默认情况下,集合列表包装器包含以下组件收藏列表空的状态.如果启用了分页,则它还包含分页包装。通过复制包装器,可以添加多个分页包装器。

收藏列表

集合列表组件包含收集物品的列表。不能向此组件添加其他元素。

收集项目

集合项组件包含添加到集合列表中的实际内容。在这里删除的任何项都将填充列表中的所有项。这些元素在连接到Collection字段之前是静态的有条件的可见性适用于他们。这将把它们转换为动态元素。在导航器,动态元素用紫色图标表示。

集合项的解剖结构,该集合项由一个div块组成,该div块包含一个图像、一个h3、文本块和一个段落文本块。
空的状态

当列表中没有要显示的项时,空状态将替换Collection列表。默认情况下,它具有灰色背景并包含一个文本块。您可以更改样式并替换或添加更多元素来创建自定义空状态。

分页

分页组件包含两个Link块:上一个按钮和下一个按钮。这些元素都可以设置样式和自定义,但是不能向此包装器添加其他元素。

了解更多:方法收集名单

配置集合列表设置

Collection列表有自己的设置来控制要显示的内容。您还可以通过多种方式更改列表的布局。您可以通过选择集合包装列表收藏列表元素,按回车键或按D键打开元素设置面板

来自团队成员的2页收集列表,每页3个项目。从2开始,它的极限是9。
集合

在这里,您可以选择要将哪个集合连接到集合列表。只有当列表中的所有元素都没有连接到当前连接的集合的字段时,才能更改连接到集合列表的集合。

UI状态

此设置允许您在Items视图和Empty状态视图之间切换,以便您可以编辑集合列表的状态。

此设置不会设置活动站点上的Collection列表的状态。集合列表的实际状态由其项决定。空状态仅在集合中没有项或被过滤掉时显示。
布局

可以保持列表垂直堆叠,也可以将布局更改为列,类似于列元素

还可以将网格应用到Collection列表以创建动态网格。在这种情况下,请确保将Collection列表设置中的布局设置设置为“list”。

专业技巧
这是建议使用flexbox建立等高布局收藏列表。每个集合项中的内容可能不同,并导致非基于flexbox的列布局不对齐。
过滤器

添加筛选器允许您只显示所需的集合项—匹配从设置中指定的一个或多个标准的集合项。

了解更多:过滤收集名单

排序顺序

排序顺序允许您基于特定字段对集合列表进行排序。

了解更多:对集合进行排序列表

随意翻阅物品

您可以对集合列表进行分页,以显示特定数量的项目/页

了解更多:方法收集名单

限制物品

此选项允许您定义在集合列表中显示多少项以及从哪个项开始列出。例如,你可以有你的列表开始第五项和显示只有3项。这将显示项目5、6和7。

了解更多:限制收集物品

需要知道
除非启用分页,否则每个集合列表的最大限制是100个项,每个页面的最大限制是20个列表。了解如何使用分页在“集合”列表中显示100多个项目
尝试Webflow——它是免费的
Baidu
map