作者
在本文中,我们将讨论Author元素及其设置,并将其作为一个快速的起点来输出关于编写当前Post、Page等内容的用户的信息。
通常在你的网站上处理某些类型的内容时,通常会包含一个作者设计中的信息部分。这可能包括作者的姓名、显示名、传记信息等等。我们所包含的Author Elements可以作为一个快速的起点,为这个模式连接所有适当的动态内容以及一些简单的样式,使您能够立即启动并运行。
简介
作者元素是“预制”元素,这意味着它们是由所有构建器库中的核心元素组成的。它的最高的元素是一个Div元素,具有相对简单的子元素结构。有两种变体可供探索,一种是垂直方向:

另一个是水平方向:

标记
这两个Author元素的子结构是相同的,只是通过独特的样式实现了这些不同的布局。子结构可以在工作区的大纲窗格中看到:

最上面的作者元素有标签设置为<一>
的链接值{{dc:用户:url}}
,如果设置了一个,它将把用户带到作者的前端配置文件页面(如果您不希望这个元素链接到任何内容,请将这个级别的标签更改为您想要的标记,并删除href
让它保持静态)。这个层没有任何独特的、元素特定的样式来实现上面看到的外观,所以可以很容易地修改它来应用保证金
,填充
等等。
在此内部,我们有另一个Div元素重命名为不谈,它有标签设置为除了< >
。这样做在一定程度上分离了实现上面所见外观所需的一些特定于元素的样式,同时也利用了这个语义标记,因为我们的最顶层元素已经设置为<一>
标签。这也是两个Author变体之间的主要布局差异开始的地方。垂直方向定义了它的内部Flexbox布局如下:

而水平方向用以下设置定义它:

这也是你在上面每个截图中看到的灰框样式的来源。notes的另一个变体是the保证金控件,因为它们都具有的偏移量26像素
在不同的侧面来抵消负面影响保证金
设置在图元素内。除此之外,我们还有数字元素,该元素包含用户帐户的Gravatar集和对象金宝搏体育官方网站标题元素,该元素同时启用了主标题和副标题文本。
演示
要查看Author元素变化的现场演示,请参见下面:
看到不准确的地方了吗?让我们知道