De:Template

From MODx Wiki

Jump to: navigation, search

Contents

[edit]

Templates in MODx

#Basics | #MODx Tags | #Cache | #Snippets | #Chunks


[edit]

Basics

Templates sind normales HTML. Sie legen einen Rahmen fest für die durch MODx-Tags eingefügten dynamischen Inhalte. In diesem Bereich geht es um die Grundlagen des Aufbaus eines XHTML-Layouts, das per CSS ein Aussehen verpasst bekommt und das Einfügen der wichtigsten MODx-Tags.

Templates werden ab MODx 0.9.5 im Manager (Backend) unter "Ressourcen > Recourcenverwaltung > Templateverwaltung" angelegt und verwaltet.
Per "Templateverwaltung > Neues Template" wird der Dialog zur Eingabe eines neuen Templates angezeigt. Hier muss zumindest ein Name und natürlich das Template selbst, HTML-Tags plus MODx-Tags (siehe weiter unten), eingegeben werden.
Natürlich kann das Template auch in einem externen Editor gebaut und hier hineinkopiert werden.

Schauen wir uns ein einfaches zweispaltiges Template genauer an: 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  4. <title>-------- hier soll MODx den Titel des Dokuments ausgeben --------</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  9. <div id="banner">
  10. <h1>Eine Überschrift</h1>
  11. </div>
  12. <div id="wrapper">
  13.   <div id="container">
  14.     <div id="content">
  15.     -------- Hier soll MODx den Inhalt des Dokumentes ausgeben --------
  16.     </div> <!-- ende von content div -->
  17.   </div> <!-- ende von container div -->
  18.   <div id="sidebar">
  19.   -------- hier platziert MODx die Navigation --------
  20.   </div>
  21. <!-- end of sidebar div -->
  22.   <div class="clearing"> </div>
  23. </div> <!-- ende von wrapper div -->
  24. <div id="footer">
  25. -------- Und hier vielleicht noch ein Schnipsel, in MODx Chunk genannt --------
  26. </div>
  27. </body>
  28. </html>

Und für ein erstes einfaches Layout geben wir etwas CSS hinzu. Das muss in die Datei, auf die in obigem Beispiel über link rel="stylesheet" type="text/css" href="style.css" Bezug genommen wird (siehe Zeile 6), also in diesem Beispiel die Datei für die der Name style.css vergeben wurde. 

  1. * { padding:0; margin:0; border:0; }
  2. body { margin:0 20px; }
  3. #banner { background: #cdcdcd; border-left:1px solid #ababab; border-right:1px solid #ababab; }
  4. #banner h1 { padding:10px; }
  5. #wrapper { background: #ffffff; border-left:1px solid #ababab; border-right:1px solid #ababab; }
  6. #container { width: 100%; background: #ffffff; float: left; margin-right: -200px; }
  7. #content { background: #ffffff; margin-right: 200px; height:200px; border-right:1px dotted #ababab; }
  8. #sidebar { width: 200px; float: right; }
  9. #footer { background: #cdcdcd; border-left:1px solid #ababab; border-right:1px solid #ababab; }
  10. .clearing { clear:both; height:0; }

Jetzt haben wir ein leeres dreizeiliges Layout in dem die mittlere Zeile in einen linken und rechten Bereich aufgeteilt ist.

Im nächsten Teil geht es darum wie wir mit den MODx-Tags die Leere beseitigen.

#Basics | #MODx Tags | #Cache | #Snippets | #Chunks

[edit]

MODx Tags

Diese Tags sind Elemente die an der eingefügten Stelle durch Inhalte, Navigation oder andere Funktionalität ersetzt werden.

Unser vorheriges Beispiel gibt noch nicht viel her, erwecken wir es mit einigen Tags zum Leben.

[edit]

Seitentitel

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

Gibt den in den systemweiten Einstellungen eingetragenen Namen und den Titel des Dokumentes aus.

[edit]

Inhalt

  1. <div id="content">
  2.   <h1>[*longtitle*]</h1>
  3.   [*content*]
  4. </div>

Der "lange Titel" aus dem Dokument-Dialog und die fest eingebaute Template-Variable namens Content.

[edit]

Fußzeile

  1. <div id="footer">
  2. Copyright © <a href="mailto:[(emailsender)]">[(site_name)]</a> 2005
  3. </div>

Die eMail-Adresse aus den systemweiten Einstellungen und wieder der Website-Name wie schon im Titel.

#Basics | #MODx Tags | #Cache | #Snippets | #Chunks

[edit]

Cache

Man kann für jedes Dokument angeben ob es cachebar ist, also in einem Zwischenspeicher gehalten wird. Ist diese Option eingeschaltet wird das Dokument nur beim ersten Aufruf komplett ausgewertet und das Ergebnis in diesem Zwischenspeicher abgelegt. So kann der erneute Aufruf stark beschleunigt werden.

Da das bei manchen Seiten oder Teilen davon keinen Sinn macht, wie zu.B. bei einem Kontakt-Formular, kann man durch Einstellungen für die ganze Seite oder für Teile davon dieses Verhalten deaktivieren: Für die ganze Seite wird einfach das Häkchen in den Einstellungen entfernt.

Für Teile der Seite, die eben durch die MODx-Tags "abgeholt" werden erreicht man das indem man den Aufruf statt mit 2 eckigen Klammern mit eckiger Klammer und Ausrufezeichen umschliesst: 
  1. [[MODxTag]] [!MODxTag!]

Der Prozess für das dynamische Ersetzen des MODx-Tags wird so bei jedem Seitenaufruf ausgeführt, auch wenn die Seite selber cachebar ist.


#Basics | #MODx Tags | #Cache | #Snippets | #Chunks

[edit]

Snippets

[edit]

Überblick

Snippets sind eine der wichtigsten Möglichkeiten in MODx. Sie bringen verschiedenste Funktionalitäten in eine Website, unter anderem auch das Menü.

Snippets sind PHP-Code und übernehmen Aufgaben wie Datenbank-Abfragen, Auslesen von Sessions und Cookies usw. Meistens kann mit Parametern im Aufruf genauer gesteuert werden was getan oder ausgegeben wird.
Einige wichtige Snippets sind fest eingebaut bzw. können bei der Installation ausgewählt werden.
Um das Haupt-Menü z.B. kümmern sich die Snippets Wayfinder oder der Vorgänger Dropmenu, für einen "Brotkrümel-Pfad" ist das Snippet Breadcrumbs zuständig.

Die meisten Snippets werden in der Datenbank gespeichert, manche benötigen einige Dateien die in /assets/snippets/snippetname abgelegt werden müssen. Bei letzteren stellt das Snippet in der Datenbank die Verbindung zu den externen Dateien her.

[edit]

Installation

Snippets werden im Manager in Ressourcen > Snippets installiert und verwaltet. Durch klick auf "neues Snippet" erscheint der Dialog in dem der auszuführende PHP-Code und ein Name eingetragen werden muss. Mit diesem Namen wird das Snippet dann im Template oder Dokument per 
  1. [[Snippetname]] bzw. ungecached [!Snippetname!]
aufgerufen bzw. ausgeführt.
[edit]

Das Menü-Snippet

#Basics | #MODx Tags | #Cache | #Snippets | #Chunks

[edit]

Chunks

Retrieved from "http://wiki.modxcms.com/index.php/De:Template"
Personal tools