Fluid Templates

Beim Erstellen einer Extension sorgen Fluid Templates dafür, dass Inhalte dargestellt werden können.

Der Blog der Internetagentur Irma Berscheid-Kimeridze. Dies ist das Template für die ListAction, dass als Standard bei leerem Aufruf des Blog geladen wird. Die Darstellung entspricht im Layout nicht der genauen Source des Templates, die Einbindung eines zweispaltigen Layouts mit Bootstrap Styles wurde der Übersichtlichkeit halber weggelassen. Bei vielen Einbindungen von Partials wurden übergebene Werte weggelassen, um die Zeilen des Quelltextes zu kürzen. Dieses ist der Darstellung des Prinzips förderlich.

Einbindung des Layouts

<f:layout name="Default" />

Beginn des Bereichs Main zur Darstellung

<f:section name="main">

Erste Spalte mit Darstellung der Liste

Wichtige Elemente hier:

  • Einbindung von Partials (BlogList)
  • Übergabe von Objekten mit Daten
  • Abfrage von Conditions mit if / else Beziehung
## Liste aller Beiträge im Blog
<div class="div_kasten">
  <f:render partial="Blog/BlogList" arguments="{blogs:blogs}" />
</div>
  
## Links im Button Layout zur Weiterschaltung
<div class="div_kasten">
  <f:if condition="{blogcounter}">
    <f:if condition="{controller}=='blog'">
      <f:render partial="Blog/Blogbuttons" arguments="{blogs:blogs, blogcounter: blogcounter}" />
    </f:if>
    <f:if condition="{controller}=='kat'">
      <f:render partial="Blog/Katbuttons" arguments="{blogs:blogs, blogcounter: blogcounter}" />
    </f:if>
    <f:if condition="{controller}=='tag'">
      <f:render partial="Blog/Tagbuttons" arguments="{blogs:blogs, blogcounter: blogcounter}" />
    </f:if>
  </f:if>	
</div>		

Zweite Spalte mit Tags und Informationen

Wichtige Elemente hier:

  • Conditions mit Vergleichsparametern
  • for / each Schleife
  • Generierung von Links mit Übergabe von Parametern
<div class="blog_tags">
  
  ## Wolke mit Suchbegriffen unterschiedlicher Gewichtung
  <f:if condition="{tagcloudarray}">
    <f:then>
      <f:for each="{tagcloudarray}" as="tag">
        <f:link.action action="list" pluginName="Tag" arguments="{blog: blog, tagid: tag.uid}">
          {tag.name}
        </f:link.action> 
      </f:for>
    </f:then>
  </f:if>		
  
  ## Verfügbare Kategorien    
  <f:if condition="{kat}">
    <f:for each="{kat}" as="kategoriehead">
      <f:if condition="{kategoriehead.uid}=={blogkatlink}">
        <f:then>
          <f:link.action action="list" pluginName="Kategories" arguments="{blog: blog, katid: kategoriehead.uid}">
            {kategoriehead.name} ({kategoriehead.counter})
          </f:link.action>						
        </f:then> 
        <f:else>
          <f:link.action action="list" pluginName="Kategories" arguments="{blog: blog, katid: kategoriehead.uid}">
            {kategoriehead.name} ({kategoriehead.counter})
          </f:link.action>
        </f:else> 
      </f:if>
    </f:for>
  </f:if>
  
  ## Verfügbare Tags
  <f:if condition="{tagshowarray}">
    <f:then>
      <f:for each="{tagshowarray}" as="tag">
        <f:if condition="{tag.uid}=={blogtaglink}">
          <f:then>
            <f:link.action action="list" pluginName="Tag" arguments="{blog: blog, tagid: tag.uid}">
              {tag.name} ({tag.counter})
            </f:link.action>
          </f:then> 
          <f:else>
            <f:link.action action="list" pluginName="Tag" arguments="{blog: blog, tagid: tag.uid}">
              {tag.name} ({tag.counter})
            </f:link.action>
          </f:else> 
        </f:if>
      </f:for>
    </f:then>
  </f:if>
  
</div>

Ende des Bereichs Main zur Darstellung

</f:section>
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • fluid_templates.txt
  • Zuletzt geändert: 20/09/2018 23:10
  • von Thomas Berscheid