20分钟。基石

的帖子

在本文中，我们将向您介绍各种Posts元素以及如何使用它们。

介绍
共性
最小的
列表
瓷砖
杂志
演示

基石包括少数帖子的元素它们使用了一些在同一发布周期中出现的新功能来原生构建:

电影＆动态内容:一个强大的新功能，允许用户在你的WordPress安装和过滤信息”循环”通过返回的数据列表来输出一组统一的元素。然后，我们可以使用动态内容来访问Looper中的特定数据点(这在Builders中已经有一段时间了，但与Loopers一起使用它是一个新概念)。
元素的条件:有条件地输出内容是设计循环的一个重要方面，它可以很好地处理可变数据(例如，你可能需要两组输出，这取决于是否设置了特色图像)。
影响我们究竟如何让所有这些信息变得有趣和令人兴奋?通过效果和子元素交互链接给它增添一些活力。

我们强烈建议您在阅读本文之前先阅读这些参考资料，因为它们将为理解我们在这里将要讨论的一些概念提供必要188bet网投的基础。

本文的目的是介绍本次更新中包含的Posts Element变体，并解释它们的结构方式，以便您可以自信地根据需要进行调整，或将它们作为自己设计思想的起点。我们将只讨论在每个Element的标记中注意的设置。除了这篇文章，我们鼓励您查看我们的在YouTube上发布元素攻略．

介绍

关于所有这些Posts元素，需要记住的一个重要信息是:它们是完全本地到我们的构建器，这意味着它们是由你已经知道的元素构建的，并在你的设计中一直使用(例如，行/列，图像，标题，图标等)。可以将Posts元素看作预制由许多较小的组成部分组成的设计。

这意味着不拥有一个元素来显示你最近的帖子，这些帖子的选项有限，可能永远不会真正给你想要的东西，这些帖子元素都是高度可定制的，而且非常容易调整。例如，如果你拖进帖子(最小)元素，发现你不喜欢的标题文字变成橙色悬停，你可以直接点击这段文字- - - - - -因为它是使用标题元素构建的- - - - - -要检查它，调整悬停颜色，就完成了!

此外，这意味着如果这些预制元素都不适合您的设置，如果有一些特定的东西，您很可能可以根据您的严格规范自行创建它。

共性

每个元素都是使用打环的供应商在它们最顶层的元素上，该元素被设置为最近的帖子有一个习俗数设置:

该设置将按日期降序拉入您的最新帖子(最近的帖子元素通常是如何工作的)。这里需要注意的一件重要的事情是，建议在Looper Provider上为所需的确切帖子数量指定一个自定义计数，因为它将限制您的查询大小并有助于提高性能。如果您希望调整这些元素中的任何一个的输出计数，可以在这里执行。

方法触发实际的循环输出电影消费设置为所有(指的是Provider提供的所有post)在最顶层元素的第一个子元素上找到:

请记住，从Looper访问的所有数据都是通过使用完成的动态内容。对于文本，这可能和使用一样简单{{dc:职位:标题}}要访问一个帖子的标题，你也可以使用这些模板字符串与其他文本，就像我们所做的特色图片Alt文本，这是统一设置为“{{dc:post:title}}”的特色图像(当然，如果需要的话，也可以修改)。此外，通过单击图像控件中的动态内容图标并进行相应设置，可以动态地提取特色图像。

Posts元素之间的另一个共享特性是帖子在提纲中有其标签设置为<一>与{{dc:职位:永久链接}}作为链接值，这样点击元素上的任何地方都将带用户进入内容。也就是说，你可以根据自己的需要进行调整，并将链接放在你自己的变体中的任何(或多个)元素上。

任何其他布局元素在一个个体”帖子”以后会贴上标签吗标签他们已经设定好了。例如，一个元素的标签设置为<图>会被标记”数字”在大纲中，文章< >会被标记”文章中,”等等。如果你愿意，你可以调整大纲中的这些标签。

最小的

