回到所有的课程
课程库

收藏列表

使用集合列表可将集合的动态内容添加到站点。

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

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

在进入集合列表之前,请在我们的其他课程中了解更多关于CMS和CMS集合的知识:

在这节课中,你将学到:

  1. 如何添加集合列表
  2. 如何将集合列表连接到集合
  3. 如何设计收藏清单
  4. Collection列表的剖析
  5. 如何配置集合列表设置

如何添加集合列表

只要有一个或多个带有集合项的集合,就可以将集合列表添加到站点中的任何静态页面或集合页面。添加一个Collection列表。

  1. 打开添加面板
  2. 单击并拖动收藏列表到你的网站页面上

还可以使用添加集合列表快速的找到命令+E(在Mac上)或控制+E(在Windows上)。

集合列表图标缩略图

如何将集合列表连接到集合

集合列表在连接到集合之前是无用的。将集合列表连接到集合:

  1. 双击收藏列表打开集合列表设置
  2. 选择您想要的集合(例如,作者、博客文章、客户端等)
所选集合项的源下拉菜单。有6个CMS集合,没有一个作为源。

如何设计收藏清单

将集合连接到集合列表后,集合列表将将该集合中的所有项显示为空块。您将能够向Collection列表中添加元素,并将这些元素连接到Collection字段。然后,这些元素将自动填充来自Collection的数据。

一个包含3个收集项的默认收集列表示例。

添加静态和动态元素

将元素添加到空Collection列表块中的一个时,该元素将在每个Collection列表块中重复。这被称为“静态”内容——不来自集合的内容。

集合列表标题元素的元素设置模态窗口。

当您将元素连接到Collection字段时,它将自动用每个Collection项的内容替换元素的默认内容(例如,标题元素中的单词“Heading”)。它成为“动态”内容,因为内容来自CMS集合。

静态元素在画布上有蓝色的轮廓,而动态元素——数据来自CMS的元素——有紫色的轮廓。

将元素连接到集合字段

您可以将静态元素连接到Collection字段,以动态更新该元素的内容。将一个元素连接到Collection字段:

  1. 添加面板
  2. 添加一个元素(如标题、段落等)
  3. 选择Collection列表中的元素
  4. 元素设置
  5. 勾选标记为“Get”的复选框文本博客文章(字段类型和集合名称可能根据您所选择的元素和集合而不同)
  6. 打开选择字段下拉
  7. 选择收藏领域您想从
元素设置模式窗口中的“选择字段”下拉菜单,显示了5个字段选项。

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

风格动态元素

当您向Collection列表(静态或动态)中的任何元素添加样式时,将跨该Collection列表中的所有Collection项应用样式。例如,如果将标题连接到Collection字段并将标题样式设置为绿色字体颜色,则该Collection列表中的所有标题都将使用相同的绿色字体颜色。

你也可以申请动态样式设置通过从“集合”项中的颜色和图像字段中提取颜色和背景图像,将其添加到“集合”列表中。

元素设置面板中的动态样式设置部分。

Collection列表的剖析

Navigator显示Collection列表内部的层。

集合列表包装器

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

收藏列表

集合列表包装器包含集合列表的集合项。不能向包装器中添加其他元素。

收集项目

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

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

空的状态

state在没有要显示的项时替换集合列表。默认情况下,它有一个灰色背景,并包含一个文本块,上面写着“未找到项目”。您可以更改样式并替换或添加更多元素来创建自定义空状态。

分页

分页包含两个链接块以前的按钮和下一个按钮。每一个都可以定制样式。了解有关分页集合列表的详细信息

如何配置集合列表设置

可以在集合列表设置中控制显示在集合列表中的内容和集合列表的布局。访问集合列表设置:

  1. 选择集合列表包装器收藏列表在画布上
  2. 元素设置面板
元素设置面板中的集合列表设置部分。

集合

在这里,您可以选择要将哪个集合连接到集合列表。在选择不同的集合以连接到集合列表之前,必须确保集合列表中的所有元素当前都没有连接到集合。

UI状态

此设置允许您在项目国家与国家状态,以便您可以编辑Collection列表的两个状态。

请注意,更改此设置并不需要活动站点上的Collection列表的状态。集合列表的实际状态由其项决定。的state仅在集合中没有项或已过滤项时显示。了解有关筛选集合列表的详细信息

布局

可以保持集合列表垂直堆叠,也可以将布局更改为列,类似于列元素.你也可以申请网格到Collection列表中创建动态网格。在本例中,请确保离开Collection列表布局设置设置为全宽

专家提示:我们建议使用flexbox建立等高布局用于收集列表。每个集合项中的内容可能不同,并导致非基于flexbox的列布局不对齐。

过滤器

添加筛选器可以让您只显示所需的集合项—匹配一个或多个筛选条件的集合项。了解有关筛选集合列表的详细信息

排序顺序

排序顺序允许您基于特定字段对集合列表进行排序。了解关于集合列表排序的更多信息

随意翻阅物品

您可以对集合列表进行分页,以显示特定数量的每页的项目。了解有关分页集合列表的详细信息

限制物品

此选项允许您定义在集合列表中显示多少项,以及哪个项启动集合列表。例如,你可以有你的列表开始项目5和显示只有3件。然后,您的列表将显示项目5、6和7。了解有关限制收集项的详细信息

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