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

【问题标题】：How to print something alternatively with fluid in typo3?如何在typo3中用流体交替打印一些东西？
【发布时间】：2021-04-18 13:25:45
【问题描述】：

我正在学习处理错字3。我知道我在这里使用的是 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>

这将打印两列，第一列带有图片，第二列带有标题和文本。我想打印一次左侧的图像，下一次打印右侧的图像，再打印一次左侧的图像。如何在此处替换 html？这是否可以使用流体或我必须采取不同的方法？

类似：

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

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

【问题讨论】：

标签： fluid typo3-9.x

【解决方案1】：

很遗憾，fluid 中没有真正的替代功能。

你可以在一个条件下使用你的方法：

<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;
}

通过这种方式，您还可以使用媒体查询来保持小屏幕的自上而下顺序，这样您的图像或文本就不会彼此相邻。

【讨论】：

我想尝试我的方法，但我在哪里有“索引”？，在我的模板上我没有数组。（或索引，我用 f:debug 试过）但是用 css 的解决方案更简单，也很棒哈哈，我还是试试吧。现在我的主要任务是了解typo3，这就是我想使用fuild的原因。