Layoute - die Grundlagen

In diesem Kapitel erhalten Sie eine kurze Basisinformation zu Layouten im eCMS.

Einleitung

Ein Layout ist ein statisches HTML-Template. Es beinhaltet primär grundsätzliche HTML-Layoutstrukturen (<div>, <table>, etc.) und nicht den eigentlichen Inhalt. Layoute bilden das Grundgerüst einer jeden Seite oder auch den Rahmen für den Inhalt.

Layoute enthalten in den meisten Fällen einen oder mehrere Platzhalter. Über diese werden bei späterer Verwendung des Layouts auf einer Seite die wirklichen Inhalte (über weitere Layoute, Text, Formate, etc.) eingefügt.

Short Facts

Folgend ein paar kurze Fakten, wie Layoute im eCMS zu betrachten sind:

  • Layoute können in mehreren Seiten gleichzeitig verwendet werden.
  • Layoute können ineinander verschachtelt werden
  • Layoute sind eher statischer Natur, d.h. sie bestehen im Normalfall aus reinem HTML.
  • Layoute können eCMS-Elemente enthalten.
  • Dynamischen Inhalte können bei jedem Einsatz des Layouts über die Platzhalter-Belegung individuell ergänzt werden.
  • Platzhalter können mit mehr als nur einem Inhalt gefüllt werden. Die eingefügten Inhalte werden nacheinander ausgegeben.

Verwendung von Platzhaltern

Mit Platzhaltern in Layouten bestimmen Sie Bereiche in denen dynamische Inhalte eingefügt werden können. Ein solcher Platzhalter muss in Layouten folgenden Syntax besitzen:

  1. ${PH:<label_des_platzhalters>}$

Für <label_des_platzhalters> sollten dabei nur kleine Buchstaben, Ziffern 0-9 sowie Unterstrich ( _ ) verwendet und es möglichst klein geschrieben werden.

Wenn Sie mehrere Platzhalter in einem Layout verwenden möchten, achten Sie darauf, dass Sie unterschiedliche Labelbezeichnungen für Platzhalter verwenden. Gleiche Platzhalter in einem Layouten führen sonst zu Problemen bei der Inhalte-Einstellung.

Beispiele

Beispiel 1: Layout mit einfachen DIV und einem Platzhalter mit dem Label content

  1. <div>${PH:content}$</div>

Beispiel 2: Layout einer Box bestehend aus einem Titel- und einem Inhalteplatzhalter.

  1. <div class="test_box">
  2.    <h2>${PH:title}$</h2>
  3.    <p>${PH:content}$</p>
  4. </div>