Erstellen von TYPOlight-Templates mit YAML

Erstellen von TYPOlight-Templates mit YAML

„Yet Another Multicolumn Layout“ (kurz: YAML) ist ein (X)HTML/CSS Framework zur Erstellung moderner, flexibler Layouts. YAML bietet den Vorteil einer browserunabhängig einheitlichen Darstellung von Webseiten und stellt mit dem YAML Builder ein hervorragendes Werkzeug zur Verfügung, um auch als Laie in kurzer Zeit erstklassige Webseitenlayouts zu erstellen. TYPOlight bietet ein eigenes, integriertes CSS-Framework für eine browserunabhängige Darstellung der Webseiten. Wer jedoch YAML lieb gewonnen hat, die von YAML zur Verfügung gestellten Erweiterungen schätzt oder einfach nur neugierig ist, findet hier eine schrittweise Anleitung zur Integration von YAML in TYPOlight.

Hinweis

Die vorliegende Beschreibung geht davon aus, dass Sie mindestens YAML in der Version 3.1 nutzen.

Erstellen einer HTML-Vorlage als Basis für ein TYPOlight-Template

Zuerst einmal müssen Sie sich eine YAML HTML-Vorlage erstellen, die Sie dann als Template in TYPOlight umsetzen können. Hierfür bietet sich der YAML Builder auf der YAML Webseite an. Der YAML Builder erzeugt Ihnen eine HTML-Vorlage für Ihr gewünschtes Seitenlayout, bindet die benötigten CSS-Dateien des YAML-Frameworks ein und erzeugt die erforderlichen Anpassungen für das von Ihnen gewählte Spaltenlayout.

Über die Get Code-Schaltfläche erzeugen Sie im YAML-Builder die benötigten HTML- und CSS-Dateien.

Voraussetzungen für eine YAML-Integration

Das YAML-CSS-Framework sollte natürlich in Ihrer TYPOlight-Installation zur Verfügung stehen. Im folgenden gehe ich davon aus, dass Sie in Ihrem TYPOlight-Hauptverzeichnis ein Verzeichnis yaml angelegt haben, in dem sich das komplette yaml-Verzeichnis der YAML-Distribution befindet. Dafür steht in YAML die YAML Projektvorlage „Simple Project“ zum Download zur Verfügung. Den Inhalt des darin enthaltenen yaml-Ordners übernehmen wir 1:1 in das angelegte Verzeichnis. In der Version 3.2.1 bedeutet das, dass folgende Dateien und Ordner enthalten sein müssen:

drw-rw-r--@  4 user  user   136 20 Jan 00:00 add-ons/
-rw-rw-r--@  1 user  user   992 19 Jan 23:41 central_draft.css
drw-rw-r--@  8 user  user   272 20 Jan 00:00 core/
-rw-rw-r--@  1 user  user  2538 14 Dez 11:23 markup_draft.html
drw-rw-r--@  6 user  user   204 20 Jan 00:00 navigation/
drw-rw-r--@  4 user  user   136 20 Jan 00:00 patches/
drw-rw-r--@ 10 user  user   340 20 Jan 00:00 print/
drw-rw-r--@  6 user  user   204 20 Jan 00:00 screen/

Erstellen eines TYPOlight-Templates aus YAML Builder Dateien

Beginnen wir mit der Erstellung der eigentlichen TYPOlight Template-Datei. Wählen Sie Get Code im YAML Builder und kopieren Sie den Quellcode des (X)HTML Code Karteireiters in eine Datei fe_demo.tpl im templates-Verzeichnis Ihrer TYPOlight-Installation. TYPOlight-Seitentemplates müssen mit fe_ beginnen und mit der Dateiendung .tpl enden. Dazwischen vergeben Sie den Namen für Ihre Templatedatei. Sie können diese Datei auch über den Punkt Templates Ihres TYPOlight Backends erstellen und den Quellcode darüber einfügen.

