11.03.2008
MODx-Feature:
Volle Kontrolle über die HTML-Ausgabe
zur Übersicht 7 Kommentare von Bogdan
Im Gegensatz zu vielen anderen Content Management Systemen ist MODx so aufgebaut, dass der Web-Designer ohne Aufwand die Kontrolle über die HTML-Ausgabe hat. Web-Designer die wie ich Wert auf sauberes und semantisches HTML legen, wissen was für ein Graus es ist machtlos mit ansehen zu müssen wie $CMS große Mengen an Tabellen-Wüsten oder Div-Suppen erzeugt, die es dann per CSS „aufzuhübschen“ gilt.
Sehen wir uns mal ein einfaches MODx Template an.
MODx Template
<html>
<head>
<title>[(site_name)] - [*pagetitle*]</title>
</head>
<body>
<div class="head">
<h1>[(site_name)]</h1>
<h1>[*pagetitle*]</h1>
</div>
<div class="navigation">
[[Wayfinder? &startId=`0`]]
</div>
<div class="content">
<h2>[*longtitle*]</h2>
[*content*]
</div>
<div class="sidebar">
[[Ditto? &tpl=`sidebarTpl`]]
</div>
</body>
</html>
Die Angaben [(site_name)], [*pagetitle*], [*longtitle*] und [*content*] sind Platzhalter für die zuvor im Manager eingegebenen Inhalte der Seite. Soweit also alles unter Kontrolle. Der Aufruf der Snippets [[Wayfinder? &startId=`0`]] und [[Ditto? &tpl=`sidebarTpl` &startID=`5`]] könnte zunächst befürchten lassen hier wird nicht erwünschter HTML-Code eingeschleppt den man nur über Umwege anpassen kann. In unserem Fall gibt Wayfinder die Navigation der Seite aus und Ditto die Einträge in der Seitenleiste. Dank der für die Snippets definierbaren Templates lässt sich das sehr einfach bewerkstelligen.
Werfen wir wir einen Blick auf das Ditto Snippet-Template sidebarTpl.
Ditto Snippet-Template
<div class="sidebar_entry"> <h3>[+title+]</h3> [+content+] </div>
Mittels der Platzhalter [+title+] und [+content+] wird festgelegt an welcher Stelle der dynamische Inhalt dargestellt wird. Der Rest ist frei wählbares HTML für den passenden Aufbau, in unserem Fall der Seitenleiste.
Wayfinder erzeugt, wenn es kein Template als Parameter erhält, eine UL- / LI- / A-Liste. Will man die Ausgabe anders gestalten übergibt man Wayfinder wie Ditto den entsprechenden Template-Parameter und definiert das HTML selbst.
Somit könnte die HMTL-Ausgabe der gesamten Seite folgendermaßen aussehen.
HTML-Ausgabe
<html>
<head>
<title>Meine MODx-Seite - Snippets und Templates</title>
</head>
<body>
<div class="head">
<h1>Meine MODx-Seite</h1>
<h1>Snippets und Templates</h1>
</div>
<div class="navigation">
<ul>
<li><a href="eintrag-1">Eintrag 1</a></li>
<li><a href="eintrag-2">Eintrag 2</a></li>
<li><a href="eintrag-3">Eintrag 3</a></li>
</ul>
</div>
<div class="content">
<h2>Snippets und Templates - so geht es!</h2>
<p>Das ist nur ein Beispiel, der Text bleibt kurz.</p>
</div>
<div class="sidebar">
<div class="sidebar_entry">
<h3>Links</h3>
<ul>
<li><a href="http://modxcms.com">MODx</a></li>
<li><a href="http://medianotions.de">Medianotions</a></li>
<ul>
</div>
</div>
</body>
</html>
Das ist natürlich ein sehr überschaubares Beispiel, aber mit diesem Prinzip lassen sich auch komplexe Web-Projekte mit MODx realisieren.
Schön an diesem Zusammenspiel aus Snippet und Template ist, dass dieses Prinzip konsequent von den wichtigen Snippets eingehalten wird (und natürlich von vielen anderen weniger wichtigen). Dadurch bleibt es dem Web-Designer überlassen genau den HTML-Aufbau zu verwenden den er verwenden möchte und seinem Stil treu zu bleiben.
Kommentar schreiben
7 Kommentare
Bogdan zur Website
02.07.2008 14:30:11
Danke für das Feedback! Das ist witzig, dass du hier schreibst, ich habe erst vor kurzem eure sehr schön gemachte signalfeuer.info bewundert. Auch schneeballschl8.de gefällt mit sehr gut. Kompliment für die große Liebe zum Detail!
Gruß
Bogdan
Leif zur Website
02.07.2008 14:17:27
Aloa Bogdan,
schöner Artikel! Ist immer wieder schön etwas über MODx zu lesen. Bin gerade in XING über einen Artikel von Dir gestolpert. Schade eigentlich, dass MODx in Deutschland scheinbar noch eine Randerscheinung ist. Bin mir aber sicher, dass da in Zukunft noch einiges geht… ;-)
See’ya
Leif
Manuel Merz zur Website
22.03.2008 20:58:28
Jau mir wird jetzt immer mehr klar wieso sich mein Programmierer so auf das System eingearbeietet hat (mittlerweilen diverse Zusätze in den Core integriert). Für mich als Webdesigner war halt WordPress schon ein Non-Plus Ultra was die Möglichkeiten und die Einfachheit anbelangte. Dazu noch eine ausgereifte und gut erklärte Dokumentation und meinen Kunden konnte ich eine solide Basis zum selber pflegen anbieten. Dennoch werden wir uns wohl voll und ganz auf ModX konzentrieren, da laut meinem Programmierer und ich zitiere, "Mit ModX ist alles machbar" dem wohl wirklich so ist :)
Ich besuche deinen Blog auf jeden Fall weiter, gefällt mir vom Design sowie vom System dahinter ;)
Gruss
Manu
Bogdan Günther zur Website
22.03.2008 19:10:01
Tut mir leid, derzeit habe ich nicht mehr im Angebot, aber das wird sich hoffentlich im Laufe der Zeit ändern.
Unter http://www.modxcms.de/dokumentation.html gibt es ja einige deutsch-sprachige Dokumentationen zu MODx, aber für die Themen die du ansprichst braucht man auf jeden Fall Englisch-Kenntnisse und die Motivation sich die passenden Infos auch aus dem Forum raus zu picken.
Ich denke zum gegenwärtigen Zeitpunkt ist MODx vor allem für erfahrene Webdesigner interessant, die HTML, CSS, PHP und Englisch gut beherrschen und nach Alternativen zu Typo3 oder Joomla suchen. Als Einsteiger kann man sicher einfachere Websites mit MODx umsetzen, aber sobald es etwas mehr sein soll muss man sich Auskennen, um weiter zu kommen.
Das ist in sofern auch kein Problem, als das MODx nicht als Konkurrenz zu WordPress und Konsorten gedacht ist. Nicht umsonst steht ja schon im ersten Absatz auf modxcms.com: „It empowers developers and advanced users to give as much control as desired to whomever they desire for day-to-day website content maintenance chores.“
Aber da man MODx mit Snippets und Plugins so gut erweitern kann ist es gut denkbar, dass es eines Tages fix und fertige Lösungen z.B. für Blogs gibt, die keine weitreichenden Kenntnisse benötigen.
Manuel Merz zur Website
22.03.2008 17:43:20
Aber immer gerne doch :) hast noch mehr Artikel bezüglich ModX im Angebot? Ich find das System sackstark, jedoch scheitere ich andauernd an den Dokumentationen da nur wenige auf Deutsch erhältlich sind.
Artikel über folgende Themengebiete dürften von breiterem Interesse sein:
- Komplettes Blog System mit ModX entwerfen
- Meta Daten unter den Title Tag setzen
- News mit Ditto erstellen und Archiv mit Reflect ausgeben
- Was braucht es alles für eine Community Seite mit ModX
etc. etc.
Was meinst du?
Bogdan Günther zur Website
22.03.2008 17:06:34
Hallo Manuel,
stimmt da hat sich in meinem Beispiel ein Fehler eingeschlichen, danke für den Hinweis, ist korrigiert.
Manuel Merz zur Website
22.03.2008 12:21:44
Hallo
Ne kleine Frage bezüglich der Sidebar. Wieso verpackst du das in ein ul wenn du das doch gleich im Chunk definieren kannst? Ich seh das besagte ul nämlich nirgends bei deiner Ausgabe ;)