元线

通常情况下，在为文章、产品等做布局时，通常会包含一个元线在设计中，它引用了关于入口的重要信息。这可能包括发布日期(或随后的更新)、作者是谁、评论数量的引用(如果可用)以及正在使用的各种分类法，如类别或标记(以及其他内容)。

虽然Meta Line不需要包含所有这些信息，但你通常会发现它看起来像下面这样:

在这里，我们可以看到一行简单的文本，包含四个重要的信息，每个信息由一个分隔符分隔，以提供一些格式。Meta Line Element是一个快速的起点，它将所有适当的动态内容和Loopers连接起来，使之成为可能，并与一些简单的样式一起使这个模式立即启动和运行，然后您可以从样式或内容的角度根据自己的喜好进行调整。

简介

Meta Line Element是一个“预制”元素，这意味着它是由所有构建器库中的核心元素组成的。它的最高的元素是一个Div元素，与四个孩子(同样使用Div元素组成)用作后续数据的包装器，必要时用作分隔符:

Meta Line的基本Div上需要注意的一个控件是itsFlexbox控件，该控件设置为使用行作为它的方向以及允许内容包装。这确保了每个direct子节点在必要时自动移动到新行。此外，内容已水平对齐到开始和文字的垂直基线,这有助于确保每个子字符的排列更像一个文本字符串。

每个子Div都有自己的Flexbox要使用的控件集行作为方向与包装复选框残疾,这确保了它的直接内容不会中断到单独的行。

日期

让我们开始逐个分解元线元素。在扩展日期子元素在Outline窗格中，您将发现下面的Element结构包含文本元素和a分频器,这也是一个文本元素，只是为了清晰起见重新命名。

元素填充主文本{{dc:职位:publish_date}}动态内容字符串，输出您正在查看的当前资产的发布日期(例如Post, Product等)。里面的分隔器- - - - - -用哪一种方法将发布日期与下一项分开- - - - - -有, /作为它的内容。,是一个HTML实体,它输出一个插入空格，确保放置在那里的whitespeace不会被父进程的Flexbox控件折叠。

作者

元素的Element结构与Date子元素非常相似作者Child的设置方法相同:

元素填充主文本{{dc:作者:display_name}}动态内容字符串，输出用户在他们的WordPress管理配置文件中设置的显示名称。这是最常用的，因为它为用户提供了决定其名称如何得到输出的单独控制，但如果您希望对此有更有限的控制，可以使用{{dc:用户:元}}字符串，它允许您从用户配置文件页面访问其他元信息。分隔者在这里使用, /正如我们在前一节中解释的那样。

评论

的评论孩子是事情开始发生一点点变化的时候。在Outline面板中展开这个元素，你会发现以下结构:

在里面我们可以看到3按钮元素，所有的样式都完全匹配我们之前的子元素的文本元素(即删除所有的填充、背景颜色和阴影，除了复制的排版设置)，以及另一个分隔符，就像我们之前的两个项目一样。每个按钮都使用{{dc:职位:comment_link}}为他们的href将用户带到页面的评论区。

在这里使用3个单独的按钮的原因归结于我们对输出的需要变量内容根据不同的条件。例如，如果没有用户在你的帖子上留下任何评论，通常最好写一些形式的提示，如”请留言评论”而不是”0评论,”因为它更关注与你的网站互动的积极作用，而不是潜在的缺乏活动。这是我们从本文的第一张图中看到的:

然而，一旦用户离开，至少1评论,这时，你可能想要输出一些文本来展示这一点:

最后，如果用户离开了2条或以上评论在您的站点上，您需要从单数更新文本”评论”变成复数”评论,”像这样:

为此，我们使用这3个独立的按钮，每个按钮都有自己独特的主文本字符串和元素条件，以确保它应该在何时显示。的0评论按钮在大纲中有”请留言评论”作为它的主要内容，并在自定义控件选项卡上提供了以下元素条件:

