Wie kann Frontend Layout Spalten und Backend Layout bestimmen?

Question

Gibt es eine Möglichkeit, wie das Frontend-Layout das Backend-Layout, die Vorlagendatei und die Spalten bestimmen kann?

Im Moment habe ich den folgenden Code, mit dem Sie das Back-End-Layout festlegen können und es die entsprechende Vorlagendatei verwendet. Dies wird jedoch sehr unordentlich, wenn für jedes Layout unterschiedliche Spaltenpositionen vorhanden sind.

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

gar nicht unordentlich, hier ist ein Beispiel aus der Praxis:

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} 

} 

Denk darüber wie folgt aus:

• Wie Sie sagen, vergessen Sie Frontend-Layout. Das ist Vermächtnis; be Layout dient für BE und FE.

• Wenn eine Seite eine Stadt wäre, wären die colPos die Straße. Oder stellen Sie sich vor, das Backend ist eine Karte, die Sie zeichnen, und das Frontend ist eine LEGO City, die Sie nach dieser Karte bauen :-)) Wenn es in Ordnung ist, bleibe ich bei dieser Metapher.

ColPos ist ein bestimmter Teil einer Seite, auf der ein Datensatz lebt. Wenn Sie können, werfen Sie einen Blick auf die Tabelle tt_content in der Datenbank: Sie werden sehen, dass colPos nur eine Spalte mit einer Nummer ist. In der Stadt "Page 1" gibt es eine Straße namens "colPos 7", die einige Aufzeichnungen enthält (das wären Häuser). Mit dem be_layout-Assistenten in TYPO3 erstellen Sie eine administrative Karte dieser Stadt: wie der Editor diese Straßen sehen soll.

In der FLUIDTEMPLATE rufen Sie abhängig von der ausgewählten be_layout, erstellen Sie die Stadt selbst; das gerenderte Frontend.

Hier ist ein weiteres Beispiel aus der Praxis für eine solche Flüssigkeit Vorlage (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"/> 

... na ja, aber wo ist die Korrelation mit den colPos? Nirgendwo! I (während positiv zu sein, dass es andere Ansätze) tun dies in TypoScript:

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

So durch das wir Inhalte für die Flüssigkeitsvorlage vorbereiten: Holen Sie alle Inhalte von dieser Seite der Spalte 7 (mit der Erweiterung fluid_styled_content) und setzen es in ein "lib" Inhaltsobjekt.

, die dann in der Seite über die f:cObject View Helfer eingefügt wird:

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

wie diese sind alle Häuser in der 7. Straße in die Stadt setzen in genau diesen Ort - und damit in Ihrer Seite gerendert.