有没有办法用 TYPO3 液体包裹 X 件物品?
Is there a way to wrap X items in TYPO3 fluid?
使用扩展 DCE 元素,我创建了一个流体模板,为创建的每个项目生成一个 li 项目。现在我想让每个第一到第二个项目都有一个包装器。这样:
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
变为:
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<ul>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul>
<li>item 5</li>
</ul>
这在流体模板中可行吗?也许与 Typoscript 结合使用?
当然,除了 counters/iterators 之外,您还需要 for
viewhelper。您可以使用 if
viewhelper 来检查您的情况。
API 有一些例子:http://api.typo3.org/typo3cms/current/html/class_t_y_p_o3_1_1_c_m_s_1_1_fluid_1_1_view_helpers_1_1_for_view_helper.html#details
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/For.html
如果您使用的是 VHS 视图助手集合扩展,那么您还可以使用 Iterator\Chunked
视图助手:
<v:iterator.chunk count="4" subject="{menu}" as="entries">
<f:for each="{entries}" as="row">
<f:for each="{row}" as="page">
[...]
</f:for>
</f:for>
</v:iterator>
使用 for
视图助手的迭代器,这对于常规 Fluid 是可能的。
<f:for each="{items}" as="item" iteration="itemIterator">
<f:if condition="{itemIterator.isOdd}">
<ul>
</f:if>
<li>{item.name}</li>
<f:if condition="{itemIterator.isOdd}">
<f:then>
<f:if condition="{itemIterator.isLast}">
</ul>
</f:if>
</f:then>
<f:else>
</ul>
</f:else>
</f:if>
</f:for>
棘手的部分是关闭 </ul>
,它被上面的 Fluid 覆盖。
解决方案
这就是我最终使用 {cycle}
每 2 个项目迭代一次,然后关闭和打开标签的结果。以及确保最后一项不以开始标记结尾:
<ul>
<f:for each="{field.item}" as="item" iteration="iterator">
<f:if condition="{iterator.cycle} % 2">
<f:then>
<li>item {iterator.cycle}</li>
</f:then>
<f:else>
<li>item {iterator.cycle}</li>
<f:if condition="{iterator.isLast} != 1">
<f:then>
</ul><ul>
</f:then>
</f:if>
</f:else>
</f:if>
</f:for>
</ul>
备注
我知道借助 VHS 的强大功能 v:iterator.chunk
可能会用更少的代码解决这个问题,但我无法让它按我想要的方式工作。 如果有人愿意提供一个工作示例来比较这两个选项,我将不胜感激。
带 VHS
更新:21.12.2017
因此重新访问了块选项,使用 VHS iterator.chunk 的以下代码片段实现了相同的代码:
<f:for each="{field.item -> v:iterator.chunk(count: 2)}" as="col" iteration="cycle">
<ul>
<f:for each="{col}" as="item">
<li>
test
</li>
</f:for>
</ul>
</f:for>
也许这对外面的人有帮助!
我还有一个解决方案,至于我 - 更原生
<f:for each="{items}" as="item" iteration="itemIterator">
<f:cycle values="{0:'left', 1:'right', 3:'center'}" as="order">
<f:switch expression="{order}">
<f:case value="left">
<div class="left">Conetnt</div>
</f:case>
<f:case value="right">
<div class="right">Conetnt</div>
</f:case>
<f:case value="center">
<div class="center">Conetnt</div>
</f:case>
</f:switch>
</f:cycle>
</f:for>
使用扩展 DCE 元素,我创建了一个流体模板,为创建的每个项目生成一个 li 项目。现在我想让每个第一到第二个项目都有一个包装器。这样:
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
变为:
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<ul>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul>
<li>item 5</li>
</ul>
这在流体模板中可行吗?也许与 Typoscript 结合使用?
当然,除了 counters/iterators 之外,您还需要 for
viewhelper。您可以使用 if
viewhelper 来检查您的情况。
API 有一些例子:http://api.typo3.org/typo3cms/current/html/class_t_y_p_o3_1_1_c_m_s_1_1_fluid_1_1_view_helpers_1_1_for_view_helper.html#details
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/For.html
如果您使用的是 VHS 视图助手集合扩展,那么您还可以使用 Iterator\Chunked
视图助手:
<v:iterator.chunk count="4" subject="{menu}" as="entries">
<f:for each="{entries}" as="row">
<f:for each="{row}" as="page">
[...]
</f:for>
</f:for>
</v:iterator>
使用 for
视图助手的迭代器,这对于常规 Fluid 是可能的。
<f:for each="{items}" as="item" iteration="itemIterator">
<f:if condition="{itemIterator.isOdd}">
<ul>
</f:if>
<li>{item.name}</li>
<f:if condition="{itemIterator.isOdd}">
<f:then>
<f:if condition="{itemIterator.isLast}">
</ul>
</f:if>
</f:then>
<f:else>
</ul>
</f:else>
</f:if>
</f:for>
棘手的部分是关闭 </ul>
,它被上面的 Fluid 覆盖。
解决方案
这就是我最终使用 {cycle}
每 2 个项目迭代一次,然后关闭和打开标签的结果。以及确保最后一项不以开始标记结尾:
<ul>
<f:for each="{field.item}" as="item" iteration="iterator">
<f:if condition="{iterator.cycle} % 2">
<f:then>
<li>item {iterator.cycle}</li>
</f:then>
<f:else>
<li>item {iterator.cycle}</li>
<f:if condition="{iterator.isLast} != 1">
<f:then>
</ul><ul>
</f:then>
</f:if>
</f:else>
</f:if>
</f:for>
</ul>
备注
我知道借助 VHS 的强大功能 v:iterator.chunk
可能会用更少的代码解决这个问题,但我无法让它按我想要的方式工作。 如果有人愿意提供一个工作示例来比较这两个选项,我将不胜感激。
带 VHS
更新:21.12.2017
因此重新访问了块选项,使用 VHS iterator.chunk 的以下代码片段实现了相同的代码:
<f:for each="{field.item -> v:iterator.chunk(count: 2)}" as="col" iteration="cycle">
<ul>
<f:for each="{col}" as="item">
<li>
test
</li>
</f:for>
</ul>
</f:for>
也许这对外面的人有帮助!
我还有一个解决方案,至于我 - 更原生
<f:for each="{items}" as="item" iteration="itemIterator">
<f:cycle values="{0:'left', 1:'right', 3:'center'}" as="order">
<f:switch expression="{order}">
<f:case value="left">
<div class="left">Conetnt</div>
</f:case>
<f:case value="right">
<div class="right">Conetnt</div>
</f:case>
<f:case value="center">
<div class="center">Conetnt</div>
</f:case>
</f:switch>
</f:cycle>
</f:for>