Ein Template für MODX Revolution erstellen

25-02-2014

MODX ist meiner Meinung ein ideales CMS (Content Management System) für einfache oder kleinere Webseiten.

Folgende Gründe sprechen dafür:

Es ist einfach zu installieren und zu benutzen.
Aus einer HTML/CSS-Vorlage lässt sich sehr schnell ein Template erstellen. (Das ist auch der Grund, warum es praktisch keine Templates für MODX gibt.)
Man hat die volle Kontrolle über die HTML-Ausgabe.
Es ist dank benutzerdefinierter Felder sehr flexibel. (Template-Variablen)

Hier erkläre ich kurz, wie man ein Template für MODX Revolution erstellt. Voraussetzung für diese Anleitung: MODX Revolution wurde installiert und man befindet sich im Manager (Administrationsoberfläche) der Webseite.

1.Schritt: BasisTemplate duplizieren

Vorgehen: Linker Bereich – Elemente – Templates – BasisTemplate (rechte Maustaste) – Template duplizieren – Titel vergeben und speichern.

Damit das gerade erstellte Template auch verwendet wird, muss man das Template noch jeder Seite (Ressource) zuweisen.

Vorgehen: Linker Bereich – Ressourcen – web – Home

Wenn man auf die Seite (Ressource) Home geklickt hat, sieht man rechts oben die Auswahlbox: Verwendetes Template. Dort das gerade erstellte Template wählen und speichern. Schon hat man ein Template erstellt und es der Seite Home zugewiesen. Als nächster Schritt, füllen wir die Seite (Ressource) Home noch mit Inhalt und schauen uns die Webseite an.

Vorgehen: Oberes Menü – Site – Webseite anzeigen

Schaut im Quellcode der Webseite, sieht man das nur HTML-Code ausgegeben wird den man im Template eingegeben hat. Dazu das Template nochmals anschauen und mit dem Quellcode vergleichen.

Ich habe im Template-Code für den Blogbeitrag die eckigen Klammern [] mit den runden Klammern () bei den Platzhaltern/Feldern ersetzt, sonst werden bei mir die jeweiligen Inhalte im Blogbeitrag angezeigt.

Das Template sieht im Moment so aus:

<html>
<head>
<title>((++site_name)) - ((*pagetitle))</title>
<base href="((++site_url))" />
</head>
<body>
((*content))
</body>
</html>

Es hat 4 sogenannte Felder/Platzhalter drin:

((*content)) steht für den Inhalt

((++site_url)) steht für die URL-Adresse

((++site_name)) steht für den Webseitennamen

((*pagetitle)) steht für den Seitentitel

Die offizielle Anleitung

2.Schritt: Chunks erstellen

Chunks sind Inhaltsblöcke, die man im Template oder direkt auf der Seite (Ressource) im Inhalt eingibt. Hier als Beispiel erstelle ich ein Chunk für den Footerbereich des Templates.

Vorgehen: Linker Bereich – Elemente – Chunks (rechte Maustaste) – neuer Chunk – Titel vergeben (Footer).

Im Chunk Code (HTML) folgenden Text einfügen:

Danach den Chunk speichern. Jetzt muss man noch auf den gerade erstellten Template gehen, den Code mit den Footer erweitern und speichern.

Das Template sieht im Moment so aus:

<html>
<head>
<title>((++site_name)) - ((*pagetitle))</title>
<base href="((++site_url))" />
</head>
<body>
((*content))
<footer>
(($Footer))
</footer>
</body>
</html>

(($Footer)) //steht für den Chunk, der Name sollte natürlich übereinstimmen mit den Namen den man dem Chunk gegeben hat.

Jetzt die Webseite anschauen und schon sieht man den neu erstellten Inhalt. Wie gesagt, man kann diesen Chunk auch im Inhalt auf der Seite Home ausgeben lassen. Dafür auf die Seite (Ressource) Home gehen und im Inhaltsbereich (($Footer)) eingeben, schon wird der Chunk auf der Seite Home angezeigt.