这是条件正在使用表达式这就是比较两个值并返回a真正的或假相应的值。这里有趣的是我们可以在等式的任何一边使用动态内容字符串，我们可以在这里看到{{dc:职位:comment_count}}字符串的左边= =操作符。这将返回发布到资产的实际评论数量，然后将其与右边指定的值进行比较(在本例中)0)．因此，我们可以从这条语句中看到，只有在页面上的注释计数正好时，才会输出第一个Button0．

接下来，只有在当前资产上出现了1条注释时，我们才使用Button{{dc:职位:comment_count}}发表评论为其主要内容，并实现以下要素条件:

与前面的条件类似，我们仍然比较注释计数，但这一次我们要查看它的值是否完全相同1．如果当前资产只有一个注释，那么这个按钮将会显示出来。

最后，我们的”2 +评论,”如果有2条或2条以上的注释，则显示在页面上。它使用{{dc:职位:comment_count}}评论为其主要内容，并实现以下要素条件:

注意，我们最终将操作符从using更改为using”严格的平等”与= =取而代之的是”大于”的象征,>(操作人员可以通过点击按钮进行循环)。在这里，我们检查当前资产上的注释计数是否大于1，如果是，则输出此按钮。

条款

最后，我们有条款现在我们将在这里引入我们的第一个Looper，以输出所需的适当内容。在“元素大纲”窗格中展开此项目将显示以下结构:

的条款元素是我们打环的供应商的定义，允许我们访问现任职位条件在我们的资产上(单击在这里更多关于Loopers及其提供者类型的信息，如果你是这个功能的新手):

然后由电影消费在术语的孩子。因为Term是启用Consumer的地方，所以这是循环使用您在资产上设置的术语的元素。

每个Term里面都有一个按钮元素,而利用{{dc:术语:url}}为href而且{{dc:术语:标题}}为初级内容。这将为我们提供分配的每个术语的标签，并将其链接到其各自的分类法归档。

接下来，我们还有一个分频器,但它的功能与我们在元素结构中看到的其他分隔符不同。因为这些术语是作为Meta Line中的最后一项输出的，所以这个分隔符实际上用作分隔符每一项输出购买环形使者。例如，如果您有一个职位只有一个类别”旅行”赋值后，输出如下:

但是，如果分配了多个category呢?如果它们都紧挨在一起，没有任何分离或逻辑划分，那就不太好了，这就是我们的术语划分器发挥作用的地方。如果你检查这个Divder，你会看到主要内容是由,，它只是一个逗号后跟一个不间断的空格(这样Flexbox控件就不会折叠空白，类似于前面看到的其他分隔符)。接下来，如果我们去定制control选项卡，您将发现以下内容元素的条件应用:

这是一个打环的条件下,哪可以看的指数看它是否满足指定的条件。在这种情况下，它说，这个分隔器将只有是输出如果这一项是输出不是单子上的最后一个。从上图中可以看到，我们没有看到逗号分隔符，因为”旅行”是唯一的- - - - - -因此，最后一个- - - - - -项是输出。

然而，如果同一个Post有多个category分配给它，输出将看起来像这样:

注意后面没有逗号”音乐”因为它是环形使者的最后一件物品.．.万岁!

要记住的事情

1. 这个元素的格式化决不是完成这类输出的唯一方法。根据您正在寻找的结构或内容的类型，您可能需要对每个组成部分的标记或样式进行重大更改，以实现您想要的最终目标。
2. 如果你计划(或多或少)保持这里使用的风格(即基于文本，像段落文本一样响应)，有一些排版控制绝对关键，它们在所有元素中保持统一。例如，行高在所有文本上，分隔符，按钮等都设置为1.65．如果要为树中的一个元素更改此值，则必须确保为所有元素设置此值。另一个要注意的可能会影响垂直节奏的是字体大小。
3. 扩展上面的观点，如果将样式应用到像Comments Buttons这样的东西，请确保您已经将相同的统一样式应用到所有元素中的按钮。记住，给定页面的当前条件，您一次只能看到一个，但是您可以使用忽略切换为元素的条件的控制预览下拉。这里的主要收获是确保在进行更改时没有忘记任何当前“隐藏”的元素。

演示

要查看元线元素的现场演示，请单击在这里．