Arbeiten mit einem Content Management Framework: MODx

() translation by (you can also view the original English article)

Wenn Sie sich für Content Management Systemen (CMS) interessieren, haben Sie von MODx (modxcms.com) gehört. MODx ist nicht nur ein äußerst flexibles CMS, mit dem die Verwaltung von Website-Inhalten zum Kinderspiel wird, sondern auch ein leistungsstarkes Content Management Framework mit einer umfangreichen API, die es zum Traum eines Entwicklers macht.

"MODx ist ein Open-Source-PHP-Anwendungsframework mit leistungsstarken Funktionen, mit denen Sie die Kontrolle über Ihre Online-Inhalte übernehmen können. Es hilft Entwicklern und fortgeschrittenen Benutzern, jedem, der die täglichen Aufgaben zur Pflege von Website-Inhalten wünscht, so viel Kontrolle zu geben."

In diesem Tutorial werden wir einige der Standard-MODx-Funktionen untersuchen, um zu veranschaulichen, wie es ist, mit MODx zu arbeiten, indem wir einen statischen HTML-Prototyp erstellen und ihn in eine funktionierende MODx-gesteuerte Website verwandeln. Wir werden viel Gebiet abdecken, um ein umfassendes Bild davon zu zeichnen, was Sie mit MODx tun können, aber nur die Oberfläche des Möglichen überfliegen.

Unser Projekt basiert auf einer Standard-MODx-Installation. Sie können die neueste MODx-Version von der MODx-Website herunterladen.

Um sich auf die eigentliche MODx-Entwicklung zu konzentrieren, verwenden wir den HTML-Code aus dem Tutorial Prototyping With The Grid 960 CSS Framework als Basis-HTML-Vorlage. Jede HTML-Datei kann mit minimalem Aufwand zu einer MODx-Vorlage werden. Die Integration eines CSS-Frameworks in MODx ist kein Problem. Das Grundkonzept lautet: Wenn es außerhalb von MODx funktioniert, funktioniert es auch innerhalb von MODx. Ich habe für dieses Tutorial einige geringfügige Änderungen am HTML-Code vorgenommen und eine einfache "Inhalts" -Seite basierend auf der Startseite erstellt. Dies sind die Layoutvorlagen, mit denen wir beginnen werden:

Hier ist eine Roadmap der wichtigsten Themen, die wir behandeln werden:

Die Grundlagen: Bevor wir anfangen
Der Manager: Vorlagen und Dokumente
Platzhalter: Dynamischer Inhalt
Snippets: Hinzufügen einer intelligenten Navigation
Chunks: Wiederverwendbarer Code
Template Variablen: Benutzerdefinierte Felder für Steroide
Hierarchie: Eltern und Kinder
Ditto: Inhalt mehrfach verwerten
Abschluss

Die Grundlagen: Bevor wir anfangen

Der erste Schritt besteht darin, die HTML-Dateien für die Verwendung als MODx-Vorlagen vorzubereiten, indem die Dateipfade an die endgültige Dateistruktur angepasst werden, die wir verwenden werden. MODx stellt den Ordner/assets/zum Speichern der Site-Dateien bereit. Dies wird im Folgenden beschrieben. Sie können die Dateien jedoch an einer beliebigen Stelle ablegen. Dies ist eine der Funktionen, mit denen MODx einfach in Ihren vorhandenen Workflow integriert werden kann.

Ich habe die Basis-Images für die Vorlage in den vorhandenen Ordner/images/hochgeladen und dann einen neuen Ordner mit dem Namen "css" erstellt, in den ich die CSS-Dateien hochgeladen habe. Derzeit beschäftigen wir uns nur mit der Site-Struktur und noch nicht mit dem Inhalt. Daher müssen wir nur die Pfade für die CSS-Dateien und das 'Logo'-Bild anpassen, der verbleibende Inhalt wird über MODx aufgenommen.


<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Magazine 960 — Prototype</title>
<link rel="stylesheet" type="text/css" media="all" href="assets/css/reset.css" />

<link rel="stylesheet" type="text/css" media="all" href="assets/css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="assets/css/style.css" />

</head>
<body>

<div class="container_12">
	<!--Header Div -->
	<div class="grid_12">
		<a href="#"><img src="assets/images/header.png" alt=""/></a>

	</div>

Wir sind mit den HTML-Dokumenten noch nicht ganz fertig. Für den Rest des Prozesses können wir jedoch im Bereich von MODx arbeiten.

Der Manager: Vorlagen und Dokumente

Der MODx Manager ist das administrative Kontrollfeld. Melden Sie sich beim MODx Manager an.

Der Manager besteht im Wesentlichen aus 3 Teilen:

das Admin-Menü oben;
Der Dokumentbaum befindet sich links; und der
Aktions-/Bearbeitungsbereich befindet sich rechts und ändert sich entsprechend der ausgewählten Funktion.

An dieser Stelle möchten wir unsere HTML-Dateien als Vorlagen in die MODx-Umgebung einfügen. Wählen Sie im Admin-Menü Ressourcen > Ressource verwalten zu den Ressourcen der Website.

Wählen Sie die Registerkarte Vorlagen. Klicken Sie auf den Link "Neue Vorlage", um den Bildschirm "Vorlage erstellen/bearbeiten" aufzurufen. Legen Sie einen Namen und eine Beschreibung für Ihre Vorlage fest und fügen Sie die Vorlage optional einer Kategorie hinzu, um Ihre Ressourcen besser organisieren zu können (wir verwenden 960 als Kategorie). Fügen Sie den HTML-Code in das Textfeld "Vorlagencode (HTML)" ein und klicken Sie auf "Speichern".

