Online Dokumentation FirstSpirit V5.1

Startseite / Tutorials / Das erste Projekt / Seitenvorlage erstellen / Ausgabe in HTML

Ausgabe der Seitenelemente in HTML

Liegen für die geplante Website bereits HTML-Seiten vor, können diese als Gerüst für die zu erstellende Seitenvorlage genutzt werden. Dazu kann der Quellcode einer HTML-Datei unterhalb des „CMS_HEADER“-Bereiches eingefügt werden.

Anschließend wird dieser Quellcode dahingehend geändert, dass der Inhalt mit FirstSpirit dynamisch dargestellt werden kann. Dazu gehört, dass alle Referenzen, die nicht auf externe Daten verweisen, durch entsprechende FirstSpirit-Ausdrücke ersetzt werden.

Der statische Inhalt der einzelnen Absätze wird durch den dynamischen Inhalt eines Inhaltsbereiches ersetzt. Damit der Inhalt des Inhaltsbereiches im Browser sichtbar ist, muss er innerhalb der Seitenvorlage ausgegeben werden. Dies wird z. B. durch das Systemobjekt #global umgesetzt: #global.page.body("REFERENZNAME_DES_INHALTSBEREICHS").
Die Pfade zu den einzelnen Medien werden durch die Anweisung $CMS_REF(media:...)$ ersetzt. Für die „...“ werden dabei die entsprechenden Namen der Medien aus der Medien-Verwaltung eingesetzt.

In unserem Beispielprojekt erfolgt die Ausgabe der einzelnen Seitenelemente über ein einfaches HTML-Gerüst. HTML-Kenntnisse werden hierbei vorausgesetzt und sind nicht Bestandteil dieser Dokumentation. Auf die verwendeten HTML-Ausdrücke wird in den Erläuterungen nicht eingegangen.

Die in den einzelnen Ausgabebereichen verwendeten FirstSpirit-Komponenten werden in den folgenden Abschnitten erläutert (Zur Erinnerung: Die Gliederung der Seite wurde unter Projektlayout definiert):

Ausgabe der Browser-Überschrift
Ausgabe eines Layout-Bildes unterhalb der ersten Navigationsebene
Umschalten zwischen den einzelnen Projektsprachen
Darstellung der ersten Navigationsebene
Darstellung der zweiten Navigationsebene
Ausgabe der Seitenüberschrift
Ausgabe der Absätze im Absatzbereich "content_center"

Ausgabe des Browsertitels

$CMS_TRIM(level:4)$
          <title>
              $CMS_IF(!pt_title.isEmpty)$
                  $CMS_VALUE(pt_title.convert2)$
              $CMS_END_IF$
          </title>
$CMS_END_TRIM$


$CMS_TRIM(level:4)$	Die Anweisung $CMS_TRIM(...)$ dient dazu, den generierten Quelltext zu formatieren und dabei unnötige Leerzeilen und Whitespaces zu entfernen. level:4 bedeutet, dass alle aufeinander folgenden Whitespaces zu einem Leerzeichen zusammengefasst und zusätzlich führende und folgende Leerzeichen entfernt werden.
$CMS_IF(!pt_title.isEmpty)$	Innerhalb der Anweisung $CMS_IF(...)$ wird eine Bedingung festgelegt. (Der Referenzname der Eingabekomponente für die Browserüberschrift lautet pt_title. Die Komponente wird auf Nicht Leer geprüft.)
$CMS_VALUE(pt_title.convert2)$	Ist die Bedingung "Wahr", dann wird über die Anweisung $CMS_VALUE(...)$ der Inhalt der Eingabekomponente pt_title ausgegeben.

Ausgabe eines Layout-Bildes unterhalb der ersten Navigationebene

<img src="$CMS_REF(media:"example_picture")$" class="header" alt=""/>


$CMS_REF(media:"example_picture")$	Die Anweisung $CMS_REF(...)$ löst eine Referenz auf einen beliebigen Objektknoten zu einem Pfad auf, und sorgt gleichzeitig dafür, dass das referenzierte Objekt im generierten Stand des Projekts bzw. in der Vorschau vorhanden ist. Hier wird die URL eines Bildes aus der Medien-Verwaltung (media:) mit dem Referenznamen "example_picture" ermittelt.

Umschalten der Projektsprachen

