NanoCMS Themes

Aus Melin DokuWiki

Designwelten (Themes)

Bevor wir uns nun an die Erstellung der ersten Templates machen ist es wichtig sich mit einer weiteren Besonderheit von Melin vertraut zu machen: Themes (engl für Themenvorlagen).

Ein "Theme" ist eine Zusammenstellung aus Templates, Bildern und einer Navigationsstruktur die zur erstellung einer Website genutzt werden kann. Ein Theme kann viele verschiedene Templates enthalten.

Auch wenn Sie mit Melin nur eine einzige Website verwalten bieten Themes den enormen Vorteil der leichten Portabilität. Ein Theme enthält die komplette Logik einer Website. Kopiert man ein Theme von einem Melin zu einer anderen Melin-Installation so kann man dort direkt Inhalte eingeben um eine neue Website damit zu erstellen.

Bei einem Relaunch kann man das neue Design als eigenständiges Theme einspielen und die Inhalte von einem Theme in ein anderes kopieren.

Das Melin NanoCMS wird auf diese Weise voll Mandantenfähig da beliebg viele Homepages mit einem System verwaltet werden können. Jede einzelne Homepage verfügt über ein eigenes Design, eine eigene Navigation und eigene Inhalte.

In der Melin Hosting Version können die Benutzer für ihre Homepage aus allen vorrhandenen Themes eine Vorlage auswählen:

In der Standalone bezw. Add-On Version gibt es nur ein aktives Theme für alle Benutzer, das "Designvorlage wählen"-Menü ist hier ausgeblendet. Nur der Superuser hat Zugriff auf das Themes-Menü, da er die für alle Nutzer gültige Vorlage auswählen kann.

Nach der Auswahl eines Themes kann der User wählen ob er die Navigation verwenden will die im Theme definiert ist oder ob er die bisherige Navigation beibehalten willl.

Ein Theme entwerfen

Um ein neues Theme - und damit die Grundlage für eine neue Website - zu entwerfen werden vier Dinge benötigt

- Ein eindeutiger Name - Mindestens ein Eingabetemplate (HTML-Seite) - Eine Strukturdefinition (Kategorieliste bezw. Website-Navigation) - Ein Vorschau-Icon auf das Theme (GIF-Datei)

Die Entwicklung eines Themes ist ein manueller Prozess, wie jeder solide Website-Entwurf.

5. Der Name

Der Name eines Themes kann aus ein bis 32 Buchstaben bestehen, darf keine Sonde- oder Leerzeichen und keine Umlaute enthalten - nur Buchstaben, die Zahlen von null bis neun und einen Unterstrich (z.B. "hallo", "vorlage8", "gute_seite").

Es muß an zwei Stellen im System ein Verzeichnis mit dem Namen des Themes angelegt werden:

• SITE-DIR/cms/themes • DOCUMENT-ROOT/melin/images/cms/themes

Sie werden feststellen daß in den beschriebenen Ordnern bereits einige Themes vorhanden sind. Diese sind als Vorlage und Anregung gedacht.

6. Festlegen der Struktur

Es soll nun eine einfache Homepage für einen Fußballfan entworfen werden. Das Theme soll den Namen "soccer" erhalten. Damit Sie nicht alle Daten aus diesem Beispiel erneut eingeben müssen ist das Beispiel komplett in der Melin-Installation enthalten.

Zuerst müssen die Verzeichnisse anlegegt werden.

Das Home-Verzeichnis der Strukturdaten des Themes ist SITE-DIR/cms/themes. In diesem Verzeichnis wird das Unterverzeichnis "soccer" angelegt.

Der Strukturbaum sieht in etwa so aus:

Jetzt muß die Navigationsstruktur für die Website definiert werden. Die Navigationsstuktur im Theme ist nur ein Vorschlag der bei einer erstmaligen Auswahl übernommen wird. Nach der Auswahl kann die Navigationsstruktur über die Oberfläche verändert werden (die Theme-Datei wird hiervon allerdings nicht beeinflusst).

Die Navigationsstruktur wird in einer Datei mit dem Namen "structure.xml" festgelegt. Dies ist eine ASCII-Datei im XML-Format die mit einem beliebigen Texteditor erzeugt werden kann.

Hier ein Beispiel: Die Datei liegt direkt in dem Ordner der für das Theme erzeugt wurde:

EXAMPLE: SITE-DIR/cms/themes/soccer/structure.xml

<?xml version="1.0" encoding="UTF-8"?>

Hinweis: Zeilenumbrüche erscheinen nur durch physikalische Papiergrenzen, nicht durch den Code

Das obige Beispiel legt nur eine ganz einfache Struktur fest für eine einzige Seite - die Homepage (/index.html).

In der zweiten Zeile

wird der Name des Themes festgelegt wie er in der Melin-Weboberfläche angezeigt wird. Hier dürfen Leerzeichen und Sonderzeichen verwendet werden. Das "defaulttemplate" ist die Vorlage die für alle Seiten verwendet wird die keiner Vorlage zugeordnet werden können. Der Eintrag ist nur relevant wenn bestehende Auftritte migriert werden, am besten ohne Änderung übernehmen.

Die dritte Zeile definiert einen Navigationspunkt:

Die Bedeutung der Felder im Einzelnen:

ID Eine eindeutige ID für jede Zeile. Ein Integer-Wert. Die ID ist wichtig für die Reihenfolge der Darstellung (der kleinste Wert oben).

navlevel Die Menütiefe. Der Wert "1" entspricht einem Hauptmenüpukt, "2" einem Untermenü, etc.