Wiederholen Sie den Vorgang mit der Inhaltsvorlage. Wir sollten jetzt unsere 2 neuen Vorlagen sowie die Minimalvorlage haben, die mit MODx gepackt und während der Installation erstellt wurde.

Als Nächstes erstellen wir einige MODx-Dokumente (Webseiten), um die ursprüngliche Struktur unserer Site darzustellen. Beginnen wir mit der Bearbeitung des vorhandenen Dokuments, das während der Installation erstellt wurde. Klicken Sie in der Dokumentstruktur (linke Spalte) mit der rechten Maustaste (bei gedrückter Ctrl-Taste auf den Mac) auf den Dokumentnamen, um das Kontextmenü aufzurufen. Wählen Sie im Menü die Option "Dokument bearbeiten".

Der Bildschirm 'Dokument erstellen/bearbeiten' wird jetzt in den Hauptteil des Managers geladen und Sie können das ausgewählte Dokument bearbeiten. Die Daten des Dokuments sind nach Funktion und Inhalt in Abschnitte unterteilt. Oben haben wir den Abschnitt Dokumenteinstellungen, in dem die Seitenparameter sowie die Statusinformationen enthalten sind.

Als nächstes haben wir den Abschnitt Dokumentinhalt, in dem das Hauptinhaltsfeld für das Dokument verwaltet wird. Das Inhaltsfeld bietet die Option, einen RTE (Rich Text Editor) einzuschließen.

Schließlich gibt es noch den Abschnitt Template Variable. Template Variablen sind die Antwort von MODx auf benutzerdefinierte Inhaltsfelder. Und MODx macht das sehr gut. Wir werden sie etwas später in Aktion sehen.

OK, zurück zum Geschäft. Wir können das vorhandene Dokument umbenennen und dies zu unserer Homepage machen. Geben Sie dazu im Bearbeitungsmodus Home in das Feld 'Titel' ein, löschen Sie den Text im Feld 'Langer Titel' und den Text im Feld 'Menütitel' (wird nicht verwendet) diese Felder für dieses Tutorial). Wählen Sie als Nächstes die Vorlage aus, die wir für die Startseite erstellt haben, aus dem Pulldown-Menü "Vorlage verwenden" (Hinweis: Beim Ändern von Vorlagen erhalten Sie eine Warnmeldung, dass die Seite neu geladen wird).

Wenn Sie fertig sind, klicken Sie auf Speichern und Sie werden sehen, dass das Dokumentname in der Dokumentstruktur jetzt "Home" lautet.

Als nächstes werden wir die verbleibenden Inhaltsseiten der obersten Ebene hinzufügen. Klicken Sie in der Symbolleiste direkt über dem Dokumentbaum auf das Symbol "Neues Dokument", um ein neues leeres Dokument auf Stammebene zu erstellen.

Geben Sie im Feld "Titel" "Artikel" ein und wählen Sie die zuvor erstellte Vorlage "Inhalt" aus dem Menü "Vorlage" aus. Da wir an einem neuen Dokument arbeiten, wird standardmäßig der aktualisierte Status verwendet (die Standardeinstellungen können in den Site-Einstellungen überschrieben werden). Bevor wir es speichern, müssen wir es auf "Veröffentlicht" setzen, indem wir die Registerkarte "Seiteneinstellungen" auswählen und die Option "Veröffentlicht" aktivieren.

Wählen Sie vor dem Speichern des Dokuments die Funktion "Weitere hinzufügen" (befindet sich direkt unter der oberen Schaltfläche zum Speichern). Dadurch wird automatisch ein anderes Dokument aufgerufen, das nach dem Speichern des aktuellen Dokuments erstellt werden soll. Dies spart viel Zeit beim Hinzufügen mehrerer Dokumente.

Wiederholen Sie diesen Vorgang für die verbleibenden Menüelemente der obersten Ebene: Artikel, Themen, Info, Editoren und Kontakt. Wenn Sie fertig sind, sieht Ihr Dokumentbaum folgendermaßen aus (Hinweis: Die Nummer in Klammern ist die ID-Nummer des Dokuments, wir müssen dies später wissen):

Bis zu diesem Punkt haben wir die Grundlagen für unser Projekt gelegt und nur sehr wenig davon gesehen, was MODx leisten kann (obwohl die einfache Möglichkeit, eine Site einzurichten, beeindruckend ist). Lassen Sie uns einen kurzen Rückblick geben:

Wir haben 2 HTML-Vorlagen;
Wir haben die Dateien in unsere Modx-Installation hochgeladen.
und wir haben eine Reihe von Top-Level-Dokumenten oder "Webseiten" erstellt.

Glauben Sie mir, es hat viel länger gedauert, bis Sie gelesen haben, was wir bisher getan haben, als Sie dafür gebraucht hätten. Ein mit MODx vertrauter Entwickler könnte das, was wir bisher getan haben, in maximal 10 Minuten erreichen.

Die Dinge werden bald sehr interessant. Nachdem wir unsere grundlegende Site-Struktur haben, können wir mit MODx arbeiten.

Platzhalter: Dynamischer Inhalt

