Ditto Template

ModX Tutorial

Changing the net, one site at a time…

Ditto Template
home-iconwarning-icon

1. Chunk fürs Ditto-Template anlegen

   

Zuerst legen wir nun ein Chunk an, das bestimmt, wie unser Template aussehen soll. Es wird dann das Template mittels eines Calls { {ditto-template}} aufrufen.

elemente-verwaltung

Dazu navigieren wir in "Elemente" > "Elemente-Verwaltung", klicken in den Reiter "Chunks" und wählen die Option "Neues Chunk".

   
neuer-chunk-ditto 

Das Template, das wir nun erzeugen werden, besteht aus reinem HTML. Trotzdem werden wir einige "Platzhalter" in diesem TV integrieren.
Zuerst soll dein Platzhalter für den Titel des Dokument sowie dessen Inhalt und ein "read more" Link eingefügt werden.

Die Syntax für "placeholders" ist [ +placeholder+ ]. Ditto unterstützt eine Vielzahl an "placeholders".
 
2. Code eingügen
  
Unser Template wird also eine h3-Überschrift haben, einen Introtext aufweisen und zum Child-Dokument zurück verlinken. Die Link-Syntax ist mit der HTML-Notation identisch, lediglich der Links ist ein Ditto-Placeholder "[ +url+]".

<h3><a href="[ ~[ +ID+]~]"> [ +pagetitle+]</a></h3>
<a href="[ +url+]"> weiter lesen ... </a>
 
ditto-chunk
 
3. Call in den Blog-Container einsetzen
 
 blog-child-documents  Wir gehen jetzt in den ModX-Manger und rufen unsere Blog-Seite mit der ID 52 auf.

Dort fügen wir den Ditto-Call in den Content-Bereich ein: Zu beachten ist hier die Eingabe des korrekten ID des Blogs sowie des Chunk-Namens.
 top.icon  

[ !Ditto? &parents=`52` &tpl =`DittoTemplate`! ] 

Abschließend werden die Änderungen gespeichert. Ruft man die Seite nun im Browser auf, so ergibt sich folgendes Bild:

 


Wir erkennen die <h3> Überschrift: Entry#3 , den Introtext und das "read more", was mit dem betreffenden Blog-Artikel verlinkt ist.
 top.icon