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. |
$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. |
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. |
$CMS_FOR(for_lang, #global.project.languages)$ | Die Anweisung $CMS_FOR(...)$ wird für Schleifenkonstrukte eingesetzt. |
$CMS_IF((#global.language.abbreviation.upperCase != | Innerhalb der Anweisung $CMS_IF(...)$ wird eine Bedingung festgelegt. |
$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. |