directory Das Verzeichnis auf dem Zielsystem. In diesen Ordner wird die HTML-Seite gelegt (relativ zum Document-Root) wenn sie publiziert wird.

filename (optional) Der Name der HTML-Datei wenn sie in das Directory gelegt wird (meistens "index.php", "index.html"). Default ist index.html

name Ein Name für den Navigationspunkt wie er in den Melin-Menüs und meistens auch auf der Website verwendet wird.

Um eine etwas komplexere Website zu erzeugen wird eine strukturierte Navigation benötigt. Im "Soccer"-Beispiel könnte die Navigation so aussehen:

- Homepage - Saison - Teams o Champions League o 1. Liga o 2. Liga - Ergebnisse - Spielplan

Die structure.xml ergibt sich also zu:

BEISPIEL: SITE-DIR/cms/themes/soccer/structure.xml

<?xml version="1.0" encoding="UTF-8"?>

</theme>

Hinweis: Zeilenumbrüche erscheinen nur durch physikalische Papiergrenzen, nicht durch den Code

Hinweis Hosting-Version:

Es kann vorkommen daß die Benutzer später auf die Idee kommen das Theme zu wechseln wenn bereits einige Inhalte eingefüllt sind. Wenn es in dem neuen Theme kein Template mit demselben Namen wie im alten Theme gibt wird das Default Template verwendet. Daher ist es sehr zu empfehlen bei mehreren Themes die Template-Namen möglichst gleich zu halten

Eine bewährte Namensgebung ist:

Homepage homepage.tmpl Content default.tmpl

7. Templates und Bilder hinzufügen

Templates werden im selben Verzeichnis abgelegt in dem sich auch die structure.xml befindet. In diesem einfachen Beispiel benötigen wir nur ein Template: default.xml

Um dieses Template zu erzeugen speichern wir zuerst eine "normale" HTML-Seite im Design der gewünschten Website, wie sie mit einem beliebigen HTML-Editor erzeugt wird, unter SITE-DIR/cms/themes/soccer/default.tmpl ab.

Im nächsten Schritt müssen die Bild-URLs im Template angepasst werden. Es ist unvermeidlich hierfür absolute Pfade zu verwenden, da die erzeugten Seiten - zumindest innerhalb des Melin-Systems vor der Veröffnetlichung - an verschiedenen Stellen dargestellt werden.

Die Bilder selbst können an einer beliebigen Stelle auf dem Server liegen, jedoch empfehlen wir dringend, alle Dateien die zu einem Theme gehören in einem Unterordner des Themes abzuspeichern. Andernfalls wird es später ein großer Aufwand alle zu einem Theme gehörigen Dateien zu lokalisieren und zu löschen.

Das empfohlene Verzeichnis für alle Dateien zu einem Theme (Bilder, CSS-Stylesteets, etc) ist

DOCUMENT-ROOT/melin/images/cms/themes/THEME_DIR

In unserem Beispiel nennen wir das THEME_DIR "soccer" und legen dort alle Daten ab.

Alle weiteren Änderungsmöglichkeiten am Template werden im späteren Kapitel "Templates" beschrieben.

8. Das Vorschau-Icon

Als nächstes wird ein "Vorschau-Icon" benötigt. Dieses Icon wird innerhalb von Melin zur Auswahl des Themes angezeigt und ist immer 130x100 Pixel groß (GIF).

Das Vorschau-Icon soll dem Anwender einen ersten Eindruck vermitteln wie das Theme aussieht. In den Ordnern der mitgelieferten Themes befindet sich jeweils ein Muster.

Das Vorschau-Icon muß immer "preview.gif" heißen und exakt in

DOCUMENT-ROOT/melin/images/cms/themes/THEME_DIR/preview.gif

abgelegt werden.

THEME_DIR ist wieder derselbe Name wie der Verzeichnis-Zusatz in SITE-DIR/cms/theme/THEME_DIR in dem die structure.xml abgelegt wird ("soccer").

Das Vorschau-Icon unseres Muster-Themes wird also hier abgelegt:

DOCUMENT-ROOT/melin/images/cms/themes/soccer/preview.gif

9. Theme auswählen

Wenn alle Dateien in den enstprechenden Ordnern abgelegt wurden muß der Apache Tomcat Server neu gestartet werden da die Theme-Dateien aus Performace-Gründen im Cache ablegegt werden.

Das "Designvolage Wählen" Menü zeigt nun folgendes an:

Durch einen Klick auf den "Select"-Button kann die Vorlage aktiviert werden. In der Hostung-Version gilt die Auswahl nur für den User der die Auswahl vornimmt, in allen anderen Versionen kann nur der Superuser eine Auswahl treffen und legt das Theme für alle Nutzer gleichermaßen fest.

Technischs

Die Struktur eines Users befindet sich in SITE-DIR/cms/data/USER_ID/structure.xml. In der Standalone ist USER_ID immer "1".

Wenn ein User ein Theme auswählt werden folgende Schritte ausgeführt:

- Prüfen ob der User bereits eine structure-xml in seinem Profil hat („SITE-DIR/cms/data/USER_ID/“). Wenn nicht, wird die structure.xml hineinkopiert, ansonsten wird vorher nachgefragt.

- Öffnen von SITE-DIR/cms/data/USER_ID/profile.xml und Änderung der Zeile

so daß dort der Name des neu gewählten Themes steht. „sample“ ist der Name des Ordners in dem sich die Theme-Daten befinden (SITE-DIR/cms/themes/THEME_DIR).

- Wenn die profile.xml nicht existiert wird sie angelegt.

Von „http://www.melin.com/de/wiki/index.php/NanoCMS_Themes“