Austauschen des Seitenkopfs

Bis auf die Einbindung des YAML-Frameworks müssen Sie nun den kompletten Kopf der HTML-Seite gegen den TYPOlight-Kopf austauschen. Gehen Sie dazu wie folgt vor:

Kopieren Sie die Einbindung des YAML-Frameworks aus dem HEAD. Das sind die vier Zeilen

<link href="css/my_layout.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" />
<![endif]-->

Löschen Sie den gesamten Seitenkopf einschließlich des öffnenden

<body>

Tags. Tauschen Sie den Code gegen den Kopf des Standard-Templates von TYPOlight aus. Um den aktuellen Code zu erhalten, erstellen Sie am einfachsten im Templates-Menüpunkt des TYPOlight-Backends ein neues Template auf Basis des fe_page-Templates und kopieren den Code daraus, oder Sie kopieren den Code direkt aus der Template-Datei system/modules/frontend/templates/fe_page.tpl

Für die TYPOlight Version 2.6.7 handelt es sich dabei um den folgenden Code:

<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<?php echo $this->robots; ?>
<?php echo $this->framework; ?>
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
<?php echo $this->stylesheets; ?>
<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
<?php echo $this->head; ?>
</head>
 
<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>

Damit das YAML-Framework nicht mit dem TYPOlight CSS-Framework kollidiert, löschen Sie bitte noch die Zeile

<?php echo $this->framework; ?>

und fügen Sie an dieser Stelle die vier anfangs kopierten Zeilen mit der Einbindung des YAML-Frameworks ein. Ich gehe im folgenden davon aus, dass die eingebundenen Dateien ebenso wie im YAML Builder in einem Verzeichnis css innerhalb des TYPOlight-Hauptverzeichnisses eingebunden werden. Natürlich können Sie das beliebig ändern. Sie müssen lediglich daran denken, die Pfade entsprechend anzupassen.

Damit erhalten wir dann den folgenden Code für den Kopf der Template-Datei:

<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<?php echo $this->robots; ?>
<link href="css/my_layout.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
<?php echo $this->stylesheets; ?>
<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
<?php echo $this->head; ?>
</head>
 
<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>

Bearbeiten des BODY-Bereichs

Innerhalb des Inhaltsbereichs des Templates (BODY) müssen wir nur die Einbindung der benötigten TYPOlight-Layoutbereiche vornehmen. Wenn Sie einen eigenen Header-Bereich wünschen und vorgesehen haben, fügen Sie bitte innerhalb des header DIV-Elements die Anweisung für die Einbindung des TYPOlight-Header-Bereichs ein

<div class="header">
  <?php echo $this->header; ?>
</div>

Sollten Sie eine Top-Navigation vorgesehen haben, löschen Sie den gesamten Inhalt innerhalb des topnav DIV-Elements und fügen Sie eine Einbindung für Ihr TYPOlight topnav-Modul ein. Entweder, Sie verwenden dafür einen der in TYPOlight vordefinierten Layoutbereiche header,left,right,main,footer oder Sie definieren einen eigenen Bereich, dessen Namen Sie dann lediglich noch in den TYPOlight-Einstellungen unter Eigene Layoutbereiche angeben müssen. Im folgenden Beispiel wäre dies der eigene Layoutbereich topnav:

<div id="topnav">
  <?php echo $this->sections['topnav']; ?>
</div>

Verfahren Sie nun ebenso mit den TYPOlight-Layoutbereichen left,right,main,footer und fügen Sie diese an den entsprechenden Stellen im Code ein. Entfernen Sie dabei sowohl Beispielcode, der vom YAML-Builder erzeugt wurde, als auch die vom YAML Builder angelegten Skiplinks, die durch skip link Kommentare eingeleitet und beendet werden, da diese Skiplinks automatisch von TYPOlight erzeugt werden.

Bei einem Zwei-Spalten-Layout würde der Code dann z.B. folgendermaßen aussehen:

<div id="main">
  <!-- begin: #col1 - first float column -->
  <div id="col1">
    <div id="col1_content" class="clearfix">
      <?php echo $this->right; ?> 
    </div>
  </div>
  <!-- end: #col1 -->
  <!-- begin: #col3 static column -->
  <div id="col3">
    <div id="col3_content" class="clearfix">
      <?php echo $this->main; ?> 
    </div>
    <div id="ie_clearing"> </div>
    <!-- End: IE Column Clearing -->
  </div>
  <!-- end: #col3 -->
</div>
<!-- end: #main -->
<!-- begin: #footer -->
<div id="footer">
  <?php echo $this->footer; ?>
</div>
<!-- end: #footer -->
</div>

Die Kommentare können natürlich ebenfalls aus dem Code entfernt werden.

Ausgespart habe ich nun nur das nav DIV-Element, in dem die horizontale Hauptnavigation untergebracht werden soll. Auch hier entfernen Sie bitte den gesamten Inhalt innerhalb des Elements und setzen stattdessen einen eigenen oder einen TYPOlight-Layoutbereich ein. Im folgenden Beispiel wird ein eigener Layoutbereich mit dem Namen mainnav verwendet:

<!-- begin: main navigation #nav -->
<div id="nav">
  <?php echo $this->sections['mainnav']; ?>
</div>
<!-- end: main navigation -->

Wenn Sie möchten, können Sie nun noch die entsprechenden TYPOlight-Elemente aus dem TYPOlight-Standardtemplate vor das schließende BODY-Element setzen. Es handelt sich dabei um Mootools-Javascript-Einbindungen und Google-Analytics-Einbindungen. Die genauen Bedeutungen entnehmen Sie bitte der TYPOlight-Dokumentation.

Für die TYPOlight-Version 2.6.7 würde der Rest des BODY-Bereiches dann z.B. folgendermaßen aussehen (sofern Sie diese Funktionalitäten integrieren möchten):

<?php echo $this->mootools; ?>
<?php if ($this->urchinId): ?>
 
<script type="text/javascript" src="<?php echo $this->urchinUrl; ?>"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
try {
var pageTracker = _gat._getTracker("<?php echo $this->urchinId; ?>");
pageTracker._trackPageview();
} catch(err) {}
//--><!]]>
</script>
 
<?php endif; ?>
</body>
</html>

Damit ist der wichtigste Schritt, nämlich die Erstellung eines eigenen Templates, abgeschlossen. Wir müssen nun lediglich noch dafür sorgen, dass die zugehörigen YAML-Dateien korrekt eingebunden werden. In unserem Beispiel handelt es sich um die Dateien css/my_layout.css und css/patches/patch_my_layout.css, die vom YAML Builder erzeugt wurden und die Sie über die Zwischenablage aus den entsprechenden Karteireitern des YAML Builder herauskopieren können und an die jeweilige Position im css-Verzeichnis ihrer YAML-Installation kopieren können.

Anpassen der von YAML Builder erzeugten CSS-Dateien

Zusätzlich zu den beiden im Kopf eingebundenen CSS-Dateien finden Sie in den Karteireitern des YAML-Builder auch noch eine Datei basemod.css, die von der Datei my_layout.css eingebunden wird. Wenn Sie die Pfade in der CSS-Datei my_layout.css nicht ändern wollen, müssen Sie nun ein Verzeichnis screen in Ihrem css-Verzeichnis anlegen und die Datei basemod.css dort hinein kopieren. Beachten Sie bitte, dass in basemod.css unter Umständen Hintergrundgrafiken oder Rahmengrafiken eingebunden werden. YAML geht davon aus, dass sich diese Dateien in einem Verzeichnis images befinden, das sich wiederum im gleichen Verzeichnis wie die Datei basemod.css befindet. Legen Sie das Verzeichnis entweder an oder ändern Sie die Pfade so, dass die Bilddateien gefunden werden.

