English Version medianotions.de RSS-Feed abonnieren

28.03.2009

MODx-Evolution-Tutorial (Update)

Themen: HTML, MODx | zuletzt bearbeitet: 28.03.2011


Danksagung

Dieses MODx-Evolution-Tutorial wurde ursprünglich auf nettuts.com veröffentlicht, und wird auf Blog.Medianotions in der deutschen Version dank der freundlichen Genehmigung des Autors Shane Sponagle bereitgestellt.

Über den Autor

Shane Sponagle ist freiberuflicher Web-Entwickler und MODx-Enthusiast aus Brasilien und bietet professionelle MODx-Entwicklung und -Beratung an.

Links

Update 7. September 2010

Ab der MODx-Version Evolution 1.0 hat sich die MODx-Terminologie teilweise geändert:

bis Version 0.9.6.3 ab Version Evolution 1.0
Dokument Ressource
Ressourcen Elemente
Ordner Container

Um MODx kennen zu lernen und zu verstehen sehen wir uns in diesem Tutorial die Schritte an die notwendig sind, um aus einer statischen HTML-Vorlage eine dynamische MODx-Website zu machen. Um die Dinge in einem größeren Zusammenhang zu sehen, werden wir einen großen Rundumschlag machen, dabei jedoch nur an der Oberfläche von dem kratzen, was tatsächlich mit MODx machbar ist.

Unser Projekt basiert auf einer standardmäßigen MODx-Installation. Die aktuelle MODx-Version kann man von der MODx-Website herunterladen.

Screenshot

MODx-Evolution-Tutorial (Update)

Damit wir uns auf die tatsächliche MODx-Entwicklung konzentrieren können, benutzen wir das HTML des „Prototyping With The Grid 960 CSS Framework“ Tutorials als unsere Basis-HTML Vorlage. Mit nur minimalem Aufwand kann jede HTML-Datei eine MODx-Vorlage werden. Auch das Einbeziehen des CSS-Frameworks in MODx ist kein Problem. Das Grundprinzip: funktioniert es außerhalb von MODx, dann funktioniert es auch innerhalb von MODx. Ich habe einige wenige geringfügige Modifikationen am HTML für dieses Tutorial vorgenommen, genauso wie ich auch eine einfache Inhalts-Seite für die Startseite gebaut habe. Wir werden mit den folgenden Layout-Vorlagen beginnen:

Screenshot

MODx-Evolution-Tutorial (Update)

Dies sind die Schlüsselthemen, die wir behandeln werden:

  • Die Grundlagen: Erste Schritte
  • Der Manager: Vorlagen und Dokumente
  • Platzhalter: Dynamischer Inhalt
  • Snippets: Für intelligente Navigation
  • Chunks: Wiederverwendbarer Code
  • Template-Variablen: Benutzerdefinierte Felder
  • Hierarchie: Eltern und Kinder
  • Ditto: Inhalte wiederverwenden
  • Fazit

Die Grundlagen: Erste Schritte

Der erste Schritt besteht darin, die HTML-Dateien, die als MODx-Vorlage benutzt werden sollen, vorzubereiten. Dafür müssen die Dateipfade angepasst werden, um die endgültige Dateistruktur, die wir nutzen werden, wiederzugeben. MODx hat einen Ordner /assets/, in dem die zur Website zugehörigen Dateien gespeichert sind, den wir nutzen werden. Man kann jedoch die Dateien an jedem beliebigen Ort ablegen. Dies ist eine der Eigenschaften, die es so einfach macht MODx in den eigenen, bereits vorhandenen Arbeitsablauf einzubinden.

Screenshot

MODx-Evolution-Tutorial (Update)

Ich habe die Basisbilder für die Vorlage in den bereits vorhandenen /images/-Ordner hochgeladen und dann einen neuen Ordner namens „css“ angelegt, in den ich die CSS-Dateien hochgeladen habe. Im Moment beschäftigt uns nur die Seitenstruktur und nicht der Inhalt. Deswegen müssen wir vorerst nur die Pfade für die CSS-Dateien und das Logo-Bild anlegen. Der restliche Inhalt wird mittels MODx eingefügt.

Quelltext

 1. <head>  
 2. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
 3.   
 4. <title>Magazine 960 — Prototype</title>  
 5. <link rel="stylesheet" type="text/css" media="all" href="assets/css/reset.css" />  
 6.   
 7. <link rel="stylesheet" type="text/css" media="all" href="assets/css/960.css" />  
 8. <link rel="stylesheet" type="text/css" media="all" href="assets/css/style.css" />  
 9.   