Jetzt kehren wir zu unseren Vorlagen zurück und fügen Platzhalter für den dynamischen Inhalt hinzu. Wie wir bereits bei der Erstellung der neuen Dokumente gesehen haben, bietet MODx eine Reihe von Feldern, die wir als Grundlage für unser Content Management verwenden können. In MODx wird die Gruppe von Datenfeldern, die jedem Dokument zugeordnet sind, als "Dokumentobjekt" bezeichnet, und die einzelnen Felder sind die "Dokumentvariablen". Jedes Feld kann mithilfe von Platzhaltern dynamisch in die gerenderte MODx-Ausgabe eingefügt werden. Platzhalter für die Dokumentvariablen werden durch die folgende Syntax identifiziert: [*variable-Name*]. Wenn Sie also das Feld Inhalt hinzufügen möchten, verwenden Sie den Platzhalter [*content*]. MODx bietet auch Platzhalter für globale Site-Variablen für Daten wie die 'Site-URL' oder den 'Site-Namen'. Site-Variablen werden mit der folgenden Syntax identifiziert: [(var-Name)]. Zum Beispiel können wir den <title> nehmen und ihn den aktiven Seitentitel und den Site-Namen widerspiegeln lassen, indem wir die entsprechenden Platzhalter hinzufügen. Hier ist unser ursprünglicher Titel:

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

Und hier ist es, nachdem wir die Platzhalter hinzugefügt haben:

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

Und es wird gerendert als:

Unser nächster Schritt besteht darin, mit der Vorlage "Inhalt" zu arbeiten, indem Sie die Platzhalter für den dynamischen Inhalt hinzufügen. Sie können die Vorlage entweder direkt im Manager öffnen oder einen externen Code-Editor Ihrer Wahl verwenden und den Code nach Abschluss wieder in MODx einfügen (Hinweis: Sie können Ihre Vorlagendateien auch als externe Include-Dateien behalten, wenn Sie möchten, aber wir werden das in diesem Tutorial nicht behandeln.

In unserer Vorlage haben wir dynamischen Inhalt im Hauptteil der Site, in der Fußzeile und im Kopfbereich. So sollte der Kopfbereich nach dem Hinzufügen der Platzhalter aussehen:


<head>
	<meta http-equiv="content-type" content="text/html; charset=[(modx_charset)]" />

	<title>[*pagetitle*] — [(site_name)]</title>
	<base href="[(site_url)]" />
	<link rel="stylesheet" type="text/css" media="all" href="assets/css/reset.css" />

	<link rel="stylesheet" type="text/css" media="all" href="assets/css/960.css" />
	<link rel="stylesheet" type="text/css" media="all" href="assets/css/style.css" />

</head>

Beachten Sie, dass ich das <base>-Tag mit dem Platzhalter [(site_url)] und den Platzhalter [(modx_charset)] hinzugefügt habe, um den Zeichensatz zu definieren. MODx benötigt das Base Tag für relative URLs. Hinweis: Der Site-Name und das modx_charset werden im Site-Konfigurationsfenster im Manager definiert.

Für den allgemeinen Inhaltsbereich fügen wir die Platzhalter für Inhalt und Seiten hinzu:



<!--Content Section-->
<div id="content" class="grid_7">
	<div>
	<h1>[*pagetitle*]</h1>
	[*content*]
	</div>

</div>

Und zum Schluss fügen wir einfach den Site-Namen in die Fußzeile ein:

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

Speichern Sie die bearbeitete Vorlagendatei. Wenn Sie eine Vorschau einer der Inhaltsseiten unserer Website anzeigen, werden Sie feststellen, dass die Seite <title> den Titel der angezeigten Seite widerspiegelt.

Snippets: Hinzufügen einer intelligenten Navigation

Jetzt werden wir mit MODx-Snippets vertraut gemacht, indem wir das Wayfinder-Snippet verwenden, um eine funktionierende "intelligente" Navigation zu unserer Site einzuschließen. Mit intelligent meine ich: Die Navigation wird wissen, wann wir ein neues Dokument hinzufügen, und sie sollte den aktuellen Speicherort auf der Site kennen und die richtigen Stile anwenden sowie das Verhalten beim Umgang mit untergeordneten Dokumenten verwalten. In MODx ist die häufigste Methode zum Erstellen einer Navigation das Wayfinder-Snippet. Ein Snippet in MODx ist im Grunde ein PHP-Skript, das ausgeführt wird, wenn das Dokument analysiert wird. Das Hinzufügen eines Snippets zu Ihrem Dokument entspricht praktisch dem Einbetten einer PHP-Funktion in Ihre Webseite. Snippets sind in Standard-PHP-Code geschrieben, sodass jeder Coding-Enthusiast problemlos seine eigenen Snippets erstellen kann. MODx verfügt außerdem über eine leistungsstarke API, die im Snippet-Code verfügbar ist und die Interaktion mit der Inhaltsdatenbank und anderen Funktionen mühelos macht.

Wayfinder gibt die Dokumentstruktur und -hierarchie entsprechend der Site-Struktur im Dokumentbaum aus. Standardmäßig zeigt Wayfinder die Ausgabe als ungeordnete Liste an, wobei jedes Dokument als Listenelement und nachfolgende untergeordnete Dokumente als eingebettete <ul>-Listen angezeigt werden. Klingt bekannt, ist dies die Standardausgabe für die meisten modernen Menüs im CSS-Stil. Mit Wayfinder können Sie jedoch jeden Teil der Ausgabe mithilfe von Vorlagenblöcken personalisieren. Mit anderen Worten, Sie können fast jede Ausgabe ausführen, die Sie benötigen, indem Sie benutzerdefinierte Vorlagen für Wayfinder anwenden. Auch wenn Sie mehrere Menüs auf derselben Seite haben, kann jedes seine eigenen Ausgabevorlagen haben.

Snippets werden durch die folgende Syntax identifiziert: [[Snippet-Name]] und können zusätzliche Parameter für die Verarbeitung enthalten: [[Snippet-Name? & param1=`value` & param2 =` value`]]. MODx behandelt jeden Parameter als Eingabevariable und stellt sie nahtlos für die Verwendung im Snippet zur Verfügung. Snippets sind nicht Teil von MODx, sondern Add-Ons, die in MODx funktionieren. Snippets werden von der MODx-Community erstellt und verwaltet.

In unserer ursprünglichen HTML-Vorlage ist die Navigation wie folgt aufgebaut:

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

Dies ist für Wayfinder einfach und erfordert keine benutzerdefinierte Ausgabevorlage.

Um das dynamisch generierte Menü zu unserer Vorlage hinzuzufügen, ersetzen Sie die obige Scheinnavigation durch den folgenden Wayfinder-Aufruf:

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

Der Parameter startId=`0` gibt an, wo das Menü beginnt, und indem wir ihn auf 0 setzen, weisen wir Wayfinder an, das Menü der obersten Ebene aufzurufen. &level=`1` weist Wayfinder an, nur 1 Ebene tief zu gehen (keine Untermenüs). Nach dem Hinzufügen des Snippet-Aufrufs sollte die Vorlage folgendermaßen aussehen:


	<!-- Navbar Div -->
	<div class="grid_12" id="navbar">
		[[Wayfinder? &startId=`0` &level=`1`]]
	</div>

	<div class="clear"> </div>
	<!-- End Navbar Div-->

Wenn Sie eine Vorschau eines Inhaltsdokuments anzeigen, sehen Sie, dass die Navigation jetzt aktiv ist und die aktuelle Seite in einem 'aktiven' Zustand mit class='active' gestaltet ist.

Sie werden auch feststellen, dass sich die Startseite ebenfalls im Menü befindet, wir möchten jedoch nicht, dass sie dort angezeigt wird. Kein Problem. Bearbeiten Sie die Startseite (klicken Sie mit der rechten Maustaste auf das Startdokument in der Dokumentstruktur und wählen Sie "Dokument bearbeiten"). Auf der Registerkarte "Allgemein" im Abschnitt "Dokumenteinstellungen" sehen Sie, dass die Option "Im Menü anzeigen" ausgewählt ist. Deaktivieren Sie einfach das Kontrollkästchen und speichern Sie das Dokument.

Wenn Sie zur Site zurückkehren, wird der Home-Link nicht mehr angezeigt.

Jetzt ist unsere Hauptnavigation in der Vorlage "Inhalt" abgeschlossen. Warte eine Minute! Was ist mit der Homepage? Müssen wir für jede Vorlage alles noch einmal wiederholen? Die Antwort ist nein!

Chunks: Wiederverwendbarer Code

Ein Block in MODx ist ein Stück wiederverwendbarer HTML-Code (kein PHP). Chunks können zum Speichern von Markups verwendet werden, die in mehreren Dokumenten üblich sind. Dies ist sehr praktisch, wenn Sie Ressourcen wie Vorlagen verwalten, die aus verschiedenen allgemeinen Markup-Elementen wie Kopf- und Fußzeile der Site bestehen. In unserem Beispiel, in dem wir nur zwei Vorlagen haben, ist dies nicht entscheidend. Stellen Sie sich jedoch vor, Sie hätten mehrere Vorlagen und müssten für jede ein gemeinsames Element aktualisieren. Wenn Sie einen Block verwenden, müssen Sie ihn nur einmal bearbeiten, und er wird überall dort gerendert, wo der Block aufgerufen wird (und wird nur einmal zwischengespeichert, wobei die Dateigröße niedrig gehalten wird). Ein Chunk wird durch die folgende Syntax identifiziert: {{Chunk-Name}}

Das Erstellen eines Blocks ähnelt dem Erstellen einer Vorlage. Gehen Sie im Manager zu Ressourcen > Ressourcen verwalten und wählen Sie die Registerkarte Chunks.

Geben Sie dem Block einen eindeutigen Namen und eine Beschreibung und platzieren Sie den HTML-Code im Feld "Blockcode". Wir werden 2 Blöcke erstellen, einen für die Kopfzeile und einen zweiten für die Fußzeile. In den Header-Chunk werden wir alles über dem Inhaltsbereich einfügen und ihn "Site-Header" nennen.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=[(modx_charset)]" />

<title>[*pagetitle*] — [(site_name)]</title>
<base href="[(site_url)]" />
<link rel="stylesheet" type="text/css" media="all" href="assets/css/reset.css" />

<link rel="stylesheet" type="text/css" media="all" href="assets/css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="assets/css/style.css" />

</head>
<body>

<div class="container_12">
	<!--Header Div -->
	<div class="grid_12">
		<a href="#"><img src="assets/images/header.png" alt=""/></a>

	</div>
	<div class="clear"> </div>
	<!-- END HeaderDiv -->
	
	<!-- Navbar Div -->
	<div class="grid_12" id="navbar">

		[[Wayfinder? &startId=`0` &level=`1`]]
	</div>
	<div class="clear"> </div>
	<!-- End Navbar Div-->

Und für den Fußzeilenblock wiederholen wir den Vorgang und kopieren das Markup, das bei der Fußzeile beginnt, als unseren Blockcode und nennen es "Site-Fußzeile".


	<!-- Footer -->
	<div class="grid_12" id="footer">
		<div class="grid_4 alpha">
			<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>

		</div>
	
		<div class="grid_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>
		</div>
	
		<div class="grid_4 omega">

			<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>
		</div>	
	</div>

	<div class="clear"> </div>
	<!--End Stories Area-->		

</div>
<div id="legal">
	<p>© [(site_name)]</p>
</div>
</body>
</html>

Jetzt können wir das Markup für Kopf- und Fußzeile durch die entsprechenden Blöcke in der Inhaltsvorlage ersetzen. Wenn Sie fertig sind, sollte die Vorlage ungefähr so aussehen:


{{site-header}}
	
	<!--Content Section-->
	<div id="content" class="grid_7">

		<div>
		<h1>[*pagetitle*]</h1>
		[*content*]
		</div>
	</div>
	
	<div class="grid_5">

		<div>
			<img class="topSection" src="assets/images/poster.jpg" alt="" id="poster"/>
		</div>

		<div class="spacer"></div>
		<div class="listing">
		<h2>Recent Articles</h2>
		<p><strong><a href="#" title="">Article Title</a></strong></p>

		<p><strong><a href="#" title="">Article Title</a></strong></p>
		<p><strong><a href="#" title="">Article Title</a></strong></p>

		<p><strong><a href="#" title="">Article Title</a></strong></p>
		</div>
	</div>

	
	<div class="clear"> </div>
	<!--End TopSection-->
	

	
	<!--Spacer-->
	<div class="grid_12 spacer">
	</div>

	<div class="clear"> </div>
	<!--End Spacer-->
	
{{site-footer}}

Jetzt können wir dieselben Blöcke auf die 'Home'-Vorlage anwenden und die gesamte Arbeit übernehmen, die wir mit der Inhaltsvorlage geleistet haben. Dies hilft uns beim Aktualisieren der Vorlagen. Nach Abschluss sollten Sie nun eine Vorschau der Site anzeigen und zwischen den Seiten navigieren können. Die allgemeinen Elemente sollten auf der gesamten Site konsistent bleiben.

Während der Vorschau der Website haben Sie möglicherweise festgestellt, dass etwas fehlt. Das Design besagt, dass auf jeder Seite ein Bild angezeigt wird. Es gibt jedoch keine Dokumentvariable zum Hinzufügen eines Bildes. Natürlich kann ich Bilder mit dem WYSIWYG-Editor hinzufügen, wenn das Bild Teil des Inhalts war. Unser Bild befindet sich jedoch in einer isolierten Spalte außerhalb des Inhaltsfelds. Sie sagen sich: "Wenn wir nur die Möglichkeit hätten, benutzerdefinierte Inhaltsfelder hinzuzufügen".

Template Variablen: Benutzerdefinierte Felder für Steroide

Das Konzept der benutzerdefinierten Inhaltsfelder ist keineswegs neu, und viele CMS haben benutzerdefinierte Felder implementiert. Die MODx-Lösung heißt Template Variablen (oder TV). Hierbei handelt es sich um benutzerdefinierte Felder, die für bestimmte Ausgabetypen formatiert werden können, eine programmgesteuert generierte Liste ausgeben oder ein Datenraster basierend auf dem Ergebnis einer Abfrage erstellen können. Grundsätzlich gibt es eine TV für alle Ihre Anforderungen. MODx stellt sicher, dass die benutzerdefinierten Daten immer zur Hand sind und nahtlos in den Standarddokumentinhalt integriert werden.

Die benutzerdefinierten Felder werden an das Dokument angehängt, indem sie mit der Vorlage verknüpft werden, die das Dokument verwendet (daher der Name Template Variables). Auf diese Weise können Sie anhand der von den Seiten verwendeten Vorlagen Gruppen von TV für bestimmte Bereiche Ihrer Website erstellen. Sie können eine Gruppe von TV für einen Abschnitt und einen anderen für einen anderen Abschnitt verwenden und bei Bedarf weiterhin die Gruppe von TV verwenden. Template Variablen verwenden dieselbe Syntax wie Dokumentvariablen: [*Template-Variable-Name*]

Wir werden einen Image-TV erstellen. Ein Image-TV generiert ein benutzerdefiniertes Eingabefeld mit Zugriff auf den Ressourcenmanager (MODx verwendet derzeit den MCPuk-Dateimanager), der den Bildbrowser sowie die Möglichkeit zum Hochladen neuer Bilder enthält.

Um eine neue Template Variable zu erstellen, gehen Sie im Manager zu Ressourcen > Ressourcen verwalten, wählen Sie die Registerkarte 'Template Variable' und klicken Sie auf den Link 'Neue Template Variable'. Füllen Sie das Feld Variablenname mit einem eindeutigen Namen aus. Dieser Name wird verwendet, um die TV sowie den Platzhalter zu identifizieren. Wir werden unsere TV "Image" nennen und es mit dem Platzhalter [*image*] referenzieren. Das Feld "Beschriftung" wird verwendet, um einen Anzeigenamen anzugeben, der zusammen mit dem Feld "Beschreibung" als Bezeichnung für die TV verwendet wird. Für den Eingabetyp möchten wir die Option Bild aus dem Pulldown-Menü auswählen. Optional können wir ein Ausgabe-Widget verwenden, um die Ergebnisse beim Rendern im Frontend zu formatieren. In unserem Fall verwenden wir jedoch kein Ausgabe-Widget.

Der letzte Schritt besteht darin, die Inhaltsvariable den Vorlagen zuzuweisen, in denen wir sie verwenden möchten, indem Sie das Kontrollkästchen neben dem Namen der Vorlage im Abschnitt Vorlagenzugriff aktivieren. Für unser Projekt haben nur die Inhaltsseiten ein Bild, sodass wir die Vorlage "Home" nicht einfügen müssen.

Optional können wir die TV auch auf bestimmte Benutzergruppen beschränken. Dies ist sehr praktisch bei der Verwendung von benutzerdefinierten Inhalten, die nur Administratoren bearbeiten können sollten.

Speichern Sie die TV, und Sie sollten ihn jetzt mit den Ressourcen der Site aufgelistet sehen.

Wenn Sie jetzt ein Inhaltsdokument bearbeiten, haben Sie jetzt Zugriff auf das gerade erstellte Image TV. Klicken Sie auf die Schaltfläche "Einfügen", die an das Feld angehängt ist, um ein Bild hochzuladen oder ein Bild aus dem Ressourcenbrowser auszuwählen.

Sobald das Bild im Ressourcenbrowser ausgewählt wurde, ist sein Pfad im Eingabefeld verfügbar und das Bild wird direkt im Manager unter dem Bildfeld angezeigt. Obwohl MODx keine nativen Bildbearbeitungsfunktionen bietet, stehen verschiedene Add-Ons zur Größenänderung und Erstellung von Miniaturansichten zur Verfügung, die nahtlos mit Image-TV zusammenarbeiten können.

Wenden Sie als Nächstes einfach Image-TV auf die Vorlage "Inhalt" an, indem Sie den statischen Bildpfad durch den Platzhalter für die Template Variable ersetzen:


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

</div>

Wir sind jetzt mit dem Gesamtformat der Website fertig. Sie können jetzt den Inhaltsseiten Text und Bilder hinzufügen, wenn Sie möchten. Rufen Sie den Bearbeitungsmodus auf, indem Sie mit der rechten Maustaste auf das zu bearbeitende Dokument in der Dokumentstruktur klicken und Dokument bearbeiten auswählen. Nach dem Hinzufügen von dem Content und den Bilder nimmt die Site Gestalt an. Und wenn Sie sich die Site ansehen, werden Sie feststellen, dass sie dem ursprünglichen Prototyp sehr ähnlich sieht (wie es sein sollte).

Hierarchie: Eltern und Kinder

Zum Auftakt dieser letzten Strecke benötigen wir mindestens 5 Artikel, mit denen wir arbeiten können. Wir haben gesehen, wie man Dokumente erstellt, hier nichts Neues. Dieses Mal werden wir die neuen Dokumente jedoch als untergeordnete Elemente des vorhandenen Dokuments "Artikel" platzieren, als wäre es ein Ordner. In diesem Fall wird der Dokumentbaum sehr nützlich, da er Ihnen eine visuelle Darstellung der übergeordneten/untergeordneten Hierarchie des Dokuments bietet.

Melden Sie sich beim Manager an und klicken Sie in der Dokumentstruktur mit der rechten Maustaste (bei gedrückter Ctrl-Taste auf den Mac) auf das Dokument mit dem Titel "Artikel", um das Kontextmenü aufzurufen. Wählen Sie "Dokument hier erstellen" aus den Menüoptionen, um den Bildschirm "Dokument erstellen/bearbeiten" zu öffnen.

Stellen Sie sicher, dass für das Dokument die Vorlage "Inhalt" verwendet wird, und füllen Sie die Inhaltsfelder einschließlich der Image-TV aus und speichern Sie das Dokument.

Wenn Sie sich jetzt den Dokumentbaum ansehen, sehen Sie ein + neben dem Artikeldokument. Dies bedeutet, dass dieses Dokument untergeordnete Elemente enthält. Klicken Sie auf das +, um die untergeordneten Dokumente zu erweitern und anzuzeigen.

Erstellen Sie jetzt 4 weitere untergeordnete Elemente, indem Sie entweder den gerade durchgeführten Vorgang wiederholen oder das vorhandene Dokument duplizieren (Tipp: Das Duplizieren des Dokuments spart Zeit, da der Inhalt auch dupliziert wird). Um ein Dokument zu duplizieren, wählen Sie das Dokument aus und wählen Sie im Kontextmenü die Option "Dokument duplizieren". Das neue Dokument wird auf derselben Ebene wie das Original erstellt.

Nach Fertigstellung sollte das Artikeldokument 5 untergeordnete Dokumente mit Inhalt enthalten. Wenn Sie im Front-End eine Vorschau eines Artikeldokuments anzeigen, werden Sie feststellen, dass das Hauptmenü anzeigt, dass diese Dokumente untergeordnete Elemente des Menüelements Artikel sind.

Ditto: Inhalt mehrfach verwerten

Unsere letzte Aufgabe in diesem Tutorial besteht darin, die Homepage zu erstellen. Wie bei den meisten Magazinseiten wird der auf der Startseite angezeigte Inhalt von Seiten innerhalb der Website und nicht von der Startseite selbst extrahiert. Unser Design sieht eine Headline-Story und vier sekundäre Storys vor, und wir möchten, dass die Überschrift der Artikel ist, der zuletzt erstellt wurde (in einem realen Szenario würden wir höchstwahrscheinlich das Veröffentlichungsdatum verwenden). Außerdem möchten wir, dass dies automatisiert wird, sodass der Editor nur den Artikel hinzufügen muss und sich nicht mit der Startseite befassen muss.

Um dies mit MODx zu erreichen, verwenden wir ein Snippet namens Ditto (entwickelt von Mark Kaplan). Dies ist eines der nützlichsten Werkzeugs, die Sie in jeder CMS-Umgebung sehen werden. Ditto macht so viel, so gut, dass es schwierig ist, zusammenzufassen, was es kann. Grundsätzlich bietet es Ihnen die Möglichkeit, den Inhalt der Website einfach abzufragen und dann die Ergebnisse mit mehreren Filtern zu optimieren, während der Entwickler dennoch die vollständige Kontrolle über die Ausgabestruktur der Ergebnisse hat.

Anhand der Home-Vorlage können wir feststellen, dass es zwei verschiedene Ausgabeanzeigen gibt, mit denen wir arbeiten müssen. Es gibt den oberen Abschnitt mit dem Überschriftenartikel, der auch das Bild für den Artikel enthält. Und es gibt einen zweiten Abschnitt, der eine Zusammenfassung von 4 aktuellen Artikeln enthält, aber kein Bild enthält:

Wie bei den meisten Lösungen in MODx gibt es verschiedene Ansätze, um unsere Aufgabe zu erfüllen. Wir könnten die Überschrift und die Sekundärartikel unabhängig voneinander mit einzelnen Ditto-Aufrufen behandeln, das würde gut funktionieren. Wir werden dies jedoch mit einem einfachen Ditto-Aufruf und anschließend nur einer Datenbankabfrage tun. Denken Sie daran, dass Ditto ein Snippet ist und daher der Snippet-Syntax folgt. Dies bedeutet, dass wir im Snippet-Aufruf Parameter definieren können, um die Aktion des Snippets zu konfigurieren.

Bearbeiten Sie die Home-Vorlage (eine gute Idee, zuerst ein Backup zu erstellen, da wir später auf das ursprüngliche Markup verweisen müssen) und ersetzen Sie den gesamten Inhaltsabschnitt durch diesen Ditto-Aufruf:

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

Die Home-Vorlage sieht nun folgendermaßen aus:


{{site-header}}
	
	[[Ditto? &parents=`2` &display=`5` &orderBy=`createdon DESC`]]
	
	<div class="clear"> </div>
	<!--End Stories Area-->

	
	<!--Spacer-->
	<div class="grid_12 spacer">
	</div>
	<div class="clear"> </div>
	<!--End Spacer-->

	
{{site-footer}}

Im Aufruf haben wir folgende Parameter definiert:

& parent=`2` weist Ditto an, nur Dokumente zurückzugeben, die Kinder der Dokument-ID 2 sind.
& display=`5` weist Ditto an, nur 5 Artikel anzuzeigen
& orderBy=`createdon DESC` und dies weist Ditto an, die Ergebnisse nach dem Feld 'createdon' (dem Zeitstempel für die Erstellung des Dokuments) in absteigender Reihenfolge zu sortieren (ähnlich wie bei einer SQL-Abfrage).

Zeigen Sie eine Vorschau der Startseite an, und Sie sehen die Ergebnisse unserer Abfrage als Liste von Artikeln mit einigen zusätzlichen Standardinformationen. Sie können experimentieren, indem Sie die Parameterwerte ändern und sehen, wie sich die Ergebnisse entsprechend ändern.

Wir erzielen die richtigen Ergebnisse, aber die Formatierung und der Inhalt sind nicht ganz da. Wie bereits erwähnt, als wir über Wayfinder gesprochen haben, können wir mit Ditto die Ausgabe auch mithilfe von Vorlagenblöcken so formatieren, dass sie unseren Anforderungen entsprechen. Wir werden nun die Formatierung auf unsere Ditto-Ergebnisse anwenden.

Wie der Name schon sagt, handelt es sich bei Vorlagen-Chunks um Chunks. Wechseln Sie daher zunächst zur Registerkarte Chunks im Abschnitt Ressourcen verwalten. Erstellen Sie einen neuen Block und geben Sie ihm einen beschreibenden Titel wie "Home-Artikel". Dies ist der Vorlagenblock (oder tpl) für die sekundären Artikel.

Wir werden das Markup aus der ursprünglichen Homepage-Vorlage als Ausgangspunkt für unser tpl verwenden. Dann werden wir den statischen Text durch Platzhalter durch dynamischen Inhalt ersetzen. Dies ähnelt dem Hinzufügen von Platzhaltern zu den Site-Vorlagen, jedoch werden die Platzhalter eher von der Ditto-Abfrage als vom aktiven Dokument zurückgegeben.

Hier ist das Original-Markup. Fügen Sie dies als Inhalt unseres neuen Blocks ein:


	<div class="grid_3">

		<h2><a href="#">Sample Article Title</a></h2>
		<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>
		<p><a href="#"><strong>Finish Reading...</strong></a></p>

	</div>

Ersetzen Sie den statischen Inhalt durch dynamische Platzhalter. Beachten Sie, dass bei Verwendung in einem Vorlagenblock die folgende Syntax für Platzhalter verwendet werden muss: [+varName+].

Nach dem Hinzufügen der Platzhalter sollte der obige Block nun wie folgt aussehen:

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

Bearbeiten Sie den Ditto-Aufruf so, dass er den Parameter & tpl=`home-articles` enthält, um den Vorlagenblock zu definieren, der für die Ausgabeanzeige verwendet werden soll.

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

Zeigen Sie eine Vorschau der Startseite an, und die Artikel werden in absteigender Reihenfolge als Spalten angezeigt.

Beachten Sie, dass wir den gesamten Artikelinhalt erhalten, aber alles, was wir wollen, ist der erste Teil des Artikels, der nach einer bestimmten Anzahl von Zeichen als Zusammenfassung abgeschnitten wird. Kein Problem. Wir können dem Ditto-Aufruf einfach & extenders=`summary` hinzufügen und den Platzhalter [+summary+] anstelle des Platzhalters [+content+] im tpl-Block verwenden. Ein Extender erweitert die Ditto-Funktion für einen bestimmten Zweck, z. B. ein Plugin. In diesem Fall wird die Zusammenfassungsfunktion hinzugefügt. Der tpl-Block sollte jetzt so aussehen:

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

Unser Ditto-Anruf sieht bisher so aus:

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

Und die Homepage sollte jetzt so aussehen:

Der letzte Schritt besteht darin, den neuesten Artikel zu formatieren und als Überschrift zu formatieren. Ditto stellt uns hierfür mithilfe des Parameters tplFirst eine Methode zur Verfügung, mit der das erste zurückgegebene Element personalisiert angezeigt wird.

Erstellen Sie einen neuen Block, nennen Sie ihn "Home-Headline" und fügen Sie das ursprüngliche Markup für den Überschriftenabschnitt ein:


	<!--Top Section-->
	<div class="grid_7 topSection">

		<div><h1>Sample Article Title</h1>
		<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>

		</div>
	</div>
	
	<div class="grid_5 topSection">
		<div>
			<img src="assets/images/poster.jpg" alt="" id="poster"/>

		</div>
	</div>
	
	<div class="clear"> </div>
	<!--End TopSection-->
	
	<!--Spacer-->

	<div class="grid_12 spacer">
	</div>
	<div class="clear"> </div>
	<!--End Spacer-->

Ersetzen Sie den statischen Inhalt durch die Platzhalter, einschließlich des Platzhalters für die Template Variable "Bild" (benutzerdefiniertes Feld), um auch das Bild des Artikels in die Überschrift zu bringen:


	<!--Top Section-->
	<div class="grid_7 topSection">
		<div><h1>[+pagetitle+]</h1>

		<p>[+summary+]</p>
		<p><a href="[~[+id+]~]"><strong>Finish Reading...</strong></a></p>
		</div>

	</div>
	
	<div class="grid_5 topSection">
		<div>
			<img src="[+image+]" alt="" id="poster"/>

		</div>
	</div>
	
	<div class="clear"> </div>
	<!--End TopSection-->
	
	<!--Spacer-->

	<div class="grid_12 spacer">
	</div>
	<div class="clear"> </div>
	<!--End Spacer-->

Speichern Sie den Block und hängen Sie den Ditto-Aufruf an, um den Parameter &tplFirst=`home-headline` einzuschließen, der Ditto anweist, den Block `home-headline` zum Formatieren des ersten zurückgegebenen Ergebnisses zu verwenden. Die endgültige Homepage-Vorlage, einschließlich des letzten Ditto-Aufrufs, sieht folgendermaßen aus:


{{site-header}}
	
	[[Ditto? &parents=`2` &display=`5` &orderBy=`createdon DESC` &tpl=`home-articles` &tplFirst=`home-headline` &extenders=`summary`]]
	<div class="clear"> </div>

	<!--End Stories Area-->
	
	<!--Spacer-->
	<div class="grid_12 spacer">
	</div>
	<div class="clear"> </div>

	<!--End Spacer-->
	
{{site-footer}}

Zeigen Sie eine Vorschau der Startseite an, und Sie sollten so etwas wie das Bild unten sehen. Klicken Sie auf die Links "Lesen Sie weiter" und Sie sollten zur Artikelseite mit der vollständigen Geschichte weitergeleitet werden.

Die Seite funktioniert jetzt. Mit den Informationen, die wir oben erfahren haben, sollten Sie in der Lage sein, selbst den letzten Schliff zu geben. Versuchen Sie, mit Ditto die Liste "Zuletzt verwendete Artikel" auf den Inhaltsseiten zu erstellen, oder fügen Sie auf der Artikelseite einen Artikelindex hinzu.

Abschluss

Dieses Tutorial war etwas ehrgeizig. Mein Ziel war es zu veranschaulichen, wie einfach es ist, mit MODx zu arbeiten. Und obwohl ich Ihnen Konzepte wie {{chunks}} [*document-variables*] und [[Snippets]] vorgestellt habe, zeigt dies nur einen winzigen Bruchteil dessen, worum es bei MODx geht. Ich fordere Sie dringend auf, MODx herunterzuladen, zu installieren und selbst auszuprobieren. Die MODx-Community ist die treibende Kraft für ihren Erfolg. Das Community-Forum ist sehr freundlich und bietet eine Fülle von Informationen. Schauen Sie sich diese an.

Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tuts und Artikel.