Alternative Vorgehensweise

Alle bereits angesprochenen CSS-Dateien finden Sie in der von YAML Builder vorgegebenen Struktur in der YAML Projektvorlage „Simple Project“, die Sie auf der YAML Homepage herunterladen können. Mit den Dateien aus der Vorlage „Simple Project“ müssen Sie nur die drei vom YAML Builder erzeugten CSS-Dateien basemod.css, my_layout.css und patch_my_layout.css über die jeweiligen Dateien des „Simple Project“ überkopieren.

In der CSS-Datei basemod.css wird außerdem eine Datei screen/content.css eingebunden, welche die eigentlichen CSS-Beschreibungen für die Gestaltung der Inhalte beheimatet. Ich persönlich nehme diese Einbindung

@import url(screen/content.css);

ganz aus der Datei basemod.css heraus und erstelle alle Inhaltsstile mit dem in TYPOlight integrierten CSS-Editor. Diese CSS-Dateien werden dann über die Anweisung

<?php echo $this->stylesheets; ?>

in unserem Seitentemplate in die HTML-Datei integriert.

Damit haben Sie die eigentliche „Bastelarbeit“ bereits erledigt. Es müssen nun nur noch einige Einstellungen in TYPOlight vorgenommen werden, um das neu erstellte Template in Betrieb zu nehmen.

Wichtig

Beachten Sie bitte, dass Sie in der basemod.css zusätzliche von YAML benötigte CSS-Dateien einbinden sollten, wenn Sie diese in TYPOlight auch verwenden wollen. Dazu zählen die hoizontale Shiny Buttons Navigation, die horizontale Sliding Door Navigation, die vertikale Vlist Navigation und der Formularbaukasten. Teilweise werden diese Komponenten bereits durch die Auswahl im YAML Builder eingebunden, teilweise müssen Sie das aber auch von Hand vornehmen. Eine genaue Beschreibung finden Sie in der YAML Online Dokumentation.

Einfügen eigener Layoutbereiche in TYPOlight

Wir haben in dem vorliegenden Beispiel zwei eigene Layoutbereiche topnav und mainnav für die Topnavigation bzw. die horizontale Hauptnavigation eingeführt. Diese müssen wir natürlich dem TYPOlight-System bekannt machen. Dazu öffnen Sie im TYPOlight-Backend die Einstellungen und tragen die beiden Layoutbereiche exakt in dem Wortlaut, in dem Sie im Template angelegt wurden in das Eingabefeld Eigene Layoutbereiche ein.

Einbinden von YAML-Erweiterungen

Damit die Verwendung der horizontalen und vertikalen Menüs und des Formularbaukastens ein Kinderspiel wird, installieren Sie nun bitte die TYPOlight-Erweiterung yamltools aus dem TPYOlight Extension Respository. yamltools definiert die benötigten Menüvorlagen für die horizontalen und vertikalen Listen und bindet den YAML Formularbaukasten nahtlos in TYPOlight ein.

Erstellen der wichtigsten Module

Anhand eines Moduls Hauptmenü zeige ich Ihnen, wie Sie die benötigten TYPOlight-Module für die entsprechenden YAML Elemente erstellen können. Beim Modul Hauptmenü gehe ich davon aus, dass damit eine Shiny Buttons Navigation von YAML erstellt werden soll. Folgendermaßen ist hierbei vorzugehen:

Wechseln Sie im TYPOlight Backend in Module
Erstellen Sie mittels Neues Modul ein neues TYPOlight Modul
Benennen Sie das Modul mit dem Titel Hauptnavigation
Wählen Sie als Modultyp Navigation Hauptpunkte aus
Wählen Sie das Template nav_yaml unter Vorlage für die Navigation
Tragen Sie die CSS-Klasse hlist ein
Speichern Sie das Modul

