Typo3 - 动态布局

Question

我想创建一个动态 Typo3 - 流体布局。列的宽度应自动调整。通过 Fluid 和 Typoscript 的限制，我在制定中心柱的复杂条件时遇到了问题。 AND、OR 运算符不起作用。

我希望有人可以帮助我。

排版：

variables {
      top < styles.content.get
      top.select.where = colPos=3
      left < styles.content.get
      left.select.where = colPos=1
      center < styles.content.get
      center.select.where = colPos=0
      right < styles.content.get
      right.select.where = colPos=2
      footer < styles.content.get
      footer.select.where = colPos=4
    }

布局：

<div class="container-fluid">
  TEST: {f:if(condition:'{right} AND {left}', then:'8', else:'{f:if(condition:\'{left} OR {right}\', then: \'9\', else:\'12\')}')}
  <div class="row">
    <div id="top_nav">
      {top -> f:format.raw()}
    </div>
  </div>
  <div class="row">
    <f:if condition="{left}">
      <div id="left" class="col-xs-12 col-md-{f:if(condition:'{right}', then:'2', else:'3')}">
        {left -> f:format.raw()}
      </div>
    </f:if>

    <div id="center" class="col-xs-12 col-md-{f:if(condition:'{right} AND {left}', then:'8', else:'{f:if(condition:\'{left} OR {right}\', then: \'9\', else:\'12\')}')}">
      {center -> f:format.raw()}
    </div>

    <f:if condition="{right}">
      <div id="right" class="col-xs-12 col-md-{f:if(condition:'{left}', then:'2', else:'3') }">
        {right -> f:format.raw()}
      </div>
    </f:if>
  </div>

Answer 1

逻辑运算符仅适用于 TYPO3 v8

https://wiki.typo3.org/Fluid#Logical_operators

另外，如果您想设置一个新变量（您喜欢对类名做什么），您可以使用 VHS 变量 set viewhelper 在 html 之外设置您的逻辑： https://fluidtypo3.org/viewhelpers/vhs/master/Variable/SetViewHelper.html

一个例子：

<f:if condition="{right}">
<f:then> 
<v:variable.set name="classCenter" value="2" /> 
</f:then> 
<f:else>
<v:variable.set name="classCenter" value="9" /> 
</f:else>
</f:if>

<div id="center" class="col-xs-12 col-md-{classCenter}" >

您当然需要安装 vhs 并在您的流体模板中设置命名空间：{namespace v=FluidTYPO3\Vhs\ViewHelpers}

Answer 2

这只是模板的很多逻辑。如果您决定在模板中执行此操作，请尽量不要重复您的条件，尤其是内联表示法 ({f:if(…)})。我更喜欢使用部分，无论是在同一个模板/部分文件还是另一个，而不是设置变量。

您的代码可以像这样可读：

<f:section="main">
    <f:if condition="{right}">
        <f:then>
            <f:if condition="{left}">
                <f:then><f:comment>left and right</f:comment>
                    <f:render section="top" arguments="{top:top}" />
                    <f:render section="left" arguments="{columns:2,left:left}" />
                    <f:render section="center" arguments="{columns:8,center:center}" />
                    <f:render section="right" arguments="{columns:2,right:right}" />
                </f:then>
                <f:else><f:comment>right only</f:comment>
                    <f:render section="top" arguments="{top:top}" />
                    <f:render section="center" arguments="{columns:9,center:center}" />
                    <f:render section="right" arguments="{columns:3,right:right}" />
                </f:else>
            </f:if>
        </f:then>
        <f:else>        
            <f:if condition="{left}">
                <f:then><f:comment>left only</f:comment>
                    <f:render section="top" arguments="{top:top}" />
                    <f:render section="left" arguments="{columns:3,left:left}" />
                    <f:render section="center" arguments="{columns:9,center:center}" />
                </f:then>
                <f:else><f:comment>neither left nor right</f:comment>
                    <f:render section="top" arguments="{top:top}" />
                    <f:render section="center" arguments="{columns:12,center:center}" />
                </f:else>
            </f:if>
        </f:else>
    </f:if>
</f:section>

<f:section name="top">
    <div class="row">
        <div id="top_nav">
            {top -> f:format.raw()}
        </div>
    </div>
</f:section>

<f:section name="left">
    <div id="left" class="col-xs-12 col-md-{columns}">
        {left -> f:format.raw()}
    </div>
</f:section>

<f:section name="right">
    <div id="right" class="col-xs-12 col-md-{columns}">
        {right -> f:format.raw()}
    </div>
</f:section>

<f:section name="center">
    <div id="center" class="col-xs-12 col-md-{columns}">
        {center -> f:format.raw()}
    </div>
</f:section>

至于条件部分，IMO 是应该放入一个流体模板的最大值。随着您的逻辑复杂性的提高，请考虑使用数据处理器。您可以在渲染视图之前测试您的列，并将结果分配给您的模板，并为您的目的使用流畅的布局。

您需要一些数据处理器的 php 技能。从代码ist TYPO3\CMS\Frontend\DataProcessing\CommaSeparatedValueProcessor 了解它们的良好起点。