Typo3 - 동적 레이아웃

Question

동적 인 Typo3 - 유체 레이아웃을 만들고 싶습니다. 열 너비는 자동으로 조정해야합니다. Fluid와 Typoscript의 제한을 통해 필자는 가운데 열의 복잡한 조건을 공식화하는 데 문제가 있습니다. AND, OR 연산자가 작동하지 않습니다.

누군가가 나를 도울 수 있기를 바랍니다.

Typoscript :

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

논리 연산자 만,

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

또한 TYPO3의 V8에서 사용할 수 있습니다 (당신이 클래스 이름으로 무엇을하고 싶은지) 요를 설정할 수 있습니다. VHS와 변수 설정 viewhelper와 HTML 외부 UR의 논리 : https://fluidtypo3.org/viewhelpers/vhs/master/Variable/SetViewHelper.html

예 : 당신은 VHS를 설치하고 유체 템플릿의 네임 스페이스를 설정 당연히해야합니다

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

: {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에서 그들을 이해하는 좋은 출발점.