Sie sind auf Seite 1von 5

CitusCMS 0.

7 Frontend-Template Dokumentation
Ab Version 0.7.2 (letzte Aktualisierung des Dokuments: 14.12.2011 17:04)

Selbst gemachte Frontend-Templates machen die eigene Webseite mit CitusCMS um einige Stufen interessanter und einzigartiger. Ein Frontend-Template fr CitusCMS zu erstellen ist sehr einfach und dauert nur wenige Minuten. Kenntnisse in der Sprache HTML und CSS sind aber Voraussetzung zum freien Erstellen von Templates. Auch sollten Kenntnisse im Umgang mit Dateien und Ordnern vorhanden sein. In dieser Dokumentation wird gezeigt, wie CitusCMS-Templates strukturell aufgebaut sind. Das Verschnern bzw. Aufwerten mit CSS wird aus bersichtsgrnden weggelassen. Es wird also lediglich die Struktur hinter einem Template gezeigt. Da CitusCMS ein sehr modernes System ist, wird hier in dieser Dokumentation auch nur moderne Technologien verwendet. Wir setzen hier also voll auf HTML5, welches schon von allen groen Browsern untersttzt wird. Unser Wahlbrowser in dieser Dokumentation ist der Mozilla Firefox in Version 3.6 auf dem Betriebssystem Ubuntu 10.04. Genug der Vorrede Los geht es mit dem Template-Erstellen:

Schritt 1 Ordnerstruktur anlegen


Als allererstes legen wir einen Ordner tpl_meintemplate an. Der Templatename muss immer mit der Prfix tpl_ beginnen. Das ist eine zwingende Vorgabe von CitusCMS! Auch drfen in dem restlichen Namen nur Buchstaben, Zahlen, Unter- und Bindestriche vorhanden sein. Alle anderen Zeichen sind nicht erlaubt! Nun wird folgende Ordnerstruktur in diesem Ordner angelegt:
tpl_meintemplate/ resources/ public/ css/ default.css images/ .htaccess main.accesspassword.html main.error_404.html

views/

config.package.php

main.template.html

Die fett geschriebenen Elemente sind Ordner, die anderen Elemente sind Dateien.

Schritt 2 Template-Dateien bearbeiten


Nun ist die Ordnerstruktur vorhanden und die einzelnen Dateien knnen bearbeitet werden. Als erstes wird die Datei tpl_meintemplate/main.template.html geffnet. Folgendes Grundgerst wird in die Datei eingefgt (ohne Zeilennummern):
01: <!DOCTYPE html> 02: <html lang=""> 03: <head> 04: 05: 06: 07: 08: 09: 10: 11: 12: 13: <base href="" /> <title></title> <meta <meta <meta <meta charset="" /> name="robots" content="index,follow" /> name="keywords" content="" /> name="description" content="" />

<link rel="stylesheet" media="all" href="./templates/tpl_meintemplate/resources/public/css/default.css" /> <!--[if lt IE 9]> <script src="./ccms/plugins/html5shiv/html5.js"></script> <![endif]-->

14: </head> 15: <body> 16: <img alt="" src="./cronjobs.php" style="display: none;" />

17: </body> 18: </html>

Dieses Listing ist das Grundgerst eines CitusCMS-Templates. Zeile 1 stellt die Dokument-Deklaration dar, in Zeile 2 wird via dem <html>-Tag spter die Sprache dem Browser bermittelt, bis jetzt ist diese aber noch nicht gesetzt. Mit dem <base>-Tag in Zeile 4 wird spter ein Stamm-Pfad gesetzt. In Zeile 5 wird spter der Titel des Dokumentes definiert. In Zeile 6 wird die Kodierung festgelegt werden, damit Sonderzeichen wie oder im Dokument korrekt dargestellt werden. In Zeile 7 bis 9 werden in <meta>-Tags verschiedene Meta-Informationen fr Suchmaschinen platziert. In Zeile 10 wird die CSSDatei eingebunden. In Zeile 11 bis 13 wird ein spezielles Skript eingebunden, welches nur der Internet Explorer bentigt, da dieser die HTML5-Elemente standardmig nicht vollstndig untersttzt. Zwischen den <body>-Tags in Zeile 15 bis 17 wird spter der eigentliche Seiteninhalt stehen. In Zeile 16 wird ein unsichtbares Bild eingefgt, welches sogenannte Poor-Man-Cronjobs durch das Frontend auslst. Das allgemeine Grundgerst ist somit fertig, fehlen nur noch die Platzhalter, die spter von CitusCMS gegen reale Inhaltsdaten ausgetauscht werden.

Die folgende Liste erklrt alle mglichen Platzhalter:


Platzhalter {{ page::absolute_path }} {{ page::charset }} {{ page::site_name }} {{ page::title }} {{ page::metatag_keywords }} {{ page::metatag_description }} {{ page::navigation }} {{ page::main }} {{ page::footer }} Spterer Inhalt im Template Absoluter Pfad zu der Webseite Zeichensatz (Kodierung der Ausgabe) Webseitenname Titel der aktuellen Seite Meta-Information Schlsselwrter der aktuellen Seite (fr Suchmaschinen) Meta-Information Beschreibung der aktuellen Seite (fr Suchmaschinen) Navigation der Webseite Hauptinhalt der Webseite Fu der Webseite; Enthlt die Copyright-Hinweise von CitusCMS und muss gem der CitusCMSLizenz enthalten sein!

