塔可钟是美味的。任何人说,否则客观是错误的。但这里有一个塔可钟(Taco Bell)在我们的地点列表区域。它只是一个集合(一个简单的数据库在Webflow)位置的列表。这里为我们的第二个集合……我们有一些特殊的属性为每个位置。营业到很晚,那里时,他们是否提供早餐,当然,如果你能让肯德基在同一位置。两个集合,两个数据库是完全分离的…现在。在接下来的几分钟,我们要把这些和列出所有的位置——但它将包括信息——特色每个位置都有…我们会做所有而无需编写一行代码。
让我们做这四部分:我们将通过集合(我们来看看每个数据库我们处理的顶层视图),我们将创建一个多引用字段每个塔可钟(Taco Bell)位置列表是否营业到很晚,它有一个肯德基……我们将实际的集合列表将会做所有的重担,所以我们不需要重新设计它为每一个位置,我们会使用一个嵌套列表集合添加特性,每一个塔可钟(Taco Bell)的列表。
让我们开始集合。正如我们所知,我们这里有两个数据库。让我们进入位置……并打开其中的一个。我们这里有几件事。地址(这就是我们想要显示在卡)。我们有一个链接到谷歌地图的方向,我们有一个存储页面的链接tacobell.com。我们有几个小时他们开放。这只是一个表中的数据。事实上,你可以从电子表格导入使用CSV,或者创建一个新的塔可钟(Taco Bell)位置按新塔可钟(Taco Bell)位置。
让我们看看第二个集合。这只是一个小型数据库,只是有两个字段,是重要的:实际功能的名称(如营业到很晚),和徽章设计为每个特性——只是一个小图标。
我们的目标是什么?我们想把我们的基本设计……我们要确保设计是应用于所有这些位置。然后我们要确保每个位置列出它的特性。
要做到这一点,我们需要连接两个集合。这是第2部分。让我们回到塔可钟的位置……因为我们希望能够为每个位置参考多个特性。在我们的设置?我们可以去添加一个字段…引用多个特性。多个引用(或多引用)。这意味着,所有吗?这里是我们可以联系……的特性。 In fact, that's what we can name this field...let's just call it features.
这是最好的一部分。实际上,为数不多的。让我们确保字段添加…当然……我们一定要将更改保存到集合中。但在这里:
我们可以去任何地方,就像这样……我们可以添加该塔可钟(Taco Bell)的特性。这个有一个肯德基,一个开车经过,营业到很晚。让我们拯救。(Westmoor)
维尔的位置在海湾的另一边吗?那个也是营业到很晚……但它也有早餐。
现在。我们可以将功能添加到所有的地点,我们所做的其他屏幕所以你不必坐在通过将其添加到每一个塔可钟(Taco Bell)。
但当我们做(我们总是可以回到后),让我们继续# 3。这就是我们要带一个,简单的设计(我们从头开始建造这个使用CSS Webflow网格),我们将把它变成一个设计,自动填充每一个位置。
所以。让我们看看层级导航器在这里我们可以看到,所有放置的地方。这只是一张卡片,里面有一些东西,只是现在占位符。
和我们可以列出所有的地点集合?…是使用一组列表。看这个。我们进入添加面板。我们会抓住一组列表。我们会很刻意的地方到顶层容器(这只是一个矩形,一切)。现在坐在正上方的基本设计(基本卡我们已经取得了)。
和我们要做的吗?是链接列表集合我们的塔可钟(Taco Bell)的位置。是那么容易链接收藏列表我们塔可钟(Taco Bell)的位置。
注意每个位置现在出现(他们是空白的…但是他们表示在小占位符)。让我们打开东西多一点(让我们更深的导航器)。和这些占位符?这是一个收集物品。每个条目表示一个塔可钟(Taco Bell)的位置。
但看看会发生什么,如果我们只是拖……如果我们此举基本卡(设计)到任何项目的集合。
突然我们卡成倍增加。很多,但是没关系。这就是我们想做的事。因为到底发生了什么…是,现在设计应用于每一个塔可钟(Taco Bell)的位置。让我们证明。
我们可以在这里获取地址占位符……我们可以联系,我们可以得到的文本位置的地址。就是这样。每张卡片并不是相同的。链接(这是把位置从我们收集每一个塔可钟(Taco Bell)。让我们保持这样做。我们不仅可以做同样的文本,但我们可以做同样的链接。我们可以联系我们的方向来谷歌地图。我们可以去商店页面的链接(这是唯一的URL链接到每一个塔可钟(Taco Bell)……)。
最后,让我们更新的时间。我们可以做同样的事…我们可以链接到小时的操作。
在短短30秒,我们可以联系
(Grimur,变焦)喔…41秒。
(McGuire) Grimur我们记录。
[Grimur]我能看到一切。
(McGuire)你在变焦。
[Grimur]安全距离。
(McGuire)距离自己更多。
(Grimur)再见。
我们把收集(塔可钟(Taco Bell)位置的数据库)和链接到我们的设计。现在,设计适用于每一个塔可钟(Taco Bell)。一个完整的列表。
所以。我们如何显示徽章营业到很晚吗?在我们的最后一个步骤中,我们将使用一个嵌套列表集合。它实际上是非常简单的。我们有一个收藏列表(列表我们所有的塔可钟里面有我们的设计)……我们希望另一个列表里面(集合列表列出的位置特性……每一个塔可钟(Taco Bell)的徽章。
所以我们做什么?是抓住另一个集合列表…我们拖收集列表…在我们第一次集合。我们会把它集合中的项目(因为我们希望它出现在每一个塔可钟(Taco Bell)位置)。当我们做什么?和感觉这应该是更复杂……但我们只是链接(我们将新的子集合列表)……位置特性。
还有,每个位置的特性列表。现在我们要做的?让我们打开它在Navigator所以我们可以很具体,我们把事情……我们会去添加面板,抓一个文本块。我们将使用这个文本来显示这样的词“汽车餐厅”或“肯德基”。And we do the same thing here. Just link it to the field (the name of the location features).
我们可以在另一个风格,但我们有一个最后增加很快。我们希望每个特性的徽章。所以让我们去添加一个图像元素——我们只是抓住一个图像元素把旁边,正上方的文本。我们可以马上调整,我们在这里拿帆布上的角落并拖动调整……也许就像30像素(稍后我们可以改变)。
我们可以选择父元素(收集项目本身)和使用的魔力flexbox(也许有些一厢情愿)使一切相同的中心点。(对齐看起来不错…让我们调整文本大小)。我们将使用接近13日或12…我们可以改变颜色,现在有点黑……让我们改变它更严厉的……也许一个灰色。
每当我们想要什么?我们可以链接的图片,我们可以链接到那徽章设计。有点紧,让我们添加一些保证金(一些空间的外面图片)……也许10像素…
我们可以做同样的项目集合本身。(再一次,我们可以选择一个不同的人——收藏列表,你可以改变任何一个项目,它会影响到别人。)这一次让我们添加填充…这是内部空间…每个集合项目(我们压低选项在Windows和macOS或alt拖动调整双方一次。)
如果我们滚动页面?我们看到每个位置都是自动填充信息从我们的塔可钟(Taco Bell)地点集合。(有一个单独的卡片。)因为我们嵌套另一个集合列表引用位置的特性,每一个塔可钟(Taco Bell)显示营业到很晚的时候,有那里时,提供的早餐,和有一个内置的肯德基。
所以。我们回顾了我们的集合的结构(我们的数据库)——顺便说一句,您可以创建集合等任何博客文章、或团队成员,或约翰·威廉姆斯专辑。
我们添加了一个多引用字段塔可钟(Taco Bell)位置,这让我们参考多个项目(多个特性对于每一个塔可钟(Taco Bell)。我们做了一个集合列表将一切简单的设计,让我们联系信息是与每一个塔可钟(Taco Bell)。最后,我们添加了一个集合列表在另一个父集合(就把它里面的任何收集物品在父)……所以我们可以展示每个位置都有哪些功能。
这是为塔可钟(Taco Bell)创造神奇的信息卡片的位置……使用集合和集合列表…Webflow。