10.</head>  
11. <body>  
12.   
13. <div class="container_12">  
14.     <!-- Header Div -->  
15.     <div class="grid_12">  
16.         <a href="#">[!img? &name=`assets/images/header.png" alt=""/></a>  
17.   
18.    </div>

Wir sind noch nicht ganz fertig mit den HTML-Dokumenten, können jedoch vorerst für den Rest des Ablaufs im Rahmen von MODx weiterarbeiten.

Der Manager: Vorlagen und Dokumente

Nach der Anmeldung mit Benutzername und Passwort öffnet sich der Startbereich des Managers, bestehend aus drei Teilen:

Screenshot

MODx-Evolution-Tutorial (Update)
  1. dem oberen Admin-Menü;
  2. dem Dokumentbaum links;
  3. dem Bearbeitungsbereich rechts, der sich entsprechend der ausgewählten Funktion ändert.

Screenshot

MODx-Evolution-Tutorial (Update)

Wir wollen nun unsere HTML-Dateien als Vorlagen in die MODx-Umgebung einfügen. Wählen Sie Ressourcen > Ressourcenverwaltung aus dem Admin-Menü.

Screenshot

MODx-Evolution-Tutorial (Update)

Wählen Sie den Reiter „Templateverwaltung“ aus und klicken Sie auf den Link „Neues Template“ um eine neue Vorlage anzulegen. Wählen Sie einen Namen und eine Beschreibung für Ihre Vorlage und fügen Sie optional die Vorlage zu einer Kategorie hinzu, bzw. erstellen Sie eine eigene Kategorie. Kategorien helfen Ihnen dabei, den Überblick über die Ressourcen zu behalten. In unserem Beispiel verwenden wir „960“ als Kategorienamen. Fügen Sie das HTML in das Textfeld „Template-Code (html)“ ein und klicken Sie auf „Speichern“.

Screenshot

MODx-Evolution-Tutorial (Update)

Wiederholen Sie diesen Ablauf mit der Inhaltsvorlage. Nun sollten wir unsere zwei neuen Vorlagen haben, sowie das „Minimal Template“, welches bei der MODx-Installation automatisch angelegt wird.

Screenshot

MODx-Evolution-Tutorial (Update)

Als nächstes werden wir ein paar MODx-Dokumente (also Inhaltsseiten) erstellen, um die Grundstruktur unserer Website abzubilden. Fangen wir an, indem wir das bereits vorhandene Dokument, das während der Installation erstellt wurde, ändern. Rechts-klicken Sie im Dokumentbaum (linke Spalte) auf den Dokumentennamen, um das Kontextmenü angezeigt zu bekommen. Im Menü wählen Sie die Option „Bearbeiten“.

Screenshot

MODx-Evolution-Tutorial (Update)

Im Bearbeitungsbereich rechts wird jetzt das ausgewählte Dokument im Bearbeitungsmodus geladen. Die Dokument-Daten sind in Abschnitte nach Funktion und Inhalt unterteilt. Ganz oben befinden sich die Dokumenteigenschaften, welche die Parameter der Seiten beinhalten, sowie die Statusinformation.

Screenshot

MODx-Evolution-Tutorial (Update)

Als nächstes haben wir den Bereich „Inhalt des Dokuments“ mit dem Hauptinhaltsfeld des Dokuments. Das Inhaltsfeld zeigt Inhalt optional mit dem vorinstallierten Rich Text Editor TinyMCE oder als einfachen Text an.

Screenshot

MODx-Evolution-Tutorial (Update)

Schließlich wäre da noch der Bereich „Template-Variablen“. MODx’ Antwort auf die Custom Content Felder sind die Template-Variablen. Wir werden das Ganze später noch in Aktion sehen.

Screenshot

MODx-Evolution-Tutorial (Update)

Ok, zurück zum Wesentlichen. Das vorhandene Dokument kann umbenannt werden und dann unsere Homepage sein. Um das zu erreichen, tippen Sie „Home“ in das Feld „Titel“, dann löschen Sie den Text, der im Feld „Langer Titel“ steht und löschen ebenso den Text im Feld „Menü-Titel“ (für dieses Tutorial werden wir diese Felder nicht nutzen). Als nächstes wählen Sie die Vorlage, die wir für die Homepage angelegt hatten aus dem Template-Pull-Down-Menü (Anmerkung: beim Wechseln von Vorlagen erhalten Sie eine Warnung, dass die Seite neu geladen wird).

Screenshot

MODx-Evolution-Tutorial (Update)

Sobald dies abgeschlossen ist, klicken Sie auf sichern – das Dokument im Dokumentbaum heisst nun „Home“.

Screenshot

MODx-Evolution-Tutorial (Update)

Als nächstes werden wir die übrigen Top-Level-Inhaltsseiten hinzufügen. Klicken Sie auf das Icon „Neues Dokument“ in der Toolbar direkt über dem Dokumentbaum um ein neues, leeres Dokument auf der Basisebene anzulegen.

Screenshot

MODx-Evolution-Tutorial (Update)

Im Titel-Feld, tippen Sie „Articles“ und wählen die Content-Vorlage aus, die wir vorhin angelegt haben. Da wir an einem neuen Dokument arbeiten, ist das Dokument per Voreinstellung nicht veröffentlicht. Bevor wir es speichern, müssen wir im Reiter „Seiteneinstellungen“ die Checkbox „Veröffentlicht“ aktivieren.

Screenshot

MODx-Evolution-Tutorial (Update)

Bevor Sie das Dokument sichern, aktivieren Sie den „weiter hinzufügen“ Radio-Button. Sie finden diesen unter dem oberen Sichern-Button. Dadurch wird automatisch ein weiteres Dokument erstellt nachdem Sie das aktuelle gesichert haben, was eine angenehme Zeitersparnis ist, wenn man mehrere Dokumente hinzufügt.

Screenshot

MODx-Evolution-Tutorial (Update)

Wiederholen Sie diese Schritte für die übrigen Top-Level-Menüeinträge „Topics“, „About“, „Editors“ und „Contact“. Wenn Sie Ihren Dokumentbaum erstellt haben, wird er etwa so aussehen (die Zahl in Klammern hinter dem Dokumentnamen ist die ID-Nummer des Dokuments, wir werden sie später noch brauchen):

Screenshot

MODx-Evolution-Tutorial (Update)

Bis zu diesem Punkt haben wir die Grundlagen für unser Projekt gelegt und haben nur wenig von dem gesehen, was MODx kann (obwohl es schon eindrucksvoll ist eine einfache Seite zu erstellen). Eine kurze Zusammenfassung:

  • Wir haben zwei HTML-Templates;
  • wir haben die Dateien für unsere MODx-Installation hochgeladen;
  • und wir haben eine Anzahl von Top-Level-Dokumenten angelegt.

Glauben Sie mir, es hat viel länger gedauert bis zu dieser Stelle zu lesen, als es dauern würde es tatsächlich zu tun. Ein Entwickler, der mit MODx vertraut ist, kann alles was wir bisher getan haben in 10 Minuten oder weniger umsetzen.

Und jetzt wird es interessant. Nun da wir unsere Grundstruktur haben, können wir anfangen mit MODx zu arbeiten.

Platzhalter: dynamischer Inhalt

Wir werden nun zu unseren Templates zurückgehen und Platzhalter für den dynamischen Inhalt hinzufügen. Wie wir bereits während der Erstellung der neuen Dokumente gesehen haben, bietet MODx eine Anzahl von Inhaltsfeldern, die wir als Basis für die Erstellung unserer Dokumente nutzen können. Jedes dieser Inhaltsfelder kann dynamisch, mit Hilfe von Platzhaltern, zu der von MODx bereitgestellten HTML-Ausgabe eingebunden werden. Die Platzhalter für die so genannten dokumentspezifischen Template-Variablen werden durch folgende Syntax kenntlich gemacht: [*variable-name*]. Wenn wir also das Inhalts-Feld hinzufügen wollten, so würden wir [*content*] als Platzhalter verwenden.

MODx hat auch Platzhalter für globale Seitenvariablen wie die URL oder den Seitennamen. Seitenvariablen sind durch die folgende Syntax gekennzeichnet: [(var-name)]. Wir können zum Beispiel Seitentitel und Seitennamen dynamisch durch die zugehörigen Platzhalter einfügen lassen. Hier ist unser original Title-Tag:

Source Code

 1. <title>Magazine 960 — Prototype</title>   

Und das fügen wir mit den durch MODx zur Verfügung gestellten Platzhaltern ein:

Quelltext

 1. <title>[*pagetitle*] — [(site_name)]</title>  

Das ganze wird dann wie folgt dargestellt:

Screenshot

MODx-Evolution-Tutorial (Update)

Unser nächster Schritt: wir werden mit dem Content-Template arbeiten indem wir die Platzhalter für den dynamischen Inhalt einfügen. Sie können entweder die Vorlage direkt im Manager öffnen oder einen externen Code-Editor Ihrer Wahl nutzen und den fertiggestellten Code in MODx einfügen (Anmerkung: wenn Sie möchten können Sie auch Ihre Template-Dateien als extern einzubindende Templates ablegen, wir behandeln das Thema allerdings nicht in diesem Tutorial.).

In unserem Template werden wir dynamischen Inhalt im Hauptteil sowie im Fußbereich und auch im Kopfbereich verwenden. Und so sollte der Kopfbereich aussehen, nachdem die Platzhalter hinzugefügt wurden:

Quelltext

 1. <head>  
 2.     <meta http-equiv="content-type" content="text/html; charset=[(modx_charset)]" />  
 3.   
 4.     <title>[*pagetitle*] — [(site_name)]</title>  
 5.     <base href="[(site_url)]" />  
 6.     <link rel="stylesheet" type="text/css" media="all" href="assets/css/reset.css" />  
 7.   
 8.     <link rel="stylesheet" type="text/css" media="all" href="assets/css/960.css" />  
 9.     <link rel="stylesheet" type="text/css" media="all" href="assets/css/style.css" />  
10.   
11. </head>   

Bitte beachten Sie, dass ich das Bbase-Tag mit dem [(site_url)]-Platzhalter hinzugefügt habe und ebenso den [(modx_charset)] -Platzhalter um den Zeichensatz festzulegen. MODx benötigt den Base-Tag für relative Pfade in Verbindung mit den benutzerfreundlichen URLs. Anmerkung: site_name und modx_charset sind in der MODx-Konfiguration unter Werkzeuge / Konfiguration konfigurierbar.

Screenshot

MODx-Evolution-Tutorial (Update)

Für den allgemeinen Inhaltsteil fügen wir die Platzhalter für den Inhalt und den Titel der Website hinzu:

Quelltext

 1. <!-- Content Section -->  
 2. <div id="content" class="grid_7">  
 3.     <div>  
 4.     <h1>[*pagetitle*]</h1>  
 5.     [*content*]  
 6.     </div>  
 7.   
 8. </div>   

Und zum Schluss fügen wir den Titel der Seite zur Fußzeile hinzu:

Quelltext

      1. <div id="legal">  
      2.     <p>© [(site_name)]</p>  
      3. </div>

Speichern Sie die geänderte Vorlagen-Datei. Wenn Sie nun eine der Inhaltsseiten in der Vorschau ansehen, werden Sie sehen, dass die Seite den zugehörigen Titel anzeigt.

Screenshot

MODx-Evolution-Tutorial (Update)

Snippets für eine intelligente Navigation

Als nächstes sehen wir uns die Verwendung von MODx-Snippets am Beispiel des Wayfinder-Snippets an, das wir verwenden um eine intelligente Navigation für unsere Website zu erstellen. Und mit „intelligent“ meine ich eine Navigation, die erkennt, wenn wir ein neues Dokument hinzufügen, dem aktiven Menüpunkt passende CSS-Klassen hinzufügt um eine Hervorhebung zu ermöglichen oder die Ausgabe von von Unterdokumenten steuert.

Die in MODx am weitesten verbreitete Methode für das Gestalten einer Navigation ist das Wayfinder-Snippet. Ein MODx-Snippet ist im Prinzip ein PHP-Skript, das ausgeführt wird, wenn die Seite aufgerufen wird. Das Hinzufügen eines Snippets zu Ihrem Dokument ist im Prinzip das Gleiche wie das Einbetten einer PHP-Funktion in Ihre Website. Snippets sind im Standard-PHP-Code geschrieben, so dass jeder, der PHP beherrscht, einfach seine eigenen Snippets erstellen kann. MODx verfügt auch über eine leistungsstarke API, welche auf einfache Weise die Nutzung von MODx-Klassen und den Zugriff auf die MODx-Datenbank ermöglicht.

Der Wayfinder gibt, je nach der Hierarchie im Dokumentbaum, die Seitenstruktur aus. Standardmäßig erzeugt der Wayfinder die Ausgabe als verschachtelte UL-Liste, was gleichzeitig auch der Standard CSS-gestalteter Menüs ist. Der Wayfinder erlaubt Ihnen jedoch jeden Teil der Ausgabe mit Hilfe von Template-Chunks anzupassen. In anderen Worten: Sie können quasi jede Ausgabe bekommen die Sie brauchen indem Sie eigene Template-Chunks verwenden, die der Wayfinder dann benutzt. Auch wenn Sie mehrere Menüs auf ein und derselben Seite haben, kann jedes einzelne ein eigenes Template verwenden.

Snippets sind durch die folgende Syntax gekennzeichnet: [[Snippet-Name]] und können zusätzliche Parameter für die Verarbeitung beinhalten: [[Snippet-Name? &param1=`value` &param2=`value`]]. MODx behandelt jeden Parameter als Input-Variable und macht sie nahtlos für den Einsatz innerhalb der Snippets verfügbar. Snippets sind nicht Teil von MODx, sondern Add-Ons die innerhalb von MODx operieren. Snippets wie der Wayfinder werden von Mitgliedern der MODx-Community programmiert und weiter entwickelt.

In unserer ürsprünglichen HTML-Vorlage ist die Navigation wie folgt strukturiert:

Quelltext

 1. <!-- Navbar Div -->  
 2. <div class="grid_12" id="navbar">   
 3.         <ul>  
 4.   
 5.         <li class="active"><a href="#" title="">Articles</a></li>  
 6.         <li><a href="#" title="">Topics</a></li>  
 7.   
 8.         <li><a href="#" title="">About</a></li>  
 9.         <li><a href="#" title="">Editors</a></li>  
10.   
11.         <li><a href="#" title="">Contact</a></li>  
12.     </ul>  
13. </div>  
14. <div class="clear"> </div>  
15.   
16. <!-- End Navbar Div -->

Die HTML-Struktur mit dem Wayfinder umzusetzen ist sehr einfach, wir benötigen nicht einmal ein eigenes Template-Chunk. Um das dynamisch erstellte Menü zu unserem Template hinzuzufügen, ersetzen wir die oben gezeigte statische Navigation mit dem folgenden Wayfinder Befehl:

Quelltext

   1. [[Wayfinder? &startId=`0` &level=`1`]]  

Der Parameter startId=`0` zeigt an, bei welchem Dokument das Menü beginnt und indem wir es auf 0 setzen teilen wir Wayfinder mit, die Dokumente in der ersten Ebene der Dokumenthierarchie zu verwenden. &level=`1` bewirkt, dass nur eine Ebene berücksichtigt wird, also keine Sub-Menüs angezeigt werden. Nach dem Einfügen des Snippets sollte das Template wie folgt aussehen:

Quelltext

 1. <!-- Navbar Div -->  
 2. <div class="grid_12" id="navbar">  
 3.     [[Wayfinder? &startId=`0` &level=`1`]]  
 4. </div>  
 5.   
 6. <div class="clear"> </div>  
 7. <!-- End Navbar Div -->   

Sehen Sie sich die Vorschau des Inhaltsdokuments an und Sie werden bemerken, dass die Navigation nun aufgebaut und die aktuelle Seite als aktiv im Menü angezeigt wird. Das passiert durch die Wayfinder-HTML-Ausgabe von class="active" im entsprechenden LI-Tag.

Screenshot

MODx-Evolution-Tutorial (Update)

Sie werden auch sehen, dass die Homepage ebenso im Menü vorhanden ist, doch genau da wollen wir sie nicht. Kein Problem, bearbeiten Sie die Homepage (Rechts-Klick auf das Home-Dokument im Dokumentbaum) und wählen Sie „Dokument bearbeiten“. Entfernen Sie das Häkchen bei „Im Menü anzeigen“ und speichern Sie das Dokument.

Screenshot

MODx-Evolution-Tutorial (Update)

Wenn Sie nun zur Seite zurückgehen und diese neu laden, ist der Home-Link nicht mehr sichtbar.

Screenshot

MODx-Evolution-Tutorial (Update)

Unsere Haupt-Navigation im Template ist nun komplett. Aber halt! Was ist mit der Homepage? Müssen wir das alles für jedes Template wiederholen? Die Antwort ist natürlich nein.

Chunks: Wiederverwendbarer Code

In MODx ist ein Chunk ein Teil eines wiederverwendbaren HTML-Codes ohne PHP. Chunks können verwendet werden um beliebige Inhalte oder HTML-Schnipsel zu speichern, die an mehreren Stellen verwendet werden. Das ist sehr praktisch um zum Beispiel den Kopf- und Fußbereich in einem Template zu verwalten ohne nachträgliche Änderungen mehrfach vornehmen zu müssen. In unserem Beispiel, mit nur zwei Templates, ist das nicht ausschlaggebend. Stellen Sie sich jedoch vor, Sie hätten mehrere Templates bei denen ein gemeinsames Element aktualisiert werden muss. Indem Sie einen Chunk verwenden, müssen Sie es nur einmal aktualisieren und überall wo der Chunk eingesetzt ist, wird der aktuelle Inhalt eingefügt. Ein Chunk hat folgenden Syntax: {{Chunk-Name}}

Screenshot

MODx-Evolution-Tutorial (Update)

Ein Chunk zu erstellen ist so ähnlich wie das Erstellen eines Templates. Gehen Sie im Manager zu Ressourcen > Ressourcenverwaltung und wählen Sie den Chunks-Tab.

Screenshot

MODx-Evolution-Tutorial (Update)

Geben Sie dem Chunk einen eindeutigen Namen und eine Beschreibung und geben Sie das HTML in das Feld „Chunk-Code (html) ein. Wir werden zwei Chunks erstellen, einen für den Kopfbereich und einen für den Fußbereich. Im Chunk für den Kopfbereich werden wir alles oberhalb des Inhaltsbereichs einfügen und es „site-header“ nennen.

Quelltext

 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 2.   
 3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
 4. <head>  
 5. <meta http-equiv="content-type" content="text/html; charset=[(modx_charset)]" />  
 6.   
 7. <title>[*pagetitle*] — [(site_name)]</title>  
 8. <base href="[(site_url)]" />  
 9. <link rel="stylesheet" type="text/css" media="all" href="assets/css/reset.css" />  
10.   
11. <link rel="stylesheet" type="text/css" media="all" href="assets/css/960.css" />  
12. <link rel="stylesheet" type="text/css" media="all" href="assets/css/style.css" />  
13.   
14. </head>  
15. <body>  
16.   
17. <div class="container_12">  
18.     <!-- Header Div -->  
19.     <div class="grid_12">  
20.         <a href="#"><img src="assets/images/header.png" alt=""/></a>  
21.   
22.     </div>  
23.     <div class="clear"> </div>  
24.     <!-- END HeaderDiv -->  
25.       
26.     <!-- Navbar Div -->  
27.     <div class="grid_12" id="navbar">  
28.   
29.         [[Wayfinder? &startId=`0` &level=`1`]]  
30.     </div>  
31.     <div class="clear"> </div>  
32.     <!-- End Navbar Div -->

Für den Fußbereichs-Chunk werden wir diesen Prozess wiederholen, das HTML beim DIV-Tag mit der ID „footer“ beginnend kopieren und den Chunk „site-footer“ benennen.

Quelltext

 1.     <!-- Footer -->  
 2.     <div class="grid_12" id="footer">  
 3.         <div class="grid_4 alpha">  
 4.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>  
 5.   
 6.         </div>  
 7.       
 8.         <div class="grid_4">  
 9.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>  
10.         </div>  
11.       
12.         <div class="grid_4 omega">  
13.   
14.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>  
15.         </div>      
16.     </div>  
17.   
18.     <div class="clear"> </div>  
19.     <!-- End Stories Area -->         
20.   
21. </div>  
22. <div id="legal">  
23.     <p>© [(site_name)]</p>  
24. </div>  
25. </body>  
26. </html>

Nun können wir im Template das HTML für den Kopf- und Fußbereich mit den entsprechenden Chunks ersetzen. Sobald Sie das gemacht haben, sollte das Template in etwa so aussehen:

Quelltext

 1. {{site-header}}  
 2.       
 3.     <!-- Content Section -->  
 4.     <div id="content" class="grid_7">  
 5.   
 6.         <div>  
 7.         <h1>[*pagetitle*]</h1>  
 8.         [*content*]  
 9.         </div>  
10.     </div>  
11.       
12.     <div class="grid_5">  
13.   
14.         <div>  
15.             <img class="topSection" src="assets/images/poster.jpg" alt="" id="poster"/>  
16.         </div>  
17.   
18.         <div class="spacer"></div>  
19.         <div class="listing">  
20.         <h2>Recent Articles</h2>  
21.         <p><strong><a href="#" title="">Article Title</a></strong></p>  
22.   
23.         <p><strong><a href="#" title="">Article Title</a></strong></p>  
24.         <p><strong><a href="#" title="">Article Title</a></strong></p>  
25.   
26.         <p><strong><a href="#" title="">Article Title</a></strong></p>  
27.         </div>  
28.     </div>  
29.   
30.       
31.     <div class="clear"> </div>  
32.     <!-- End TopSection -->  
33.       
34.   
35.       
36.     <!-- Spacer -->  
37.     <div class="grid_12 spacer">  
38.     </div>  
39.   
40.     <div class="clear"> </div>  
41.     <!-- End Spacer -->  
42.       
43. {{site-footer}}   

Nun können wir die gleichen Chunks für das Home-Template verwenden und die komplette Arbeit die wir mit der Inhaltsvorlage hatten übertragen. Dies wird uns helfen, wenn wir die Templates aktualisieren. Sobald diese Schritte umgesetzt sind werden Sie bemerken, dass die erstellten Chunks korrekt in beiden Templates eingesetzt werden.

Screenshot

MODx-Evolution-Tutorial (Update)

Während Sie die Site angeschaut und geprüft haben, haben Sie eventuell bemerkt, dass etwas fehlt. Laut Design sollte auf jeder Seite ein Bild sein. Jedoch gibt es keine dokumentspezifische Template-Variable für das Hinzufügen eines Bildes. Natürlich kann man Bilder einfügen indem man den Richt-Text-Editor verwendet, wenn das Bild Teil des Inhalts ist. Jedoch ist unser Bild in einer separaten Spalte, getrennt vom Inhaltsfeld. Und man hört sich selbst sagen: „Hätten wir doch nur einen Weg um eigene Template-Variablen einzufügen.“

Template-Variablen: Benutzerdefinierte Felder für alle Gelegenheiten

Das Konzept der Template-Variablen ist in keiner Weise neu und viele Content Management Systeme verwenden eine Form von so genannten Custom-Fields. In MODx heißt die Lösung Template-Variablen (oder TV). Diese benutzerdefinierten Felder können für spezielle Ausgabe-Typen formatiert werden, sie können eine dynamisch erstellte Liste ausgeben oder ein Datenraster auf einer Anfrage basierend ausgeben. Im Prinzip gibt es für was auch immer Sie brauchen eine Template-Variable. MODx stellt sicher, dass die benutzerdefinierten Felder stets griffbereit sind und sich nahtlos an jeder beliebigen Stelle verwenden lassen.

Template-Variablen sind mit dem Dokument über das verwendete Template verknüpft, daher der Name Template-Variable. Sie können also Gruppen von TVs für die unterschiedlichen Bereiche Ihrer Seite abhängig der verwendeten Templates anlegen. Sie können ein Set von Template-Variablen für einen Bereich verwenden und ein weiteres Set für einen anderen und trotzdem noch gemeinsame Template-Variablen für beide Bereiche verwenden. Template-Variablen nutzen die gleiche Syntax wie die dokumentspezifischen Template-Variablen: [*Template-Variable*]

Screenshot

MODx-Evolution-Tutorial (Update)

Wir werden nun eine Template-Variable für ein Bild anlegen. Diese Template-Variable wird ein Input Feld erzeugen, das den MODx-Resource-Manager aufruft – ein Datei-Browser mit der Möglichkeit neue Bilder hochzuladen. MODx verwendet derzeit übrigens den Datei-Browser MCPuk.

Um eine neue Template-Variable anzulegen, gehen Sie im Manager zu Ressourcen > Ressourcenverwaltung, wählen Sie den Tab „Template Variablen“ und klicken auf den Link „Template Variable erstellen“. Schreiben Sie einen eindeutigen Namen in Feld „Name der Variablen“. Dieser Name wird genutzt um die TV und den Platzhalter zu identifizieren. Wir werden unsere Template-Variable „image“ nennen und diese mit dem [*image*] Platzhalter aufrufen. Das Feld für die Bezeichnung wird für einen aussagekräftigen Titel genutzt, der als Label für die Template-Variable zusammen mit der Beschreibung verwendet wird. Für den Eingabetyp wählen wir die Option „Image“ aus dem Pull-Down-Menü aus. Optional lässt sich auch eine Ausgabeform unter „Objektauswahl“ festlegen, für unser Tutorial werden wir von dieser Möglichkeit jedoch keinen Gebrauch machen.

Screenshot

MODx-Evolution-Tutorial (Update)

Als letzten Schritt verknüpfen wir die Template-Variable mit dem Template, in dem wir sie verwenden wollen. Dafür setzen wir einfach das Häkchen für das entsprechende Template im Abschnitt „Template Berechtigungen“. In unserem Projekt haben nur ein Bild für den Inhaltsbereich, so dass wir das Home-Template berücksichtigen müssen.

Screenshot

MODx-Evolution-Tutorial (Update)

Wahlweise können wir auch die Template-Variable auf eine bestimmte Benutzergruppe begrenzen. Das ist sehr praktisch wenn das Bearbeiten der Template-Variable nur bestimmten Benutzern erlaubt sein soll.

Speichern Sie die Template-Variable und Sie sollten sie nun in der Übersicht aufgelistet sehen.

Screenshot

MODx-Evolution-Tutorial (Update)

Wenn Sie nun ein Inhaltsdokument bearbeiten, haben Sie Zugang zur neu angelegten Template-Variable für Bilder. Klicken Sie auf den Einfügen-Button um den zuvor erwähnten Datei-Browser zu öffnen.

Screenshot

MODx-Evolution-Tutorial (Update)

Sobald das Bild im Datei-Browser ausgewählt ist, wird der Bildpfad im Input-Feld eingesetzt und das Bild direkt im Manager unter der Template-Variable angezeigt. Obwohl MODx selbst über keine Bildbearbeitungsmöglichkeiten verfügt, gibt es mehrere Add-Ons für die Größenanpassung und Thumbnail-Erstellung, die nahtlos mit Template-Variablen funktionieren.

Screenshot

MODx-Evolution-Tutorial (Update)

Als nächstes fügen wir unsere Bild-TV in das Content-Template ein, indem wir den statischen Bildpfad mit dem Platzhalter für die Template-Variable ersetzen:

Quelltext

 1. <div>  
 2.     <img class="topSection" src="[*image*]" alt="" id="poster"/>  
 3. </div>

Damit ist die allgemeine Gestaltung der Site nun abgeschlossen. Wenn Sie wollen können Sie nun Ihren Text und Ihre Bilder in die Inhaltsseiten einfügen. Nachdem Sie ein wenig Inhalt und einige Bilder eingefügt haben, sollte Ihre Seite langsam Gestalt annehmen. Wenn Sie die Seite nun anschauen, werden Sie feststellen, dass sie dem ursprünglichen Prototyp sehr ähnelt (was sie auch sollte).

Screenshot

MODx-Evolution-Tutorial (Update)

Hierarchie: Von Eltern und Kindern

Um mit diesem letzten Abschnitt loslegen zu können, brauchen wir mindestens 5 Dokumente, mit denen wir arbeiten können. Wir haben gesehen, wie man Dokumente anlegt, das ist also nichts neues. Dieses Mal jedoch werden wir die Dokumente als Kinder (also Unterdokumente) der existierenden Artikel anlegen. Hier erweist sich der Dokumentbaum als nützlich, da er anschaulich die Hierarchie von Dokumenten und Unterdokumenten abbildet.

Melden Sie sich im Manager an und rechts-klicken Sie im Dokumentbaum das Dokument „Artikel“ um das Kontextmenü aufzurufen. Wählen Sie „Dokument erstellen“ aus den Menüoptionen um ein Dokument als Unterdokument anzulegen und die Bearbeiten-Oberfläche zu öffnen.

Screenshot

MODx-Evolution-Tutorial (Update)

Stellen Sie sicher, dass das Dokument das Content-Template verwendet und füllen Sie die Inhaltsfelder mitsamt dem der Bild-TV aus. Anschließend speichern Sie das Dokument.

Screenshot

MODx-Evolution-Tutorial (Update)

Wenn Sie sich nun den Dokumentbaum anschauen werden Sie ein + neben dem Artikel-Dokument sehen. Das bedeutet, dass dieses Dokument Kinder oder Unterdokumente hat. Klicken Sie zum Aufklappen auf das + und das gerade angelegte Unterdokument wird angezeigt.

Screenshot

MODx-Evolution-Tutorial (Update)

Legen Sie nun vier weitere Unterdokumente an, indem Sie entweder den Prozess wiederholen oder indem Sie das existierende Dokument duplizieren (Tipp: das Duplizieren spart Zeit, da der Inhalt ebenso dupliziert wird). Um ein Dokument zu duplizieren, wählen Sie im Kontextmenü die Option „Dokument Duplizieren“. Das neue Dokument wird auf derselben Ebene wie das Original erstellt. Achten Sie allerdings darauf, dass die duplizierten Dokumente zunächst den Status „nicht veröffentlicht“ gesetzt haben und Sie diesen manuell auf „veröffentlicht“ setzen müssen.

Screenshot

MODx-Evolution-Tutorial (Update)

Schließlich sollte das Artikel-Dokument fünf Kinderdokumente beinhalten, komplett mit Inhalt. Wenn Sie sich im Frontend die Artikel-Unterdokumente ansehen, werden Sie feststellen, dass das Hauptmenü widerspiegelt, dass diese Dokumente Kinder des Articles-Menüpunktes sind.

Screenshot

MODx-Evolution-Tutorial (Update)

Ditto: Inhalte wiederverwenden

Unsere letzte Aufgabe ist es nun eine Home-Seite zu erstellen. Wie bei den meisten Magazin-Sites stammt der Inhalt, der auf der Home-Seite anzeigt wird nicht direkt von der Home-Seite selbst, sondern wird aus anderen Dokumenten entnommen. Unser Design verlangt eine Hauptstory und vier untergeordneten Artikel, wobei wir die Hauptstory als den aktuellsten Artikel anlegen wollen. Unser Ziel ist es, das Ganze so zu automatisieren, dass der Redakteur nur noch den Artikel hinzufügen und sich nicht mit der Home-Seite beschäftigen muss.

Um dies mit MODx umzusetzen werden wir ein Snippet namens Ditto (entwickelt von Mark Kaplan) benutzen. Es ist eines der nützlichsten Tools, die Sie in einer CMS-Umgebung sehen werden. Ditto tut so viel, und das so gut, dass es schwierig ist zusammenzufassen, was es alles kann. Im Prinzip bietet Ditto die Möglichkeit Inhalte bestimmter Dokumentgruppen abzufragen und dann die Ergebnisse individuell sortiert und gefiltert auszugeben und das ganze auch noch so, dass der Entwickler volle Kontrolle über die HTML-Ausgabe hat.

Screenshot

MODx-Evolution-Tutorial (Update)

Wenn wir uns das Home-Template anschauen, wird schnell klar, dass es zwei verschiedene Ausgabetypen gibt mit denen wir arbeiten müssen: da gibt es den oberen Bereich mit der Hauptgeschichte, welche auch das Bild für den Artikel enthält, und den unteren Bereich, der eine Zusammenfassung der vier weiteren Artikel beinhaltet aber kein Bild:

Screenshot

MODx-Evolution-Tutorial (Update)

Wie bei den meisten Lösungen in MODx gibt es verschiedene Herangehensweisen um zum Ziel zu kommen. Wir könnten die Hauptgeschichte und die untergeordneten Artikel unabhängig voneinander mit Ditto Aufrufen behandeln, was gut funktionieren würde. Wir werden jedoch nur einen Ditto-Aufruf verwenden und somit auch nur eine Datenbank-Anfrage. Ditto ist ein Snippet und wird daher mit der Snippet-Syntax aufgerufen, was bedeutet, dass wir die Parameter im Snippet-Aufruf definieren können um das Snippet zu konfigurieren.

Ändern Sie das Home-Template (es wäre eine gute Idee vorher ein Backup zu machen, da wir später Teile des HTML-Codes noch benötigen werden) und ersetzen Sie den gesamten Inhaltsbereich mit diesem Ditto-Aufruf:

Quelltext

 1. [[Ditto? &parents=`2` &display=`5` &orderBy=`createdon DESC`]]   

Das Home-Template sollte nun wie folgt aussehen:

Quelltext

 1. {{site-header}}  
 2.       
 3.     [[Ditto? &parents=`2` &display=`5` &orderBy=`createdon DESC`]]  
 4.       
 5.     <div class="clear"> </div>  
 6.     <!-- End Stories Area -->  
 7.   
 8.       
 9.     <!-- Spacer -->  
10.     <div class="grid_12 spacer">  
11.     </div>  
12.     <div class="clear"> </div>  
13.     <!-- End Spacer -->  
14.   
15.       
16. {{site-footer}}

Im Aufruf haben wir die folgenden Parameter definiert:

  • &parents=`2` sagt Ditto nur die Dokumente anzuzeigen, die Kinder des Dokuments mit der ID-Nummer 2 sind;
  • &display=`5` sagt Ditto nur fünf Artikel anzuzeigen
  • &orderBy=`createdon DESC` bewirkt, dass Ditto die Ergebnisse nach dem Erstellungsdatum sortiert und zwar in absteigender Folge (ganz so wie in einer SQL-Abfrage).

Schauen Sie sich die Homepage nun in der Vorschau an, sehen Sie die Ergebnisse Ihrer Anfrage als eine Liste von Artikeln mit einigen zusätzlichen standardmäßigen Informationen. Sie können herumexperimentieren indem Sie die Parameter-Werte ändern und dann beobachten wie sich direkt die Ergebnisse ändern.

Screenshot

MODx-Evolution-Tutorial (Update)

Wir haben die richtigen Ergebnisse aber das Format und der Inhalt lassen noch etwas zu wünschen übrig. Wie zuvor erwähnt, als wir über Wayfinder gesprochen haben, erlaubt Ditto es uns die Ausgabe zu ganz nach unserem Bedarf mit Template-Chunks zu formatieren. Und genau das werden wir nun auch tun.

Wie der Name schon sagt: Template-Chunks sind Stücke oder Teile von Templates. Wir beginnen indem wir zum Chunk-Tab in der Ressourcenverwaltung gehen. Erstellen Sie einen neuen Chunk und geben Sie ihm den Titel „home-articles“. Dies wird der Template-Chunk für unsere untergeordneten Artikel.

Wir werden das HTML des ursprünglichen Homepage-Template als Startpunkt für unser Template „home-articles“ nutzen. Dann werden wir den statischen Text mit dem dynamischen Inhalt mit Hilfe von Platzhaltern ersetzen. Dies ist so ähnlich wie das Hinzufügen von Platzhaltern zum Seiten-Template, mit dem Unterschied, dass die Platzhalter von Ditto und nicht vom aktiven Dokument zurückgegeben werden.

Dies ist das ursprüngliche HTML. Fügen Sie dies als Inhalt in unseren neuen Chunk ein:

Quelltext

 1. <div class="grid_3">  
 2.   
 3.     <h2><a href="#">Sample Article Title</a></h2>  
 4.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</p>  
 5.     <p><a href="#"><strong>Finish Reading...</strong></a></p>  
 6.   
 7. </div>   

Screenshot

MODx-Evolution-Tutorial (Update)

Ersetzen Sie den statischen Inhalt mit den dynamischen Platzhaltern. Beachten Sie, dass Sie folgende Syntax innerhalb eines Template-Chunks verwenden müssen: [+varName+].

Nach dem Einfügen der Platzhalter sollte der Chunk nun wie folgt aussehen:

Quelltext

 1. <div class="grid_3">  
 2.   
 3.     <h2><a href="[~[+id+]~]">[+pagetitle+]</a></h2>  
 4.     <p>[+content+]</p>  
 5.     <p><a href="[~[+id+]~]"><strong>Finish Reading...</strong></a></p>  
 6.   
 7. </div>

Erweitern sie den Ditto-Aufruf um den Parameter &tpl=`home-articles` um das gerade angelegte Template-Chunk für die Ditto-Ausgabe zu verwenden.

Quelltext

      1. [[Ditto? &parents=`2` &display=`5` &orderBy=`createdon DESC` &tpl=`home-articles`]] 

Sehen Sie sich die Homepage in der Vorschau an, die Artikel werden als Spalten in absteigender Reihenfolge angezeigt.

Screenshot

MODx-Evolution-Tutorial (Update)

Beachten Sie, dass wir nun den gesamten Artikelinhalt erhalten, doch was wir wollen ist der erste Teil des Artikels, verkürzt und als Zusammenfassung, nach einer bestimmten Zahl von Zeichen. Kein Problem. Wir fügen einfach &extenders=`summary` zum Ditto Aufruf hinzu und nutzen den [+summary+] Platzhalter anstatt dem [+content+] Platzhalter im Template-Chunk.

Ein Extender wird die Ditto-Funktion für einen bestimmten Zweck wie ein Plugin erweitern. In diesem Fall fügt es die Zusammenfassungs-Funktion hinzu. Der Template-Chunk sollte nun wie folgt aussehen:

Quelltext

 1. <div class="grid_3">  
 2.     <h2><a href="[~[+id+]~]">[+pagetitle+]</a></h2>  
 3.   
 4.     <p>[+summary+]</p>  
 5.     <p><a href="[~[+id+]~]"><strong>Finish Reading...</strong></a></p>  
 6. </div>   

Unser Ditto-Aufruf sieht bis jetzt so aus:

Quelltext

   1. [[Ditto? &parents=`2` &display=`5` &orderBy=`createdon DESC` &tpl=`home-articles` &extenders=`summary`]]  

Und die Homepage sollte jetzt wie folgt aussehen:

Screenshot

MODx-Evolution-Tutorial (Update)

Als letzten Schritt legen wir den aktuellsten Artikel an und machen ihn zur Hauptgeschichte. Ditto bietet uns eine elegante Möglichkeit hierfür an: mit Hilfe des Parameters tplFirst können wir dem ersten Ergebnis ein eigenes Template-Chunk zuweisen.

Erstellen Sie ein neues Chunk mit dem Namen „home-headline“ und fügen Sie es den anstelle der Hauptgeschichte in den HTML-Quelltext ein:

Quelltext

 1. <!-- Top Section -->  
 2. <div class="grid_7 topSection">  
 3.   
 4.     <div><h1>Sample Article Title</h1>  
 5.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </p><p><a href="#"><strong>Finish Reading...</strong></a></p>  
 6.   
 7.     </div>  
 8. </div>  
 9.   
10. <div class="grid_5 topSection">  
11.     <div>  
12.         <img src="assets/images/poster.jpg" alt="" id="poster"/>  
13.   
14.     </div>  
15. </div>  
16.   
17. <div class="clear"> </div>  
18. <!-- End TopSection -->  
19.   
20. <!-- Spacer -->  
21.   
22. <div class="grid_12 spacer">  
23. </div>  
24. <div class="clear"> </div>  
25. <!-- End Spacer -->

Ersetzen Sie den statischen Inhalt mit Platzhaltern, inklusive dem Platzhalter für die Bild-TV um das Bild des Artikels in die Schlagzeile einzubinden:

Quelltext

 1. <!-- Top Section -->  
 2. <div class="grid_7 topSection">  
 3.     <div><h1>[+pagetitle+]</h1>  
 4.   
 5.     <p>[+summary+]</p>  
 6.     <p><a href="[~[+id+]~]"><strong>Finish Reading...</strong></a></p>  
 7.     </div>  
 8.   
 9. </div>  
10.   
11. <div class="grid_5 topSection">  
12.     <div>  
13.         <img src="[+image+]" alt="" id="poster"/>  
14.   
15.     </div>  
16. </div>  
17.   
18. <div class="clear"> </div>  
19. <!-- End TopSection -->  
20.   
21. <!-- Spacer -->  
22.   
23. <div class="grid_12 spacer">  
24. </div>  
25. <div class="clear"> </div>  
26. <!-- End Spacer -->

Speichern Sie den Chunk und erweitern Sie den Ditto-Aufruf um den Parameter &tplFirst=`home-headline`, der Ditto veranlasst den Template-Chunk „home-headline“ zur Formatierung des ersten Ergebnisses zu verwenden. Das Homepage-Template inklusive des Ditto-Aufrufs sollte nun wie folgt aussehen:

Quelltext

 1. {{site-header}}  
 2.       
 3.     [[Ditto? &parents=`2` &display=`5` &orderBy=`createdon DESC` &tpl=`home-articles` &tplFirst=`home-headline` &extenders=`summary`]]  
 4.     <div class="clear"> </div>  
 5.   
 6.     <!-- End Stories Area -->  
 7.       
 8.     <!-- Spacer -->  
 9.     <div class="grid_12 spacer">  
10.     </div>  
11.     <div class="clear"> </div>  
12.   
13.     <!-- End Spacer -->  
14.       
15. {{site-footer}}   

Schauen Sie sich die Homepage in der Vorschau an und Sie sollten etwas ähnliches wie den folgenden Screenshot sehen. Bei Klick auf „Continue Reading“ sollten Sie zum entsprechenden Artikel gelangen.

Screenshot

MODx-Evolution-Tutorial (Update)

Nun ist die Seite funktionsfähig. Was wir bisher gelernt haben, sollte es Ihnen auch ermöglichen der Site Ihren eigenen, letzten Schliff zu verpassen. Versuchen Sie Ditto zu nutzen um die „Recent Article“-Liste der Inhaltsseite zu erstellen oder fügen Sie einen Artikel-Index auf der Artikelseite hinzu.

Fazit

Dieses Tutorial war vielleicht ein wenig zu ambitioniert. Mein Ziel war es zu zeigen, wie einfach es ist mit MODx zu arbeiten. Und obwohl ich Sie in Konzepte wie {{chunks}}, [*document-variables*] und [[snippets]] eingeführt habe, ist es nur einen kleiner Teil dessen was MODx ausmacht. Ich würde mich freuen, wenn Sie MODx herunter laden und installieren würden um es einfach selbst auszuprobieren. Die MODx-Community ist die treibende Kraft des Erfolges von MODx und das Community-Forum hat eine sehr freundliche Atmosphäre und bietet eine Fülle von Informationen, schauen Sie es sich an!


Bookmark setzen oder Seite empfehlen

Kommentar schreiben

Die Kommentarfunktion ist nicht mehr aktiv

29 Kommentare

seo blog zur Website

17.10.2011 15:33:42

Super Zusammenfassung und auch gut erklärt. Hat mir bei meinen ersten MODx-Schritten ziemlich gut geholfen. Bevorzuge aber bis dato noch Drupal, muss mich in MODx noch etwas besser einarbeiten. Viele Grüße

Bogdan zur Website

28.03.2011 15:34:57

Hallo Markus,

danke für dein Feedback, deine Bemerkungen zum Tutorial habe ich korrigiert.

Bezüglich deiner Frage des fehlenden Bildes: eventuell hat das mit deiner zweiten Frage zu tun, dem Unterschied zwischen [ [ + pagetitle ] ] und [ [ * pagetitle ] ]. Ersteres gibt die Titel der Dokumente aus, die Ditto beim Aufruf druchgeht, letzteres nur den Titel des aktuellen Dokumentes aus dem der Ditto-Aufruf erfolgt.

Für weitergehende Fragen würde ich dir das deutsche MODX-Forum empfehlen unter http://www.modxcms.de/forum/

Beste Grüße
Bogdan

Markus

27.03.2011 21:27:58

Irgendwie wurde bei meiner letzten Frage die Syntax beschnitten. Der Unterschied ist gefragt bei [ [ + pagetitle ] ] und [ [ * pagetitle ] ] (ich hoffe die paar Leerzeichen schützen vor einer erneuten beschneidung ;) )

Markus

27.03.2011 21:24:57

Hi Bogdan,

danke für das Tutorial! Hat mir echt geholfen beim Einstieg in MODX :) ich kann aber nur zustimmen, es sollte als Einstieg für den erfahrenen Webentwickler verstanden werden…

Ein Schreibfehler hat sich eingeschlichen: […Erweitern sie den Ditto-Aufruf um den Parameter $tpl=`home-articles` um das …]. Das sollte kein $ sein sondern ein &.

Bei dem Abschnitt "Hierarchie: Von Eltern und Kindern" sollte kurz erwähnt werden, dass man darauf achten sollte, dass die 5 angelegten Artikel auch veröffentlicht sind … ;)

Ein Problem hab ich: Ich hab das Tut soweit umgesetzt, nur an allerletzter Stelle mag es nicht funktionieren. Das Bild wird mir auf der Startseite, beim Headline Artikel nicht angezeigt. Ich hab keine Ahnung warum?? TV ist gesetzt bei allen Artikeln, aber bleibt leer. hast du eine Ahnung?

Was genau ist denn der Unterschied zwischen und ? Warum wird in Chunks für Ditto das "+" verwendet und in Templates das "*"? das hab ich auch nicht wirklich verstanden…

Viele Grüße,
Markus

Bogdan zur Website

31.12.2010 13:20:05

Hallo Connie,

danke für dein Feedback! Mit MODx hat das Fehlen eines Druck-Stylesheets nichts zu tun, das Template ist selbst erstellt und mir hat bisher die Zeit gefehlt, eine für Druck optimierte Version umzusetzen, zumal ich Websites ausdrucken ja eigentlich auch irgendwie doof finde.

Falls es doch unbedingt sein muss, sollte es mit der Reader-Funktion in Safari 5 gehen.

Connie zur Website

30.12.2010 13:34:50

Moin!

Bin jetzt auf dieses Tutorial gestossen, aber leider ist es nicht möglich, es auszudrucken
die Zeilen werden abgeschnitten, Screenshots ebenso

falls diese Seite hier mit MODx gemacht ist, gibt es denn kein Print-Style-Sheet?

Würde das Tutorial gerne nutzen, aber ab und an brauch ich was ausgedruckt…

Bogdan zur Website

18.05.2010 09:43:54

Hallo Hendrik,

tut mir leid, ich kann dir spontan auch nicht sagen wo das Problem liegt; ich benutzte den Extenders-Parameter bei Ditto so gut wie nie.

Von daher wäre deine Frage im Forum auf jeden Fall besser aufgehoben, ich hoffe du findest deine Zugangsdaten wieder.

Viel Erfolg

Bogdan

Hendrik

17.05.2010 15:44:35

Hallo Bogdan,
leider funktioniert bei mir der Chunk Aufruf für die News nicht ganz sauber.
Ich benutze Modx 1.0.2. . Füge ich dem Snippet Call &extenders=`summary` hinzu funktioniert der link auf meiner Newsseite zum Artikel nicht mehr . ist das Ergebnis in der URL. Nehme ich &extenders=`summary` raus - funktioniert der link.

Hoffe auf Antwort, vielen Dank nochml für das Tutorial.
Leider hab ich meine Zugangsdaten für das Forum nicht mehr, wollte die Frage eigentl. dort posten.
Auf mehrmalige Anfrage im Bezug auf meine Passwort hab ich leider keine Antwort erhalten.

Grüße Hendrik

Kader

14.04.2010 08:38:28

Moin Bogdan,

ich habe mich inzwischen in MODx eingewurschtelt, und Dein Tutorial bleibt eines der besten. Dennoch würde ich bei Begriffen wie "Aufruf" nacharbeiten. Also jene, Begriffe, die visuell nicht erfassbar sind. Wo ich noch stolperte war die Nennung allgemeiner Variablen wie zuerst. Auch wenn das weniger abstrakte Beispiel folgt, bleibst du doch bei der vertikalen Laufrichtung einer Web-Seite hängen und schaust was mit dem varName gemeint ist - bis Du weiter unten darauf kommst, dass dies ein Plazhalter ist.

Bei allem aber - es gibt kein besseres und nachvollziebareres tutorial im deutschen Sprachraum. Dafür herzlichen Dank für Zeit und Engagement,

Radulph

Bogdan zur Website

11.03.2010 23:12:25

Hallo Kader,

es stimmt, das Tutorial ist nicht von einem Profi geschrieben und wäre sicher ausbaufähig. Ich denke es ist auch vor allem für Benutzer mit Erfahrung hilfreich als Einstig in MODx, für unerfahrene Benutzer ist es vielleicht nicht der richtige Einstieg.

Schöne Grüße

Bogdan

kader

11.03.2010 21:13:04

Die Schwierigkeit bei dieser Anleitung sind fehlende Orientierungsangaben. So sind in der 960er-Vorlage deutlich mehr HTML-Dokumente vorhanden. Verwirrend ist auch die Handhabung der Content- und Home-Vorlage. Nie ist angegeben, um welche es sich handelt. Könntest Du das nicht noch ein wenig verdeutlichen und den Original-Autor damit verbessern?

In meinem Bekanntenkreise haben sich einige diese Anleitung angesehen, und sie sind alle wie ich über diesselben Verständnisschwierigkeiten gestolpert.

Grüße

Kader

kader

11.03.2010 19:40:15

In dieser Anleitung sind ein paar gedankliche Lücken: Wo soll das hin? In ModX - in HTML?? Da fehlt etwas wesentliches - wo wir uns gerade aufhalten.

1. <head>
2. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
3.
4. <title>Magazine 960 — Prototype</title>
5. <link rel="stylesheet" type="text/css" media="all" href="assets/css/reset.css" />
6.
7. <link rel="stylesheet" type="text/css" media="all" href="assets/css/960.css" />
8. <link rel="stylesheet" type="text/css" media="all" href="assets/css/style.css" />
9.
10.</head>
11. <body>
12.
13. <div class="container_12">
14. <!– Header Div –>
15. <div class="grid_12">
16. <a href="#">[!img? &name=`assets/images/header.png" alt=""/></a>
17.
18. </div>
Wir sind noch nicht ganz fertig mit den HTML-Dokumenten, können jedoch vorerst für den Rest des Ablaufs im Rahmen von MODx weiterarbeiten.

tonisch zur Website

08.12.2009 21:27:56

Top!!
Ich hab nach einer etwas fortgeschritteneren Anleitung zum Einstieg in MODx gesucht - perfekft!

Hendrik

17.11.2009 16:26:30

Hallo Bogdan,

erstmal vielen Dank für den tollen Support.

Hab mein Problem schon fast gelöst.
Melde mich aber nochmal via mail.

Bis dahin,

Hendrik

Bogdan zur Website

17.11.2009 11:43:16

Hallo Hendrik,

ja MODx-Tags lassen sich leider nicht hier in den Kommentaren einfügen. Schreib mir doch unter bg@medianotions.de, dann schicke ich dir den Quelltext für das Ditto-Template zu.

Schöne Grüße

Bogdan

Hendrik zur Website

17.11.2009 11:04:28

Ich nochmal,
leider kann ich hier keine code snippets versenden.
deswegen ist mein Kommentar lückenhaft.
hätte sehr zum besseren verständnis beigetragen.

greetz Hendrik

Hendrik zur Website

17.11.2009 11:00:58

Hallo Bogdan,

Vielen Dank für die schnelle Antwort.
Also kein TV Preview Plugin.

Wollte eigentl. wissen wie ich ein Image im Ditto aufrufe. Und diesem noch eine bestimmte Größe zuordne???

Dies steht in meinem homa article chunk
<div class="grid_3">
<h3><a href=""></a></h3>


<a href=""><strong>Finish Reading…</strong></a>
</div>
Alles wie im Tutorial steht , nur hab ich ein hinzugefügt.


Und hier die Zeile die im home.tpl steht wo der Inhalt des chunks aufgerufen wird.


Wie hole ich mir nun hier das image möglicht noch mit Größenangabe?


Hoffe ich nerve nicht und du weißt wie ich das hier mein.
Vielen Dank.
Hendrik

Bogdan zur Website

17.11.2009 08:59:29

Hallo Hendrik,

um mit Ditto Bilder auszugeben legst du bei den entsprechenden Dokumenten zunächst mal eine Template-Variable an vom Typ "image", zum Beispiel mit dem Namen "teaser_image".

In den einzelnen Dokumenten verknüpfst du in dieser teaser_image jeweils das entsprechende Teaser-Bild. Jetzt musst du das nur noch in deinen Ditto-Aufruf einbauen:

1. <div class="grid_3">
2.
3. <h3><a href=""></a></h3>
4. <img src="[teaser_image]" width="200" height="100" alt="">
5. <p></p>
6. <p><a href=""><strong>Finish Reading…</strong></a></p>
7.
8. </div>

Das war es schon, viel Erfolg!

Bogdan

Hendrik zur Website

16.11.2009 17:08:50

Hallo,

vielen dank auch von mir für das tolle Tutorial.

Kannst du mir vielleicht noch nen Tip geben
wie ich auf der Homeseite beim Teasern der News ein Bild (Thumb) unter der Überschrift einfüge. ? Habe es schon zur Anzeige des Pfades gebracht - home article chunk - <p></p>.

Leider hab ich keine Ahnung was dann im Ditto des Hometemplates stehen muß, um auch das Thumb anzuzeigen. Oder benötige ich das Image TV Preview Plugin.

Bin für jeden Tip oder auch einen Link dankbar.

Grüße und Viel Erfolg weiterhin.
Hendrik

edas zur Website

03.11.2009 22:05:13

Vielen Dank, modx ist super.

Dieter zur Website

20.10.2009 16:58:16

Auch von mir ein riesen großes Dankeschön, hat mir wahnsinnig weitergeholfen :)

