使用集合列表可将集合的动态内容添加到站点。
集合列表是使用集合中的内容进行设计和开发的两种主要方法之一。下面是我们为一组团队成员创建的样本集合。从项目中的任何页面,我们都可以从Elements面板访问Collection List,并将其直接拖到Canvas上。
我们希望快速介绍集合列表的三个方面:基本布局、绑定到集合(这非常强大)和集合列表设置。
我们来做基本布局。
我们拖拽集合列表并将其放到画布上。我们有一堆紫色的空盒子。虽然我们才刚刚开始,但我们可以从下拉菜单中选择我们的集合,我们可以随意选择布局选项。
不管我们选择什么布局,如果我们去预览,我们会看到当前的设计:实际上什么都没有。让我们返回预览。这里什么都没有,因为我们没有引用任何内容。
由于集合列表允许我们访问集合中的任何内容,所以可以将一个元素放到集合列表中的任何集合项中。让我们把这个标题设为H3,但它可以是任何文本元素。
我们可以将该元素绑定到集合中的特定字段。这只是从我们的团队成员那里获取名字。就是这样。我们正在查看内容——我们对集合列表中的每个项目都有一个H3。
让我们继续。我们可以拖入一个图像元素。当我们把这些元素放进去时,它们是静态的。它们是静态的,直到我们将它们绑定到集合中的某个东西。什么时候呢?集合列表中的每个项都引用相关字段。
我们所做的只是拖入普通元素(静态元素)并将它们绑定到集合中的特定字段。
当然,我们可以为其中任何一个添加样式。当我们在这里进行调整时,我们可以看到集合列表中的更改是同步完成的。也就是说:更改一个集合项中的任何内容都会影响其他集合项。这是设计好的。如果我们拖入一个div块来包装和样式每个项目的内容?这些变化发生在我们所有的收藏品中。
使用类仍然有一个主要的优势——那就是:虽然在这个集合列表中所有事情都是同步完成的,但是我们可能希望在整个项目的其他页面上有其他集合列表。当然,课程将使我们能够在项目范围内进行风格更改。
我们在这里加速了(相当多),所以您不必坐着看完每一帧,但这里的想法是,您可以将动态内容绑定到集合列表中的静态元素。
这是绑定。让我们看看我们的设置。
我们可以选择集合列表包装器元素(或集合列表元素)并随时调整布局。
我们的集合列表设置还允许我们添加过滤器。过滤器使我们能够只显示我们想要的集合项—符合一个或多个标准的集合项。
我们还可以选择与排序顺序相关的各种选项——我们希望集合项如何排序。可能是根据收集项的更新时间:从最新到最老。
如果我们回到CMS,回到我们的集合?然后我们进入其中一件物品进行改变?当然,我们知道这将影响该项目的更新时间。
这意味着回到我们的集合列表中,我们将看到Dale首先显示出来。我们根据集合列表更新的时间进行排序。从新到老。
我们还可以限制显示的集合项的数量。这将只显示此处指定的项的数量。
所以。收藏列表。我们可以把它们放在任何地方。他们让我们可以查看任何藏品。我们可以选择布局,可以将集合内容绑定到列表中的元素,当然,还可以配置设置,以告诉集合列表如何对设计中的项进行排序和显示。
集合列表是添加和设计的两种方法之一动态内容从CMS集合或电子商务集合(另一种方法是使用收藏页面).您可以将集合列表添加到站点上的任何类型的页面。
在进入集合列表之前,请在我们的其他课程中了解更多关于CMS和CMS集合的知识:
在这节课中,你将学到:
只要有一个或多个带有集合项的集合,就可以将集合列表添加到站点中的任何静态页面或集合页面。添加一个Collection列表。
还可以使用添加集合列表快速的找到:命令+E(在Mac上)或控制+E(在Windows上)。
集合列表在连接到集合之前是无用的。将集合列表连接到集合:
将集合连接到集合列表后,集合列表将将该集合中的所有项显示为空块。您将能够向Collection列表中添加元素,并将这些元素连接到Collection字段。然后,这些元素将自动填充来自Collection的数据。
将元素添加到空Collection列表块中的一个时,该元素将在每个Collection列表块中重复。这被称为“静态”内容——不来自集合的内容。
当您将元素连接到Collection字段时,它将自动用每个Collection项的内容替换元素的默认内容(例如,标题元素中的单词“Heading”)。它成为“动态”内容,因为内容来自CMS集合。
静态元素在画布上有蓝色的轮廓,而动态元素——数据来自CMS的元素——有紫色的轮廓。
您可以将静态元素连接到Collection字段,以动态更新该元素的内容。将一个元素连接到Collection字段:
了解有关如何将每个Collection字段类型连接到相关元素的更多信息.
当您向Collection列表(静态或动态)中的任何元素添加样式时,将跨该Collection列表中的所有Collection项应用样式。例如,如果将标题连接到Collection字段并将标题样式设置为绿色字体颜色,则该Collection列表中的所有标题都将使用相同的绿色字体颜色。
你也可以申请动态样式设置通过从“集合”项中的颜色和图像字段中提取颜色和背景图像,将其添加到“集合”列表中。
默认情况下,集合列表包装器包含收藏列表和空的状态.如果启用了分页,则它还包含分页包装。可以通过复制包装器添加多个分页包装器。
的集合列表包装器包含集合列表的集合项。不能向包装器中添加其他元素。
的收集项目包含您添加到集合列表中的实际内容。在这里添加的任何元素都将填充到列表中的所有项中。在将这些元素连接到Collection字段或应用它们之前,它们都是静态的有条件的可见性给他们。这些修改将把它们转换为动态元素。控件中的紫色图标表示动态元素导航器.
的空state在没有要显示的项时替换集合列表。默认情况下,它有一个灰色背景,并包含一个文本块,上面写着“未找到项目”。您可以更改样式并替换或添加更多元素来创建自定义空状态。
分页包含两个链接块以前的按钮和下一个按钮。每一个都可以定制样式。了解有关分页集合列表的详细信息.
可以在集合列表设置中控制显示在集合列表中的内容和集合列表的布局。访问集合列表设置:
在这里,您可以选择要将哪个集合连接到集合列表。在选择不同的集合以连接到集合列表之前,必须确保集合列表中的所有元素当前都没有连接到集合。
此设置允许您在项目国家与国家空状态,以便您可以编辑Collection列表的两个状态。
请注意,更改此设置并不需要集活动站点上的Collection列表的状态。集合列表的实际状态由其项决定。的空state仅在集合中没有项或已过滤项时显示。了解有关筛选集合列表的详细信息.
可以保持集合列表垂直堆叠,也可以将布局更改为列,类似于列元素.你也可以申请网格到Collection列表中创建动态网格。在本例中,请确保离开Collection列表布局设置设置为全宽.
添加筛选器可以让您只显示所需的集合项—匹配一个或多个筛选条件的集合项。了解有关筛选集合列表的详细信息.
排序顺序允许您基于特定字段对集合列表进行排序。了解关于集合列表排序的更多信息.
您可以对集合列表进行分页,以显示特定数量的每页的项目。了解有关分页集合列表的详细信息.
此选项允许您定义在集合列表中显示多少项,以及哪个项启动集合列表。例如,你可以有你的列表开始项目5和显示只有3件。然后,您的列表将显示项目5、6和7。了解有关限制收集项的详细信息.
需要知道:除非启用分页,否则每个集合列表的最大限制是100项,每个页面的最大限制是20个集合列表。了解如何使用分页在“集合”列表中显示100多个项目.