的帖子(最小)Element是我们采用的更传统的近期帖子设计，外观干净简单，适用于任何网站:

的帖子

一个行元素使用以下响应式布局:

这个单位22他们在每个断点上设置为自定义值允许我们实现”auto-responsive”布局，我们已经讨论过YouTube频道．使用这种方法是因为我们永远无法确定这个元素可能被放置在哪里(即宽的主内容vs窄的边栏)。

除此之外，垂直对齐控件设置为拉伸，允许我们使用flexbox定位，以确保我们的列总是相等的高度。

帖子

一个列元素与它的Flexbox控件已启用并设置为列布局，使里面的内容垂直布局:

此外,链接子交互在邮报上启用影响对照组，三个目标都打开。这允许Post在悬停时链接所有子颜色、粒子和效果交互。

数字

一个Div元素里面有文章的特色图片。这里需要注意的一个更重要的事情是它的大小设置:

这样做是为了确保无论图像的物理大小如何，图像高度始终是一致的。如果您希望图像显示其自然尺寸，可以将这些值重置为默认状态。

里面有一个图像元素与它的宽度而且高度设置为100％这样它就完全填满了父节点。对象符合设置为封面这样它就不会被挤压因为我们强迫它的维度来自父节点。

最后，这个元素上有一个条件，这样它只在设置了特色图像时才会输出。这保证了没有空< img / >标记是输出的，并且允许文章标记，以根据设置方式展开和填充可用空间。由于这种情况，a保证金底部value在这个元素上设置，以适当地分隔它下面的内容。

文章

一个Div元素里面有邮报的主要内容。这里要注意的主要事情是Flex使用价值自定义输出:

这可能是这里最重要的控制，因为Flex成长的1确保该元素将填满列中所有可用的剩余空间，然后Flex收缩的1允许它在必要时收缩。接下来,Flexbox为该元素启用control group，并设置为Column布局以垂直定向内容:

在这个Element中，我们有输出文章标题、摘录和作者的content。摘录的长度可以通过文本元素中的动态内容字符串进行调整保证金底部的汽车当有空间时，将作者输出推到底部。这使得作者标记总是被固定在文章的下角，并帮助更清晰地构建它的维度。

列表

的的职位(列表)Element是最近帖子设计的一个变体，旨在用于狭窄的空间(考虑小列，侧边栏等):

默认情况下，此元素将跨越其所在容器的整个宽度，但我们建议设置最大宽度如果使用在更广阔的空间上。

帖子

一个列元素与它的Flexbox控件已启用并设置为行不允许换行的布局，以使里面的内容水平布局:

此外,链接子交互在邮报上启用影响对照组，三个目标都打开。这允许Post在悬停时链接所有子颜色、粒子和效果交互。

数字

一个Div元素该图标包含了该帖子的特色图像，如果没有的话，则包含一个替代图标。这里需要注意的一件重要的事情是如何设置Posts元素的大小:

此外,溢出设置为隐藏的所以边界半径可适当切断内部图像如果设置。这个元素也有它的Flexbox启用定位，以便内部的内容可以垂直和水平居中。

里面的两个元素是一个图像用于存放特征图像(如果已设置)，或者图标如果没有设置特征图像。形象有它的宽度而且高度设置为100％完全填充父节点。对象符合设置为封面这样它就不会被挤压因为我们强迫它的维度来自父节点。图标显示在图像的位置是为了展示我们如何使用一个有用的替代空间来代替我们的主要内容(在这种情况下，箭头有助于加强点击这篇文章将转到另一个页面)。

文章

唯一的标题元素在这里，在主文本中输出文章的标题，在副标题字段中输出文章的发布日期。

瓷砖

的帖子(瓷砖)Element是一种变体，具有非常干净的布局，主要关注每篇文章的特色图像:

这个Posts元素的标记相对简单，可以从下面的Builders的Outline视图中看到。也就是说，这里有一些细微差别需要注意，特别是关于特色图像是如何设置的。

的帖子

一个行元素使用以下响应式布局:

这个单位28他们在每个断点上设置为自定义值允许我们实现”auto-responsive”布局，我们已经讨论过YouTube频道．使用这种方法是因为我们永远无法确定这个元素可能被放置在哪里(即宽的主内容vs窄的边栏)。

除此之外，垂直对齐控件设置为拉伸，允许我们使用flexbox定位，以确保我们的列总是相等的高度。此外,成长选择下布局选项启用，这允许列在可用时跨越所有可用的水平空间(如上图中第三篇文章的示例截图所示)。

帖子

一个列元素有一件事要特别注意，那就是如何高度被用于设置:

这样做是为了确保无论图像的物理大小如何，图像高度始终是一致的。您可以根据自己的需要调整这些值，以便更好地配合您的设计。设置控件组下还有z - index控件，该控件被设置为1帮助我们实现我们想要的外观与我们的特色图像稍后。

此外,链接子交互在邮报上启用影响对照组，三个目标都打开。这允许Post在悬停时链接所有子颜色、粒子和效果交互。

文章

一个Div元素与它的宽度而且高度设置为100％和它的Flexbox控件启用列将内容垂直分开的布局:

这也是我们设置”覆盖的颜色”在特征图像的顶部，这样我们就得到了褪色效果。如果您希望更新文本内容后面的基本和交互背景颜色，请在这里执行。

这个元素中的文本内容是我们在顶部格式化的发布日期，下面是文章的标题。文章标题有利润最高设置为汽车将两段文字分开，并将标题压在底部。最后需要注意的是位置设置为静态，重要的是要意识到特色图像是如何工作的。

数字

这是在Posts元素中输出特色图像的比较独特的设置之一，所以我们想花一点时间来分解它。

本质上，这是aDiv元素与一个z - index的－1，当它与我们的价值相匹配时1上面的帖子允许我们把这个内容推到我们文字内容的后面，而不是后面整个页面的内容(这将使它从视图中消失)。此外,其位置设置为绝对将所有位置值设置为0 px让图像延伸到邮政的边缘:

因此，您将不能直接在实时预览中检查该元素，但您仍然可以通过Outline窗格访问它。我们使用这个标记来输出图像而不是背景图像的原因有两个:

我们需要在这个元素上使用条件逻辑没有输出如果一个特色图像没有设置。
为了实现悬停时的缩放效果，我们需要有一个实际的元素应用效果到建造者内部。

在这里你也会发现交互的影响规模(1.05)为变换控件，该控件由前面提到的Post触发。最后，在这个元素中我们有一个图像与它的宽度而且高度设置为100％而且对象符合设置为封面就像我们之前的例子一样。

杂志

的帖子(杂志)Element是一种变体，它结合了本文前面示例的各个方面，并利用多个Looper Consumers以多种方式对其内容进行样式化:

这个Posts元素的标记比前面的例子稍微复杂一些，但这主要是由于使用了多个Looper Consumers，并且必须为Posts设置这两组标记:

的帖子

一个行元素使用以下响应式布局:

我们再一次雇佣了我们的”auto-responsive”布局，这将在我们的YouTube频道．这个值38 rem 20眼动设置为每个断点上的自定义值，并与成长复选框被选中，这让我们获得了一些非常酷的结果。

实际上，这表示第一列(”主要职位”)不应回应跌至下方38快速眼动如果它可以换行，而第二列(”更多的文章”)不应往下20眼动如果它能突破到一条新的线。这意味着即使您将其放入较小的侧栏区域，布局也会自动折叠为单列外观，并且在大多数情况下几乎可以在任何地方工作。

要调整两列之间的比例，相应地增加或减少每个值，您会发现布局可以很容易地调整，而不必借助于百分比，同时仍然以更自然的方式完全响应。

主要职位

一个列元素,这本质上是一个结构略有改变的版本的帖子中发现Posts (Tiles)元素．

演示

要查看Posts元素变化的现场演示，请参见下面:

看到不准确的东西了吗?让我们知道