Schlussendlich helfen die Chunks dabei den Code übersichtlicher zu gestalten.

Weitere Informationen oder Verwendungszwecke für Chunks

3.Schritt: Snippets erstellen

Will man PHP Code im Template oder auf den Seiten verwenden, sollte man dafür Snippets erstellen. Hier als Beispiel will ich das aktuelle Jahr im gerade erstellten Chunk (Footer) ausgeben.

Vorgehen: Linker Bereich – Elemente – Snippets (rechte Maustaste) – Neues Snippet

Als Name schreibe ich: aktuellesJahr

Snippet Code (PHP):

<?php
echo date(''Y'');

Danach den Snippet speichern. Jetzt geht man auf den Chunk (Footer), ändert den Inhalt wie folgt:

<p>Copyright ((aktuellesJahr)) © Name eingeben</p>

Anstatt die Zahl 2014 hat man den Snippet ((aktuellesJahr)) eingefügt, die Schreibweise sollte korrekt sein. Alles speichern und Webseite anschauen.

Weitere Informationen und Verwendungszwecke für Snippets

4.Schritt: Template-Variablen erstellen

Template-Variablen sind benutzerdefinierte Felder, die man im Template einfügt als Platzhalter/Felder.

Wichtig: Damit Template-Variablen funktionieren müssen sie noch dem benutzten Template zugewiesen werden. Hier als Beispiel will ich für jede Seite (Ressource) einen unterschiedlichen Meta Element Description haben.

Vorgehen: Linker Bereich – Elemente – Template-Variablen (rechte Maustaste) – Neue Template Variable

Als Name schreibe ich: Description

Jetzt noch auf Template-Zugriff gehen und die Template Variable dem gewünschten Template zuweisen. Im Template fügt man noch folgenden Code ein:

((*Description)) // steht für die Template-Variable Description, auch hier sollte der Name übereinstimmen

Das Template sieht im Moment so aus:

<html>
<head>
<title>((++site_name)) - ((*pagetitle))</title>
<base href="((++site_url))" />
<meta name="description" content="((*Description))">
</head>
<body>
((*content))
<footer>
(($Footer))
</footer>
</body>
</html>

Jetzt erscheint, wenn man auf die Seite Home klickt, neben den Einstellungen der Menüpunkt Template-Variablen. Schon hat man ein Benutzerdefiniertes Feld erstellt. Das klappt aber nur, wenn die Template-Variable dem Template zugewiesen wurde und die Seite (Ressource) dieses Template benutzt.

Weitere Informationen und Verwendungszwecke für Template-Variablen

5.Schritt: Eine Navigation einfügen

Um eine Navigation in MODx einzufügen, ladet man das Snippet Wayfinder herunter.

Vorgehen: Oberes Menü - System – Package-Verwaltung - Extras herunterladen – als Anbieter modx.com wählen – speichern - Package-Browser - Wayfinder herunterladen – Wayfinder in MODX installieren (nicht vergessen)

Danach folgenden Code im Template einfügen:

((Wayfinder? &startId=`0`&level=`1`))

Das Template sieht danach so aus:

<html>
<head>
<title>((++site_name)) - ((*pagetitle))</title>
<base href="((++site_url))" />
<meta name="description" content="((*Description))">
</head>
<body>
<nav>
((Wayfinder? &startId=`0`&level=`1`))
</nav>
((*content))
<footer>
(($Footer))
</footer>
</body>
</html>

Falls man weitere Seiten erstellt hat und sie nicht im Menü erscheinen, geht man auf die entsprechende Seite und setzt ein Häkchen bei Veröffentlicht oder entfernt das Häkchen bei Nicht in Menüs anzeigen.

Weitere Informationen zu Wayfinder

6.Schritt: Dateien speichern

Zu guter Letzt fragt man sich vielleicht noch, wo die Dateien (CSS, JS, Bilder, usw..) gespeichert werden?

Ort: Linker Bereich – Dateien – Medien – assets

Man kann z.B. einen neuen Ordner templates erstellen und dort alle Dateien zum Template speichern.

Javi González