Diese Platzhalter werden nun in das Grundgerst eingebaut. Das Grundgerst mit eingebauten Platzhaltern ist im folgenden nachzuvollziehen:
<!DOCTYPE html> <html lang="{ page::default_language }}"> <head> <base href="{{ page::absolute_path }}" /> <title>{{ page::site_name }} - {{ page::title }}</title> <meta <meta <meta <meta charset="{{ page::charset }}" /> name="robots" content="index,follow" /> name="keywords" content="{{ page::metatag_keywords }}" /> name="description" content="{{ page::metatag_description }}" />

<link rel="stylesheet" media="all" href="./templates/tpl_meintemplate/resources/public/css/default.css" /> <!--[if lt IE 9]> <script src="./ccms/plugins/html5shiv/html5.js"></script> <![endif]--> </head> <body> <p>{{ page::navigation }}</p> <p>{{ page::main }}</p> <p>{{ page::footer }} | Copyright (C) 2011</p> <img alt="" src="./cronjobs.php" style="display: none;" /> </body> </html>

Alle Platzhalter wurden gem ihrem Zweck eingebaut. Der eigentliche Inhaltsbereich zwischen den <body>-Tags ist jedoch noch nicht optimal: Die Navigation, der Seiteninhalt und der Fu der Webseite (Copyright-Hinweise et cetera) werden einfach hintereinander in Abstzen ausgegeben. Jetzt wrde der Teil der Strukturierung beginnen. Mit Hilfe von <div>-Tags (strukturelle Container) knnen z.B. die Navigation und der Seiteninhalt gewnscht platziert werden. Doch die genaue inhaltliche Strukturierung und ebenso das Verschnern per CSS soll nicht Teil dieser Dokumentation werden.

Das Template an sich ist nun fertig, jedoch fehlt noch die Konfigurations-Datei des Templates tpl_meintemplate/resources/config.package.php, welche nun geffnet wird. Das Grundgerst ist auch hier immer gleich:
<?php if ( defined('C_EXEC') === false ) die('ACCESS DENIED'); $this->_registry->arrGlobal['C_CONFIG']['tpl_meintemplate'] = array( 'package_type' => 2, 'package_version' => '0.0.1', 'minsystem_version' => '0.7.2', ## --'tpl_navigation' => array( '<ul>', '</ul>' ), 'tpl_navigation_item_normal' => array( '<li><a href="{{item::link}}" {{item::linktarget}}>{{item::title}}</a>', '</li>' ), 'tpl_navigation_item_active' => array( '<li><a href="{{item::link}}" {{item::linktarget}} class="active">{{item::title}}</a>', '</li>' ), 'tpl_expand_navigation' => false, 'tpl_navigation_parent' => 0 ); ?>

Weiterhin gib es die Datei tpl_meintemplate/resources/public/css/default.css welche CSS-Stile enthalten kann. Da in dieser Dokumentation jedoch die CSS-Optimierungen beinhaltet, bleibt diese Datei leer. In der Datei tpl_meintemplate/resources/public/.htaccess ist immer folgender Inhalt enthalten. Dieser Inhalt sorgt dafr, dass der Browser Zugriff zu dem tpl_meintemplate/resources/public/-Ordner bekommt:
order deny,allow allow from all

Nun gibt es noch zwei weitere Dateien, welche auch immer den selben Inhalt haben (auer es fallen gestalterische oder strukturelle nderungen an). Die erste Datei tpl_meintemplate/resources/views/main.accesspassword.html wird angezeigt, wenn eine Seite mit einem Passwort geschtzt wurde. Eine Passwortabfrage wird hier per Formular umgesetzt. In dem folgendem HTML-Code darf alles verndert werden nur in dem Formular drfen keine Namen von Feldern oder anderen Elementen gendert werden! Die Zeile <?php echo $this->objFormhelper000->getErrorsAsString(); ?> gibt gegebenenfalls Fehlermeldungen aus und sollte somit auch nicht entfernt werden:
<h1><?php echo $this->_registry->arrGlobal['C_LANGUAGE']['accesspassword_title']; ?></h1> <p><?php echo $this->_registry->arrGlobal['C_LANGUAGE']['accesspassword_description']; ?></p> <?php echo $this->objFormhelper000->getErrorsAsString(); ?> <form action="" method="post" accept-charset="utf-8"> <input type="hidden" name="form_id" value="000" /> <input type="hidden" name="token" value="<?php echo $this->_registry->system->generateFormToken(); ?>" /> <label for="fld_accesspassword"><?php echo $this->_registry->arrGlobal['C_LANGUAGE']['fld_accesspassword']; ?></label><br/> <input type="password" name="fld_accesspassword" id="fld_accesspassword" value="" class="text" /> <input type="submit" name="submit" value="<?php echo $this->_registry->arrGlobal['C_LANGUAGE']['btn_confirm']; ?>" class="submit" /> </form>

Die letzte Datei tpl_meintemplate/resources/views/main.error_404.html wird angezeigt, wenn eine Seite nicht gefunden werden konnte (Fehler 404). Der folgende Inhalt ist eine Vorgabe und kann beliebig nach den eigenen Wnschen verndert werden:
<h1><?php echo $this->_registry->arrGlobal['C_LANGUAGE']['error_404_title']; ?></h1> <p><?php echo $this->_registry->arrGlobal['C_LANGUAGE']['error_404_description']; ?></p>

So das war alles ;-) Das oben erstellte Template kann in der Paketquelle heruntergeladen werden (Paket-ID: 1034), welches als Grundgerst fr weitere Templates genutzt werden kann: http://www.citus-cms.org/paketquelle/1034.html Wir wnschen viel Erfolg bei dem Erstellen und Nutzen von Templates fr CitusCMS! Bastian und Thomas, CitusCMS-Team