如何让前端布局确定列和后端布局？

Question

有没有办法让前端布局确定后端布局，模板文件和列？

目前我有以下代码，允许您设置后端布局，并使用适当的模板文件。但是，当每个布局有不同的列位置时，这会变得非常混乱。

page.10 = FLUIDTEMPLATE 
page.10 { 
    #format = html 
    file= fileadmin/templates/example/partials/example_home.html  
    partialRootPath = fileadmin/templates/example/partials/ 
    layoutRootPath = fileadmin/templates/example/layouts/ 
    variables { 

     # Assign the Columns 
     main < styles.content.get 
     main.select.where = colPos = 0 

     news < styles.content.get 
     news.select.where = colPos = 1 
     } 
    } 
} 


# Assign the Template files with the Fluid Backend-Template 
page.10.file.stdWrap.cObject = CASE 
page.10.file.stdWrap.cObject { 
    key.data = levelfield:-1, backend_layout_next_level, slide 
    key.override.field = backend_layout 

    # Set the default Template 
    default = TEXT 
    default.value = fileadmin/templates/example/partials/example_home.html 

    # Set a second Template 
    23 = TEXT 
    23.value = fileadmin/templates/example/partials/example_internal.html 


} 

Answer 1

而不凌乱可言，这里有一个真实的例子：

page.10 = FLUIDTEMPLATE 
page.10 { 
    file.stdWrap.cObject = CASE 
    file.stdWrap.cObject { 
    key.data = pagelayout 

    default = TEXT 
    default.value = {$customPagesTemplatePath}/Standard.html 

    1 = TEXT 
    1.value = {$customPagesTemplatePath}/Home.html 

    2 = TEXT 
    2.value = {$customPagesTemplatePath}/Landing.html 

    10 = TEXT 
    10.value = {$customPagesTemplatePath}/NewsDetail.html 

    11 = TEXT 
    11.value = {$customPagesTemplatePath}/LandingMini.html 

    12 = TEXT 
    12.value = {$customPagesTemplatePath}/FullWidth.html 
    } 
    layoutRootPath = {$customPagesLayoutPath} 
    partialRootPath = {$customPagesPartialPath} 

} 

想想看这样的：

• 正如你所说的，忘了前端布局。这是遗产;为BE和FE服务。

• 如果一个页面是一个城市，colPos将是街道。或者说，想象一下后端是一张你正在绘制的地图，前端是你根据该地图制作的乐高城:-)如果没关系，我会坚持这个比喻。

ColPos是记录所在页面的确定部分。如果可以，请查看数据库中的tt_content表格：您会看到colPos只是一个包含数字的列。因此，在城市“第1页”中，有一条名为“colPos 7”的街道，它包含一些记录（那些将是房屋）。通过TYPO3中的be_layout向导，您可以创建该城市的管理地图：编辑应该如何看到这些街道。

在FLUIDTEMPLATE中，根据所选的be_layout调用，您将创建城市本身;呈现的前端。

下面是这种流体模板（Home.html中）另一个现实世界的例子：

<f:render partial="Mobilenav" /> 
<f:render partial="Header"/> 

<div class="row"> 
<f:cObject typoscriptObjectPath="lib.home-teaser" /> 
</div> 

<aside> 
    <div class="row"> 
    <div class="columns"> 
     <div class="row"> 
     <div class="fp-teaser-outer small-48 medium-24 large-12 columns"> 
      <div class="fp-teaser-box-wrapper"> 
      <f:cObject typoscriptObjectPath="lib.home-something" /> 
      </div> 
     </div> 
     <div class="fp-teaser-outer small-48 medium-24 large-12 columns"> 
      <div class="fp-teaser-box-wrapper"> 
      <f:cObject typoscriptObjectPath="lib.home-somethingelse" /> 
      </div> 
     </div> 
     <div class="fp-teaser-outer small-48 medium-24 large-12 columns"> 
      <div class="fp-teaser-box-wrapper"> 
      <div class="fp-teaser-box"> 
       <f:cObject typoscriptObjectPath="lib.home-news-plugin-title" /> 
       <div class="fp-teaser-hr"></div> 
       <div class="fp-teaser-content"> 
       <f:cObject typoscriptObjectPath="lib.home-news" /> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="fp-teaser-outer small-48 medium-24 large-12 columns"> 
      <div class="fp-teaser-box-wrapper"> 
      <div class="fp-teaser-box"> 
       <f:cObject typoscriptObjectPath="lib.home-blog-plugin-title" /> 
       <div class="fp-teaser-hr"></div> 
       <div class="fp-teaser-content"> 
       <f:cObject typoscriptObjectPath="lib.home-blog" /> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</aside> 

<f:render partial="Footer"/> 

...好了，哪来的与colPos的关系？ 没有！我（虽然是积极的，也有其他方法）为此在Typo脚本：

lib.home-something < styles.content.get 
lib.home-something { 
    select.where = colPos = 7 
} 

因此，通过这一点，我们准备了流体的模板内容：获取页的第7列的所有内容（使用扩展fluid_styled_content），并把它变成一个“lib”内容对象。

那然后通过f:cObject视图助手插入到页面：

<f:cObject typoscriptObjectPath="lib.home-something" /> 

与此类似，在第七大街所有的房子都放到城市正是这个位置 - 从而在你的页面呈现。