Typo3 类型3-动态布局

我想创建一个动态的Typo3-流体布局。列的宽度应自动调整。通过流体和字体的限制，我很难描述中心柱的复杂条件。和、或操作员不工作

我希望有人能帮助我

打字稿：

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
    }

变量{
top

布局：

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

测试：{f:if（条件：{right}和{left}'，则：'8'，否则：{f:if（条件：\{left}或{right}'，则：\'9'，否则：\'12\'）}
{top->f:format.raw（）}
{left->f:format.raw（）}
{center->f:format.raw（）}
{right->f:format.raw（）}

逻辑运算符仅在Type3 v8中可用

此外，如果您想设置一个新变量（您想对类名做什么），您可以使用VHS变量集viewhelper在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}

逻辑运算符只能从TYPO3 v8中使用

此外，如果您想设置一个新变量（您想对类名做什么），您可以使用VHS变量集viewhelper在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}

这只是模板的大量逻辑。如果您决定在模板中执行此操作，请尝试不要重复您的条件，尤其是在内联表示法（

{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>

左右
只对
只剩下
不左不右
{top->f:format.raw（）}
{left->f:format.raw（）}
{right->f:format.raw（）}
{center->f:format.raw（）}

至于条件部分，依我看，这是流体模板应放入的最大值。随着你的逻辑在复杂性方面的进步，考虑使用数据处理器。可以在渲染视图之前测试列，并将结果指定给模板，并根据需要使用流体布局

---

对于数据处理器，您需要一些php技能。从code ist

TYPO3\CMS\Frontend\DataProcessing\CommaSeparatedValueProcessor

了解它们是一个很好的起点，这只是模板的大量逻辑。如果您决定在模板中执行此操作，请尝试不要重复您的条件，尤其是在内联表示法（

{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>

左右
只对
只剩下
不左不右
{top->f:format.raw（）}
{left->f:format.raw（）}
{right->f:format.raw（）}
{center->f:format.raw（）}

至于条件部分，依我看，这是流体模板应放入的最大值。随着你的逻辑在复杂性方面的进步，考虑使用数据处理器。可以在渲染视图之前测试列，并将结果指定给模板，并根据需要使用流体布局

对于数据处理器，您需要一些php技能。从代码列表

TYPO3\CMS\Frontend\DataProcessing\CommaSeparatedValueProcessor

了解它们是一个很好的起点