Analog gehen Sie bei einer Sliding Door Navigation vor. Wenn Sie eine vertikale Listennavigation erstellen wollen, sollten Sie als Template im entsprechenden Navigationsmodul die Vorlage nav_yaml_vlist auswählen und als CSS-Klasse die Klasse vlist vergeben. Für die Integration des Formularbaukastens müssen Sie im TYPOlight Formulargenerator lediglich ein Tabellenloses Layout auswählen und dem Formular die CSS-Klasse yform geben (bzw. yform columnar, wenn Sie ein zweispaltiges Formularlayout wünschen).

Eine Änderung müssen Sie leider vornehmen, wenn Sie darauf bestehen, dass bei einer Kombination aus horizontalem Hauptmenü und vertikalem Untermenü der aktuelle Hauptmenüpunkt ausgewählt ist, wenn Sie einen zugehörigen Untermenüpunkt auswählen. TYPOlight verwendet für diesen Zweck die CSS-Klasse trail mit dem aktiven Hauptmenüelement, die so in YAML nicht vorgesehen ist.

Anlegen eines Seitenlayouts

Das TYPOlight-Seitenlayout ist die Grundlage einer Inhaltsseite Ihrer Website. Im wesentlichen definieren Sie hier nur noch, welche TYPOlight-Module in welche Layoutbereiche Ihres Templates integriert werden. Wechseln Sie dazu in Seitenlayouts und legen Sie ein neues Seitenlayout an. Als Layoutvorlage wählen Sie bitte Ihre Template-Datei fe_demo, die Ihnen in dem Dropdown-Feld angeboten werden müsste.

Falls Sie mit dem YAML Builder ein festes Spaltenlayout festgelegt haben, so können Sie die Einstellungen Spalten, Breite der rechten Spalte, Kopfzeile einfügen und Fußzeile einfügen ignorieren. Die dort gesetzten Werte sind nicht weiter von Belang.

Tipp

Alternativ können Sie auch ein spaltenloses Layout mit dem YAML Builder anlegen und die Spalten während der Inhaltsbearbeitung mit Hilfe der TYPOlight Erweiterung subcolumns von Felix Pfeiffer erstellen.

Im Abschnitt Eigene Layoutbereiche sollten Sie nun die eigenen Layoutbereiche auswählen, die Sie in Ihrem Seitenlayout verwenden möchten. Bitte beachten Sie, dass neu ausgewählte Layoutbereiche erst nach dem Speichern des Seitenlayouts im Bereich Eingebundene Module zur Verfügung stehen.

Das hier dargestellte Beispiel verwendet den Bereich mainnav für die Hauptnavigation, sowie eine rechte Spalte und einen Hauptbereich für die Inhalte und außerdem noch eine Fußzeile. Weisen Sie den jeweiligen Layoutbereichen nur noch die von Ihnen definierten Module zu.

Beispieldateien

Ich habe versucht, den oben beschriebenen Vorgang so weit es geht in Dateien zur Verfügung zu stellen. Der folgende Download beinhaltet alle YAML-CSS-Dateien für ein mit dem YAML-Builder erstelltes Zwei-Spalten-Layout mit einer linken Spalte mit 25% Breite und einer Hauptspalte mit 75% Breite. Packen Sie die ZIP-Datei einfach im Hauptverzeichnis Ihrer TYPOlight-Installation aus. Es werden dann die weiter oben besprochenen Verzeichnisse yaml und css angelegt, außerdem wird im templates-Verzeichnis die Datei fe_demo.tpl angelegt.

Wichtig

Bitte beachten Sie, dass diese Beispieldateien auf YAML 3.1 und TYPOlight 2.6.7 basieren. Sie sollten daher immer überprüfen, ob nicht neuere Versionen von YAML oder TYPOlight zur Verfügung stehen und die Dateien gemäß der Anleitung anpassen.

Archiv mit den Beispieldateien aus dieser Anleitung