wumble zur Website

15.09.2009 10:47:27

Hey,

vielen Dank für die Übersetzung! Hat den Einstieg in MODx wirklich erleichtert!

Bogdan zur Website

02.09.2009 10:22:30

Hallo Matthias,

einen Standardwert gibst du am besten ein, wenn du die Template-Variable bearbeitest im Feld „Standardwert“. Das wird dann für alle Dokumente die diese Template-Variable verwenden automatisch eingefügt, wenn kein anderer Wert vorhanden ist.

Schöne Grüße und viel Erfolg

Bogdan

Matthias

02.09.2009 09:29:32

Hallo Bogdan,
herzlichen Dank für die Übersetzung dieses äusserst hilfreichen Tutorials :-)

Ich habe noch eine Frage bzgl. der Verwendung einer Template-Variablen für das Bild auf der rechten Seite.
Wie lässt sich ein Standardwert für das Bild einrichten (z.B. ein blind-gif), damit in Browsern wie dem IE kein fehlendes Bild angezeigt wird? Reicht es aus, in diesem Feld einfach den Pfad zum blind-gif anzugeben?

Herzlichen Dank
Matthias

Andre

18.08.2009 23:34:24

Klasse! Vielen Dank!

Bogdan zur Website

03.08.2009 08:11:12

