Vorlagen DE

Zweck von Templates

Um die Struktur gleich aufgebauter Webseiten nicht auf jeder Webseite neu definieren zu müssen, gibt es Templates. Für jede Webseite der Website ist ein Template zuzuweisen. Templates können in beliebig vielen Webseiten verwendet werden.

Platzhalter

Um an gewissen Stellen des Templates Inhalt webseitenspezifisch zuzuweisen, werden Platzhalter verwendet. Diese Platzhalter sind in der Liste der Platzhalter in der Templatepflege durch Beistriche getrennt anzugeben.

DRYML

Templates können in ERB oder in DRYML erfasst werden. Da die Erstellung in DRYML einfacher ist, werden wir sie hier vorziehen. Um ein DRYML Template zu erstellen klickt man die Checkboy DRYML oben an.

DRYML ist im Prinzip HTML, mit 2 Unterschieden.

1. Tags, die keinen Inhalt haben, müssen geschlossen werden.
   zum Beispiel ist nur der Tag <br/> gültig, nicht aber <br>
2. Es gibt neue Tags, die in Mercator definiert wurden, um die Einbindung von Inhalten zu vereinfachen.

Bootstrap 3

Unsere Templateengine versteht alle Komponenten des Twitter Bootstrap Frameworks in der Version 3. Damit können viele unterschiedliche Komponenten mit geringem Aufwand eingabaut werden.

Ein dokumentiertes Beispiel

Zunächst das gesamte Beispiel, dann werden wir die einzelnen Zeilen analysieren.

<page title="Home">
  <content:>
    <div class="row">
        <div class="col-lg-12">
          <container name='beispieltext1'/>
        </div>
      </div>
    <div class="row">
      <div class="col-lg-4">
        <container name='beispieltext2'/>
      </div>
      <div class="col-lg-8">
        <container name='beispieltext1'/>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4">
        <container name='beispieltext2'/>
      </div>
      <div class="col-lg-4">
        <photo name='beispielbild' width="100%"/>
      </div>
      <div class="col-lg-4">
        <container name='beispieltext1' />
      </div>
    </div>
  </content:>
</page>

Der Inhalt eine Seite wird im content:-Tag des page-Tags definiert. Der Doppelpunkt hinter content ist wesentlich.

<page title="Home">
  <content:>

Das Grid:

Inhalt wird zunächst zeilen- und dann innerhalb spaltenweise definiert.

Beginnen wir mit dem einfachen Fall: Eine Zeile mit einer Spalte mit einem Beispieltext. Wir eröffnen eine Zeile:

  <div class="row">

Eine Zeile ist 12 Einheiten breit, unser Element soll über die gesamte Breite gehen

      <div class="col-lg-12">

Um textlichen Inhalt einzubetten, verwenden wir den Container-Tag, im Attribut name geben wir den Namen des Platzhalters an.

        <container name='beispieltext1'/>
      </div>
    </div>

Als nächstes Beispiel stellen wir zwei unterschiedlich breite Spalten dar, im linken Drittel den beispieltext2, im Rest wieder den beispieltext1.

  <div class="row">
    <div class="col-lg-4">
      <container name='beispieltext2'/>
    </div>
    <div class="col-lg-8">
      <container name='beispieltext1'/>
    </div>
  </div>

Zum Abschluss drei Spalten mit einem Beispielbild in der Mitte der Tag heisst photo, der Name des Platzhalters ist wieder im name Attribut anzugeben.

    <div class="row">
      <div class="col-lg-4">
        <container name='beispieltext2'/>
      </div>
      <div class="col-lg-4">
        <photo name='beispielbild' width="100%"/>
````

Wir geben 100% als Breite an, damit das Bild die gesamte Spalte ausfüllt. Würden wir die Breite nicht angeben, würde es in Originialgröße dargestellt, damit könnte es kleiner als die Spaltenbreite sein, aber auch über die Spalte hinausstehen.

```xml
      </div>
      <div class="col-lg-4">
        <container name='beispieltext1' />
      </div>
    </div>

Wir müssen noch die geöffneten Tags content: und page schliessen.

  </content:>
</page>

Analog zum Tag für Photos gibt es auch einen für Dokumente, seine Syntax ist

<document name="platzhaltername"/>

Die Tags <photo /> und <document /> dürfen auch innerhalb der Platzhaltertexte verwendetet werden.
Damit können in einem Platzhalter beliebig viele Bilder und Dokumente dargestellt werden.

Kommentare

Templates können Kommentare enthalten, Kommentare können auch mehrzeilig sein.

<!-- Kommentar -->