如何讓前端佈局確定列和後端佈局？

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

與此類似，在第七大街所有的房子都放到城市正是這個位置 - 從而在你的頁面呈現。