0

我正在运行 TYPO3 v. 6.1 FLUID/EXTBASE。

带有扩展名：新闻系统，关键字：新闻。

在显示所有新闻的 list.html 页面上，如果我在设置中选择显示 6 个新闻/站点，我可以添加 UL/LI 布局。

那么是否可以在 list.html 页面中告诉它：

LI 1 需要风格

style="position: absolute; left: 0px; top: 0px; height: 258px; transform: translate(0px, 0px);"

LI 2 需要风格

style="position: absolute; left: 0px; top: 0px; height: 258px; transform: translate(279px, 0px);"

LI 3 需要风格

style="position: absolute; left: 0px; top: 0px; height: 258px; transform: translate(558px, 0px);"

...到 LI 6，所有的 li 都没有数字，但我在这里参考。到我在设置中设置的 6 个新闻/网站。

所以我可以在 2 行 3 列中制作 6 个新闻的网格视图？

4

2 回答 2

1

您可以在 each-viewhelper 中使用迭代，例如

<f:for each="{news}" as="newsItem" iteration="iterator">
    <f:if condition="{iterator.index} == 1">...</f:if>
        <li class="first-item"></li>
    </f:if>
    <f:if condition="{iterator.index} == 2">...</f:if>
        <li class="second-item"></li>
    </f:if>
</f:for>

但是您必须将此条件添加到所有项目。否则你可以使用 cycle-viewhelper 来定义这样的列：

<f:for each="{news}" as="newsItem">
  <f:cycle values="{0: 1, 1: 2, 2: 3}" as="cycle">
    <f:if condition="{cycle} == 1">...</f:if>
        <li class="col-1"></li>
    </f:if>
    <f:if condition="{cycle} == 2">...</f:if>
        <li class="col-2"></li>
    </f:if>
    <f:if condition="{cycle} == 2">...</f:if>
        <li class="col-2"></li>
    </f:if>
  </f:cycle>
</f:for>

在这里，您只需为每一列添加条件。我会按条件添加类，而不是整个 li-tag，但我认为上面的代码更易于阅读。

<f:for each="{news}" as="newsItem" iteration="iterator">
    <li class="{f:if(condition: "{iterator.index} == 1", then: 'first-class')} {f:if(condition: "{iterator.index} == 2", then: 'second-class')}">

    </li>   
</f:for>
于 2013-12-03T11:56:12.643 回答
0

执行从 0 开始，所以它会像......

<f:for each="{news}" as="newsItem" iteration="iterator">
<f:if condition="{iterator.index} == 0">...</f:if>
    <li class="first-item"></li>
</f:if>
<f:if condition="{iterator.index} == 1">...</f:if>
    <li class="second-item"></li>
</f:if>
</f:for>
于 2014-01-30T13:07:07.547 回答