<div class="clearfix">
        $CMS_TRIM(level:4)$
            <ul id="languages">
                $CMS_FOR(for_lang, #global.project.languages)$
                    $CMS_IF((#global.language.abbreviation.upperCase != for_lang.abbreviation.upperCase) && for_lang.shouldGenerate)$
                        <li>
                            <a href="$CMS_REF(#global.ref, language:for_lang)$" title="">$CMS_VALUE(for_lang.name.convert2)$</a>
                        </li>
                    $CMS_END_IF$
                $CMS_END_FOR$
            </ul>
        $CMS_END_TRIM$
</div>


$CMS_TRIM(level:4)$	Die Anweisung $CMS_TRIM(...)$ dient dazu, den generierten Quelltext zu formatieren und dabei unnötige Leerzeilen und Whitespaces zu entfernen. level:4 bedeutet, dass alle aufeinander folgenden Whitespaces zu einem Leerzeichen zusammengefasst und zusätzlich führende und folgende Leerzeichen entfernt werden.
$CMS_FOR(for_lang, #global.project.languages)$	Die Anweisung $CMS_FOR(...)$ wird für Schleifenkonstrukte eingesetzt. for_lang ist der Variablenname, der für diese Anweisung verwendet wird. #global.project.languages - das projektbezogene Systemobjekt liefert alle Sprachen eines Projektes zurück.
$CMS_IF((#global.language.abbreviation.upperCase != for_lang.abbreviation.upperCase) && for_lang.shouldGenerate)$	Innerhalb der Anweisung $CMS_IF(...)$ wird eine Bedingung festgelegt. #global.language.abbreviation.upperCase - das vorschaubezogene Systemobjekt liefert das Kürzel der Sprache zurück, die gerade erzeugt wird, die Methode .upperCase konvertiert dabei alle Zeichen der Zeichenkette in Großbuchstaben. Überprüft wird, ob das Ergebnis mit dem Inhalt der Variablen for_lang übereinstimmt und ob die Sprache generiert wird.
$CMS_REF(#global.ref, language:for_lang)$	Sind die Bedingungen erfüllt, dann wird über die Anweisung $CMS_REF(...)$ eine Referenz auf die aktuelle Seite in der entsprechenden Projektsprache erzeugt.
$CMS_VALUE(for_lang.name.convert2)$	Außerdem wird über die Anweisung $CMS_VALUE(...)$ der Inhalt der Variablen for_lang für die jeweilige Referenz ausgegeben.

Darstellung der ersten Navigationsebene

<a name="mainmenu"></a>
            <div class="clearfix menu">
                $CMS_TRIM(level:4)$
                    $CMS_IF(!pt_mainNavigation.isEmpty)$
                        <ul id="navigation">
                            $CMS_VALUE(pt_mainNavigation)$
                        </ul>
                    $CMS_END_IF$
                $CMS_END_TRIM$
            </div>


$CMS_TRIM(level:4)$	Die Anweisung $CMS_TRIM(...)$ dient dazu, den generierten Quelltext zu formatieren und dabei unnötige Leerzeilen und Whitespaces zu entfernen.
$CMS_IF(!pt_mainNavigation.isEmpty)$	Innerhalb der Anweisung $CMS_IF(...)$ wird eine Bedingung festgelegt. (Bei pt_mainNavigation handelt es sich um "das Ergebnis" der Navigationsfunktion von der vorherigen Seite. Die Funktion wird auf Nicht Leer geprüft.)
$CMS_VALUE(pt_mainNavigation)$	Ist die Bedingung "Wahr", dann wird über die Anweisung $CMS_VALUE(...)$ für jedes Navigationselement der ersten Navigationsebene der entsprechende Wert ausgegeben.

Darstellung der zweiten Navigationsebene

<div class="leftCol">
         $CMS_TRIM(level:4)$
            $CMS_IF(!pt_subNavigation.isEmpty)$
                <ul class="subNavigation">
                    $CMS_VALUE(pt_subNavigation)$
                </ul>
            $CMS_END_IF$
        $CMS_END_TRIM$
</div>


$CMS_TRIM(level:4)$	Die Anweisung $CMS_TRIM(...)$ dient dazu, den generierten Quelltext zu formatieren und dabei unnötige Leerzeilen und Whitespaces zu entfernen.
$CMS_IF(!pt_subNavigation.isEmpty)$	Innerhalb der Anweisung $CMS_IF(...)$ wird eine Bedingung festgelegt. (Bei pt_subNavigation handelt es sich um "das Ergebnis" der Navigationsfunktion von der vorherigen Seite. Die Funktion wird auf Nicht Leer geprüft.)
$CMS_VALUE(pt_subNavigation)$	Ist die Bedingung "Wahr", dann wird über die Anweisung $CMS_VALUE(...)$ für jedes Navigationselement der zweiten Navigationsebene der entsprechende Wert ausgegeben.

Ausgabe der Seitenüberschrift

<div class="headline">
        $CMS_TRIM(level:4)$
            $CMS_IF(!pt_headline.isEmpty)$
                <h1>$CMS_VALUE(pt_headline.convert2)$</h1>
            $CMS_END_IF$
        $CMS_END_TRIM$    
</div>


$CMS_TRIM(level:4)$	Die Anweisung $CMS_TRIM(...)$ dient dazu, den generierten Quelltext zu formatieren und dabei unnötige Leerzeilen und Whitespaces zu entfernen.
$CMS_IF(!pt_headline.isEmpty)$	Innerhalb der Anweisung $CMS_IF(...)$ wird eine Bedingung festgelegt. (Der Referenzname Seitenüberschrift lautet pt_headline. Die Funktion wird auf Nicht Leer geprüft.)
$CMS_VALUE(pt_headline.convert2)$	Ist die Bedingung "Wahr", dann wird über die Anweisung $CMS_VALUE(...)$ der Inhalt der Eingabekomponente pt_headline ausgegeben.

Ausgabe der Absätze aus dem Inhaltsbereich content_center

$CMS_TRIM(level:4)$
    $CMS_VALUE(#global.page.body("content_center"))$
$CMS_END_TRIM$


$CMS_TRIM(level:4)$	Die Anweisung $CMS_TRIM(...)$ dient dazu, den generierten Quelltext zu formatieren und dabei unnötige Leerzeilen und Whitespaces zu entfernen.
$CMS_VALUE(#global.page.body("content_center"))$	Über die Anweisung $CMS_VALUE(...)$ wird der Inhalt der Absätze eines Inhaltsbereiches ausgegeben. Das seitenbezogene Systemobjekt #global.page.body liefert den Inhalt des über seinen eindeutigen Referenznamen bezeichneten Inhaltsbereiches content_center.

Druckversion | Seitenanfang