如何在 typo3 中用流体交替打印某些东西？

Question

我正在学习处理 typo3。我知道我在这里使用的是 Fluid 从我的后端调用变量

我有这个模板

<f:layout name="Default" />
<f:section name="Main">
  <div class="container">
    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '21'}" />
  </div>
</f:section>

这是模板？我正在打印我的内容元素。

<html data-namespace-typo3-fluid="true"
   xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
   <div class="row">
      <div class="col-7 ">
         <div class="screen">
            <div class="screenshot">
               <f:for each="{screenshots}" as="screenshot">
                  <f:image style="opacity: 1;" image="{screenshot}" />
               </f:for>
            </div>
            <a href="#" target="_blank">
               <img src="typo3conf/ext/hebotek_website/Resources/Public/Images/screen.png" width="100%">
            </a>
         </div>
         
      </div>
      <div class="col-5">
         <f:for each="{logos}" as="logo">
            <f:image style="opacity: 1;" image="{logo}" />
         </f:for>
         <div class="project_desc">
            <h3>
               {data.header}
            </h3>
            <f:format.html>{data.bodytext}</f:format.html>
         </div>
      </div>
   </div>
</html>

这将打印两列，第一列包含图片，第二列包含 header 和文本。我想一次打印左边的图像，下一次打印右边的图像，下一次打印左边的图像。我如何在这里交替 html ？这对流体是否可行，或者我必须采取不同的方法？

类似于：

if(index % 2 == 0)
{
    print left
}
else
{
    print right
}

在这两个模板中的任何一个中，我都有一个数组来执行此操作。谢谢！

Answer 1

不幸的是，流体中没有真正的替代功能。

您可以在以下条件下使用您的方法：

<f:if condition="{index % 2 == 0}">
    <f:then>
        print left
    </f:then>
    <f:else>
        print right
    </f:else>
</f:if>

Fluid 还提供了一种在单独的文件中呈现部分的方法，以减少模板中的标记量：

<f:render partial="path/to/your/partial/left">

但更好的方法可能是使用 css 来替换您的布局。以 flexbox 为例：

.row:nth-child(even) .col-6.image {
   order: 1;
}
.row:nth-child(even) .col-6.text {
   order: 2;
}
.row:nth-child(odd) .col-6.image {
   order: 2;
}
.row:nth-child(odd) .col-6.text {
   order: 1;
}

这样，您还可以使用媒体查询，为较小的屏幕保持从上到下的顺序，这样您的图像或文本就不会彼此相邻。

如何在 typo3 中用流体交替打印某些东西？

How to print something alternatively with fluid in typo3?

fluid

typo3-9.x