Hallo Menore,

ich weiß leider nicht, nach welchen Kriterien die unterschiedlichen Chunks bei der Ausgabe der Dokumente aus dem Archiv ausgewählt werden sollen. Eventuell wäre die Aufteilung in fünf unterschiedliche Ditto-Aufrufe eine Möglichkeit.

Eine andere Möglichkeit ist vielleicht nur ein Chunk zu verwenden und die Anpassungen per CSS vorzunehmen. Mit Ditto würde eine entsprechende CSS-Klasse eingesetzt werden.

Dann gibt es noch die Ditto-Parameter tplAlt, tplFirst, tplLast und tplCurrentDocument (siehe Ditto-Dokumentation). Eventuell kommst du damit weiter.

Zu guter letzt bleibt immer noch die Möglichkeit ein eigenes PHP-Skript zu schreiben und in PHP die Regeln der Ausgabe genau so zu programmieren wie du sie haben willst. Die MODx-API macht das Aufrufen von MODx-Dokumenten und das Ausführen von Chunks relativ leicht (siehe http://blog.medianotions.de/de/artikel/2008/modx-api-spickzettel).

Ich hoffe das bringt dich ein bisschen weiter, ansonsten ist das deutschsprachige MODx-Forum immer eine gute Adresse, wenn es um knifflige MODx-Fragen geht: http://www.modxcms.de/forum/

Schöne Grüße und viel Erfolg

Bogdan

Menore

01.08.2009 20:11:41

Hi,
hübsches Tutorial hat mir bisher schon sehr weitergeholfen, allerdings hänge ich grad an einem Problem fest, der wahrscheinlich aus Unkenntnis der Materie resultiert…
Im Archiv Teil meiner Website sollen alle Artikel nochmal aufgelistet sein. die Auflistung soll nach Erstellungsdatum erfolgen, die Formatierung via Chunks, so weit so gut, aber der dafür vorgesehene Chunk existiert in 5 verschiedenen Ausführungen.
Ist es irgendwie möglich Ditto anzuweisen es soll sich selbständig für jeden gelisteten Artikel einen Chunk aussuchen (oder zumindest die vorhanden der reihe nach zu nutzen anstatt immer nur den selben?)
Für einen Tipp oder kleinen Schubser in die richtige Richtung wär ich bereits sehr dankbar :)

Gruß Menore

Bogdan zur Website

03.04.2009 10:17:45

Nichts zu danken, spread the word! :-)

jan

03.04.2009 09:53:09

Hi Bogdan,

danke für die Übersetzung!

beste Grüße, jan