De:Tutorials GeteiltesMenu
From MODx Wiki
Contents |
Prolog
In diesem Tutorial möchte ich zeigen, wie man ein zweigeteiltes Menü erstellt. Doch was hat man sich darunter vorzustellen? Als Beispiel wäre die MODx-Website selbst zu nennen.
Beim Aufruf der MODx-Website wird im rechten Teil eine Navigation angezeigt, die die Bereiche der Website abdeckt. Unter anderem z. B. "Documentation". Klickt man auf solch einen Breich, erscheint in manchen Bereichen unterhalb der "Hauptnavigation" eine "bereichsinterne Navigation".
Und genau das wollen wir hier nachbilden. Den ersten Gedanken, wie so etwas realisierbar ist, habe ich gleich verworfen: mehrere Templates. Ja, damit funktioniert's zwar, aber genügt unseren Ansprüchen in punkto Flexibilität nicht. Doch da hilft uns ein anderes Konzept von MODx: die Template-Variablen in Verbindung mit dem Binding @INHERIT.
Wichtig: Der Dokumentenbaum sollte so aufgebaut sein, daß direkt unterhalb der Wurzel die "Bereiche" gelistet sind. Stellen wir uns also den Dokumentenbaum von MODx vor, müssen unter der Wurzel die Punkte "Home", "Features", "About", "Documentation", etc. gelistet sein. Diese Dokumente enthalten wiederum die bereichs-spezifischen Inhalte.
Vorgehen
Schritt 1: Hauptnavigation einrichten
Das Einrichten der Hauptnavigation erfolgt, wie gewohnt, mit Hilfe des Snippets WayFinder. Der Aufruf von WayFinder erfolgt im Template selbst. Also:
- Ressourcenverwaltung öffnen
- Zum Reiter "Templateverwaltung" wechseln
- Das eigene Template öffnen
- Die Stelle suchen, an der die Hauptnavigation erscheinen soll und folgendes einfügen:
Hierbei ist der Parameter "level" von besonderer Bedeutung. Er gibt an, wie tief WayFinder im Dokumentenbaum graben soll, um die Navigation aufzubauen. Da wir ja nur die Bereiche abdecken wollen, die direkt unter der Wurzel im Dokumentenbaum angelegt sind, geben wir hier eine 1 an.- [[Wayfinder? &startId=`0` &level=`1`]]
Somit haben wir die übergeordnete Hauptnavigation angelegt. Es werden nur die Bereiche (also die Dokumente in der ersten Ebene nach der Wurzel) aufgelistet und bei Klick angezeigt.
Soweit nicht schwierig. Kommen wir zum interessanteren Teil: die bereichsinterne Navigation.
Schritt 2: Template-Variable anlegen
Nehmen wir an, irgendwo in unserem Template haben wir einen Bereich, der von Bereich zu Bereich unterschiedlich sein soll. MODx bietet uns mit den "Template-Variablen" ein Konzept, daß es erlaubt, - unabhängig vom eigentlichen Dokumentinhalt - zu jedem Dokument individuell Inhalt anzubieten, der flexibel im Template eingebaut werden kann. Und genau so etwas wollen wir ja. Im Bereich "Documentation" wollen wir evtl. etwas anderes anzeigen als im Bereich "About". Und das immer an der gleichen Stelle, ohne zwei verschiedene Templates anlegen zu müssen. Aber genug der Theorie:
- In der Ressourcenverwaltung zum Reiter "Template-Variablen" wechseln
- Eine neue Template-Variable anlegen
- Einen Namen vergeben, z. B. "sidebar"
- Als Eingabetyp wählen wir "Textarea"
- Und jetzt der Knackpunkt: Als Standardwert geben wir "@INHERIT" an
- In den Template-Berechtigungen die Templates markieren, die von den Dokumenten genutzt werden
- Template-Variable speichern
Warum ist "@INHERIT" so ein Knackpunkt? Das werde ich nachher erklären, wenn die Sache etwas überschaubarer ist ;)
Jedenfalls hätten wir schon mal unsere Template-Variable. Diese ist jetzt in jedem Dokument individuell änderbar, das ein Template verwendet, das in den Template-Berechtigungen der Template-Variablen angegeben wurde. Nutzt also "Documentation" das Template "MODxTemplate" und wurde "MODxTemplate" in den Template-Berechtigungen der Template-Variablen "sidebar" angegeben, kann nun im Dokument "Documentation" die Variable "sidebar" individuell belegt werden.
Schritt 3: Template-Variable in Template einbinden
Damit unsere bereichsinterne Navigation auch später angezeigt wird, muß sie natürlich in den entsprechenden Templates eingebunden werden.
- Den Reiter "Templateverwaltung" in der Ressourcenverwaltung öffnen
- Für jedes Template, das die Template-Variable "sidebar" verwenden soll, den Eintrag
einfügen. In diesem Beispiel in einem div-Container.- <div id="sidebar">[*sidebar*]</div>
Wird nun ein Dokument aufgerufen, das eines der geänderten Templates verwendet, wird der Inhalt der Template-Variablen "sidebar" an der Stelle eingefügt, an der der Aufruf [*sidebar*] eingebunden wurde. Wird in der Template-Variablen "sidebar" ein "Hallo Welt" angegeben, erscheint dies auf der Website. Gibt man in einem anderen Dokument "MODx rocks" ein, wird das bei Aufruf dieses Dokuments angezeigt. Sehr nettes Feature also. Fehlt der letzte Schliff: die Navigation.
Schritt 4: Die bereichsinterne Navigation
Ich rede die ganze Zeit davon, daß die Template-Variable "sidebar" für jedes Dokument individuell belegt werden kann. Schauen wir es uns an:
- Öffne ein Dokument in der Ebene direkt unter der Wurzel zum Bearbeiten
- Wechsle zum Reiter "Allgemein"
- Scrollst Du etwas weiter nach unten, findest Du den Bereich "Template-Variablen" und wenn Du alles richtig gemacht hast, auch unsere Template-Variable "sidebar". Diese ist mit "@INHERIT" vorbelegt. Macht nichts.
- Markiere den Inhalt der Textbox zur "sidebar" und gib folgendes ein:
Wichtig hierbei: Gib für den Parameter "startId" die ID des Dokumentes an, daß Du gerade bearbeitest. Wirf' dazu einfach einen Blick in den Dokumentenbaum. Hinter dem gerade geöffneten Dokument findest Du die ID in Klammern.- <h1>Navigation</h1>[[Wayfinder? &startId=`<ID>`]]
- Speichern ...
Schritt 5: Kontrolle
Öffne die Website, klicke in der Hauptnavigation auf das Dokument, dessen Template-Variable Du gerade geändert hast und staune: In dem Bereich, den Du im Template für die Template-Variable "sidebar" vorgesehen hast, erscheint eine weitere Navigation. Und nicht nur das: Klickst Du auf einen Unterpunkt, bleibt die Navigation da. Wie das? Du ahnst es vielleicht: @INHERIT.
Als Standardwert für die Template-Variable "sidebar" haben wir @INHERIT angegeben. In jedem Dokument steht also für die Template-Variable "sidebar" der Wert @INHERIT. Es sei denn, Du änderst ihn. Doch das hast Du nur in einem einzigen Dokument getan. Dort hast Du die Navigation eingefügt. Die Unterdokumente dieses Dokuments beinhalten in der Template-Variablen "sidebar" noch den Wert @INHERIT. Und der bewirkt, daß der Wert der Template-Variablen vom Vaterdokument übernommen wird (falls der keinen hat, wird bei dessen Vater nachgeschaut, usw.). D. h. die bereichsinterne Navigation vererbt sich an alle Unterdokumente. Es sei denn, Du gibst in einem Dokument einen eigenen Wert an.
Doch @INHERIT hat auch einen Wermutstropfen: Entweder Du wendest @INHERIT an und übernimmst alles vom Vater oder gibst einen eigenen Wert an. Eine Mixtur funktioniert nicht. Wolltest Du also in einem Dokument zusätzlich zur Navigation noch eine weitere Information geben (in der Art "@INHERIT Zusatzinfo"), klappt das so nicht. Du müßtest eine weitere Template-Variable anlegen, die Du dann mit dem zusätzlichen Inhalt füttern kannst. Oder aber Du übernimmst einfach den Inhalt des Vaterdokuments und speicherst diesen zusätzlich mit den Zusatzinfos im Unterdokument.
