HTML Markup

Start des HTML Markups

Die Seite die ich erstellen will sollte in etwa so aussehen wie unten dargestellt.

html vorlage

Nun lass uns starten um aus der Vorlage ein MODx Template zu machen. Als erstes entfernen wird das überflüssige Markup. Hier zeige ich euch das komplette Markup (ohne das CSS). Für diese Tutorial, kopiere es heraus und füge es in deinem Editor ein.

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta httpequiv="contenttype" content="text/html; charset=iso88591">
<title>CixDegrees.com</title>
<link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/tutorial/css/style.css" />
</head>
<body>
<div id="branding">
</div> <! end of branding >
<div id="contentmain">
<div id="contenttext">
<h2>Welcome to CixDegrees</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras a nisi. 
Donec blandit, ipsum id bibendum posuere, neque magna tincidunt nisi, nec 
facilisis odio turpis sed odio. Donec nibh pede, tempor aliquet, vehicula 
eu, pellentesque vel, urna. Nullam at arc eu eros pretium viverra. Aenean 
vel mi quis augue cursus viverra. Cras at quam. Pellentesque imperdiet 
nunc id lacus. Duis justo pede, tincidunt sed, accumsan sed, sollicitudin 
aliquet, dui. Aliquam sed tortor at enim volutpat convallis.
</p> 
<p> 
Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Suspendisse nisi. Morbi elementum, diam ac 
pellentesque scelerisque, nulla nulla pharetra sapien, nec rutrum erat 
eros sed velit. Aenean dignissim blandit tortor. Nulla condimentum, ante 
quis volutpat blandit, ante lorem nonummy dui, eu fermentum nibh leo id  
</p>
</div> <! End contenttext >
</div> <! End contentmain >
<div id="contentsub">
<div id="contentsubtitle">
<h2>News</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div> <! end contentsub title >
<div id="navigation">
<ul>
<li class="active"><a href="/home" title="Home" >Home</a></li>
<li><a href="/blog" title="Blog" >Blog</a></li>
<li><a href="/services" title="Services" >Services</a></li>
<li><a href="/search" title="Search" >Search</a></li>
<li><a href="/misc" title="Misc." >Misc.</a></li>
<li><a href="/about" title="About" >About</a></li>
<li class="last"><a href="/login" title="Login" >Login</a></li>
</ul>
</div><! end of navigation >
</div> <! end contentsub >
<div id="siteinfo">
<p>Copyright  2007 CixDegrees.com  Powered by MODx  Hosted by (mt)MediaTemple</p>
</div> <! end of >
</body>
</html>

Die Header Modifikationen

Zuerst fügst du eine neue Zeile direkt unter den META Angaben ein:

<base href="[(site_url)]" />

Diese Angabe setzt die Basis URL, wichtig um zB. Bilder zu finden etc. Die URL kommt von MODx/Access/templates/. Nun löschen wir den Text zwischen den <title> Tags und ersetzen diese durch folgende MODx Tags:

<title> [*pagetitle*] | [(site_name)] </title>

Nun hast du immer den Titel eines Dokumentes, welches du mit dem "neues Dokument" Button erstellst und den Seitennamen den du unter Werkzeuge -> Konfiguration eingestellt hast als Titel. Nun ändern wir den Pfad der CSS Datei in dem wir folgende MODx Tags hinzufügen.

<link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/tutorial/css/style.css" />

Die Navigation Modifikationen

Als nächstes lösche den nachstehenden Code im "navigation" div:

<ul>
<li class="active"><a href="/home" title="Home" >Home</a></li>
<li><a href="/blog" title="Blog" >Blog</a></li>
<li><a href="/services" title="Services" >Services</a></li>
<li><a href="/search" title="Search" >Search</a></li>
<li><a href="/misc" title="Misc." >Misc.</a></li>
<li><a href="/about" title="About" >About</a></li>
<li class="last"><a href="/login" title="Login" >Login</a></li>
</ul>

und ersetze es mit:

[!Wayfinder?startId=`0`!]

Erklärung zum Wafinder: Beim Wayfinder handelt es sich um ein Snippet, das benutzt wird, um Listen zu erzeugen. Die Parameter in unserem Falle lauten: startId='0', diese Angabe sagt dem Wayfinder das er mit dem Menü beim Dokument mit der ID 0 (also dem Root-Verzeichznis) anfangen soll. So bildet er sich das Menü zusammen, dieses wird so groß wie es Dokumente gibt (die sichtbar sind, sprich die nicht grau sind). Ich weiß was ihr denkt: "Wie geht es das das Menü so aussieht wie bevor?" Wenn die Navigation Menü(s) mit CSS gestylt und positioniert sind, dann wird Wayfinder es auch wieder als Liste definieren und darstellen, mit den Menü Titeln und den Links basierend auf den "Menü Titel" welche du in MODx Dokumenten Baum erstellt hast. In unserem Beispiel brauchen wir Wayfinder nicht weiter anpassen, da Standardausgabe von Wayfinder genau diese Liste erzeugt. Um sein Menü weiter anzupassen, sei auf die vielfältigen Parameter- und Templatemöglichkeiten von Wayfinder hingewiesen.

Orientierung aufs Menü

Begutachten wir die Code Fragmente vom CSS für das "Menü" und die "Navigation" in der "styles.css". Das Horizontale Menü:

# menu ul li {
display: inline;
}

und das vertikale Menü:

#navigation ul {
display: block;
}

Hauptsächlich unterscheidet sich das Horizontale Menü vom Vertikalen Menü durch den "ul" Tag. Das horizontale Menü "ul" ist "display: inline", und das vertikale Menü "ul" ist "display: block" (Standardmäßig ist das "ul" ein Block Element). Ich habe die CSS Datei kommentiert so kannst du ein wenig herum spielen um zu sehen was sich im Menü ändert. (Bitte – Ändere nur Numerische Werte, ausgenommen du kennst dich mit CSS aus). Du kannst auch mit den Wayfinder Parameter herum experimentieren um zu sehen was passiert.

Das sollte für den Start mit Menüs reichen. Eine Wayfinder Dokumentation findest du hier: Wayfinder Dokumentation.

Der MODx Manager

Lass uns kurz vom Anpassen des Templates abschweifen. Jetzt ist eine gute Zeit um dir einige Features vom MODx Dokumenten Baum, welche nicht auf den ersten Blick erkennbar ist zu erklären. Die Nummern in den Klammern der jeweiligen Seiten ist die ID, diese werden von MODx generiert wenn ein neues Dokument erstellt wird. Einmalige ID's die für zukünftiges Verlinken etc. gebraucht wird. Nebenbei bemerkt, der Wayfinder generiert aus den Titel der Dokumente den Linknamen im Menü. Anmerkung: Es gibt welche die "ausgegraut" sind. Das ist deine Wahl, beim erstellen eines neuen Dokumentes gibt es eine Checkbox (im Menü anzeigen) wo du auswählen kannst ob dieser als Menüpunkt dargestellt werden soll. Wenn diese deaktiviert ist wird sie "ausgegraut dargestellt". Wenn du eine Seite bearbeiten möchtest, gibt es verschieden Wege. Die erste Methode ist: einen Rechtsklick auf das Dokument und bearbeiten wählen, eine weitere Methode ist auf den Bearbeiten Button ziemlich in der Mitte des Bildschirms zu klicken.

modx dokumentenbaum

Die Inhalts Modifikationen

Lösche alles innerhalb des "content-main" divs. Sei nicht verwirrt wenn wir den eigentlichen Inhalt noch nicht füllen, das kommt später. Nun ersetzte das eben gelöschte mit der TV (Template Variable) "content" wie es im folgenden Code dargestellt wird:


[*content*]

Das war doch einfach und schmerzlos! Inhalt ?! Wo ist er?, Wie bekomme ich ihn zurück? Ich weiß, ich hätte nicht das hübsche Markup entfernen sollen aber naja. Keine Panik der Inhalt kommt noch.

Die Footer Modifikationen

Nun weiter zum Footer (nebenbei, ich habe mein bestes versucht um semantisches Markup zu erstellen). Wenn du mehr über Semantik und Web 2.0 erfahren willst, gehe auf Andy Clarke's Homepage. Wenn du nicht weißt wer Andy Clark ist – verbringst du wahrscheinlich zu wenig Zeit im World Wide Web. Wenn du das nächste mal in einem Buchladen kommst suche in der Computerabteilung nach "Transcending CSS". Es ist der Bestseller im Winter von 2006/2007. Ok jetzt wieder zum Footer, ersetze folgende Zeile im div mit der id site-info:

<div id="siteinfo">
<p>Copyright  2007 CixDegrees.com  Powered by MODx  Hosted by (mt)MediaTemple</p>
</div> <! end of siteinfo >

ändere es in

<div id="siteinfo">
{{cixfooter}}
</div> <! end of siteinfo >

Wo sind die aktuellen Informationen? Wir haben sie in einen Chunk verschoben. Chunk? Ein Chunk ist ein Code/HTML Markup Fragment von MODx. Wir wollen, dass MODx die Informationen an einen bestimmten Ort im Dokument platziert und diese dann vom Browser angezeigt werden. Warum? So können wir das HTML Markup vom eigentlichen Inhalt der Webseite trennen. Zum Beispiel der cixfooter enthälft folgendes:

<div id="siteinfo">
Copyright &copy; 2007 CixDegrees.com Design by hjd
<a href="http://www.cixdegrees.com">cixdegrees.com</a>
Powered by MODx  Hosted by (mt) Media Temple
</div>

Warum lagern wir es nicht direkt im Template aus? Das kannst du und es wird funktionieren. Wenn du nun aber eine Menge an Dokumenten (Seiten) hast wo ein anderer Footer hin soll müsstest du diese jedes mal einzeln anpassen. Nun kannst du diesen Chunk immer dann aufrufen wenn du ihn brauchst, solltest du mal was ändern müssen musst du es nur an einer Stelle machen. Chic oder? Das ist es wofür MODx steht. Wenn du dein Template gestaltest, sollten alle deine eingesetzten Variablen deine eigene Seite widerspiegeln. zB. {{cixfooter}} zu {{deinfooter}}

Befolge folgende Schritte um einen eigenen Chunk anzulegen. Ressourcen -> Ressourcenverwaltung -> Chunks (im Tabmenü) -> neues Chunk. Beim Chunknamen gibst du ihm folgenden Namen: cixfooter (für diese Demo hier), füge noch eine Beschreibung hinzu, wähle eine Kategorie für den neuen Chunk und kopiere das Markup Fragment hinein. Speichern. Nun kannst du diesen Chunk überall verwenden.

Das Resultat

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta httpequiv="contenttype" content="text/html; charset=iso88591">
<base href="[(site_url)]" />
<title> [*pagetitle*] | [(site_name)]</title>
<link rel="stylesheet" type="text/css"  href="[(base_url)]assets/templates/tutorial/css/style.css" />
</head>
<body>
<div id="branding">
</div> <! end of branding >
<div id="menu"> <! Horizontal menu at top of branding. >
[!Wayfinder?startId=`0` &level=`1`!]
</div>
<div id="contentmain">
[*content*]
</div> <! end contentmain >
<div id="contentsub">
<div id="navigation"> <! vertical menu – it's all done with the CSS >
[!Wayfinder?startId=`0`!]
</div><! end of navigation >
</div> <! end contentsub >
<div id="siteinfo">
{{cixfooter}}
</div> <! end of siteinfo >
</body>
</html>

Hier könnten wir noch mehr machen (und werden es auch später) aber jetzt brauchen wir ein "proof-of-concept" - funktioniert es und wie sieht es aus? - anschließend werden wir den Inhalt wieder einfügen.

Verwendete Variablen

In unserem Template verwenden wir folgende Variablen:

`[(site_url)]`

Eine Einstellung, welche die URL bei der MODx Installation belegt, und diese dann im HTML Dokument einbettet.

`[pagetitle]`

eine TV (Template Variable) welche den eingeben Seiten Titel im Manager einfügt.

`[(site_name)]`

Eine Einstellung, welche den Seitennamen der MODx Installation beinhaltet und diese ins HTML Dokument einbettet.

`[(base_url)]`

Eine Einstellung, welche die Basis URL der MODx Installation beinhaltet und diese ins HTML Dokument einbettet.

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

weiter oben schon erklärt

`[content]`

eine TV (Template Variable) welche einen Richt Text Editor einfügt. Mit dieser Hilfe kannst du den Inhalt eingeben. Inhalt kann aus Text, Bilder, HTML Markup, Listen etc. bestehen.

`{{cixfooter}}`

ein Chunk wo formatiertes HTML Markup beinhaltet, welchen du an jeder beliebigen Stelle einfügen kannst.

Eine Übersicht über ale verfügbaren Content Variablen findest Du hier.

Sehen wir es uns an

Nimm das modifizierte HTML, und füge es im MODx ein um ein Template zu erstellen. Und so geht’s:

Klicke auf Ressourcen
Klicke auf Ressourcenverwaltung
Klicke auf Templateverwaltung und dann
klicke auf neues Template Kopiere das komplette HTML Markup vom Code Editor in den "Template-Code(html)"

NOCH NICHT SPEICHERN. Zuerst muss du noch einen Namen für das Template wählen. Ich habe hier "Tutorial" genommen. Bei der Beschreibung kannst du reinschreiben was du willst, ich habe mich für "Ein Tutorial Template zum ausprobieren" entschieden. Da ich keine passende Kategorie zur Auswahl hatte, habe ich einfach eine neue erstellt die ich "Template ausprobieren" genannt habe. Nun kannst du speichern. Nun musst du dich zum Root Verzeichnis deines Webserver bewegen. Beim Lokalen Server wäre es xampp -> htdcos -> MODx-0.9.5.

Nun wechselst du in folgendes Verzeichnis MODx-0.9.5 -> assets -> templates. In diesem Verzeichnis legst du ein Verzeichnis an, ich nenne es "Tutorial". Nun wechselst du noch in dieses Verzeichnis und legst hier nochmals 2 Verzeichnisse an: css und images. Nimm das Logo und speichere es im images Verzeichnis ab (MODx-0.9.5/assets/templates/tutorial/images). Hier bekommst du das Logo. Nun kopierst du noch das CSS File ins css Verzeichnis (MODx-0.9.5/assets/templates/tutorial/css). Diese Datei findest du hier: CSS Datei unseres Templates (Achtung: Umbenennen in "style.css"). Eventuell musst du eine Veränderung am CSS vornehmen damit MODx auch das Logo findet. Wenn du das Logo sehen kannst musst du nichts verändern. In der CSS Datei befindet sich der Aufruf, besser gesagt der Pfad zum Logo. Folgendes solltest du ändern, falls es nicht klappt:

/* ===== BRANDING ===== */
div#branding{
height:250px;
background: url(../images/cixlogotropic.png) norepeat 0 0;
}

Checkliste

Jetzt haben wir das Template in MODx:

Wir kontrollieren nochmals das der Link zur CSS Datei wie folgt aussieht (im Template HTML)

[(base_url)]assets/templates/tutorial/css/style.css

Wir kontrollieren nochmals das die CSS Datei im Verzeichnis css liegt.
Wir kontrollieren nochmals das der site-info Chunk in MODx auch cixfooter heißt. Nun gehe im Manger auf: Werkzeuge -> Konfiguration
Definiere einen Seitennamen (Webseitename) ? Scrolle hinunter zu Standard Template
wähle im Dropdown das Tutorial Template
nun wähle noch Alle Dokumente auf das Standardtemplate setzen"
speichern Nun haben wir ein "fertiges" Template. Wenn wir es nun in der Vorschau anzeigen lassen sehen wir zwar noch nicht viel an Inhalt aber es ist ein Anfang.

Bewundere doch mal das Menü, es funktioniert, Du wechselst zwischen den Demo Seiten von MODx. Für manche Seiten werden noch keine Definitionen im CSS sein aber was solls das kann man noch ändern. Das Wichtige ist: Wir haben ein funktionierendes Template und wissen wie es erstellt worden ist.

Ein Augenmerk auf den MODx Manager

Gehe zum MODx Manager (Von nun an nenne ich ihn nur noch Manager), rechtsklick auf die Home Page und wähle bearbeiten vom Pop-up Menü. Schau dir die Informationen zu dieser Seite an. Einer der Punkte ist Template. Das ausgewählte Template ist das Template welches auf dieser Seite angewendet wird. Hier könntest du rein Theoretisch verschiedenste Templates für die Seiten auswählen, was aber den visuellen Anblick zerstören würde. Von nun an ist das Standard Template Tutorial. Das haben wir in der Konfiguration eingestellt, erinnerst du dich?

Menü Titel: Den Text den du hier eingibst ist anschließend der Navigationspunkt
Menü Index: Diese Nummer setzt die Position des Menü Links fest. Du kannst hier alle Dokumenten bearbeiten um neu zu sortieren, die Home Page ist normalerweise immer die #1.
Im Menü anzeigen: Entscheide dich ob du diesen Punkt im Menü anzeigen willst, es gibt Seiten die du lieber nicht anzeigen lassen sollst zB 404 Error etc.
Elterndokument: Wo willst du den Menü Punkt haben? Für Organisatorische Zwecke kannst du hier das Elterndokument ändern. Hier gibt es 2 Wege. 1. Akzeptiere den Vorschlag der Seite oder 2. klicke auf das Ordnersymbol und anschließend wählst du im Dokumenten Baum das neue Elterndokument aus.

Wenn du weiter nach unten scrollst sieht du einen Editor, hier kannst du deinen Inhalt verwalten. Nun hast du ein geöffnetes Dokument, also beachte auch die Tabs ganz oben. Wir waren gerade im Allgemein Tab unterwegs. Wechsle zum Vorschau Tab. Hast du gesehen das sich oben links im Vorschau Fenster die Quickedit Leiste eingeschaltet hat? Wenn du auf diesen klickst kannst du den Inhalt direkt editieren. zB. Klicke auf den Teil namens Content (hier gibt es 2 Möglichkeiten; am oberen Rand vom Dokument in der QE Leiste oder im Inhalt selber namens Edit Content).

Wenn du auf der QE Liste klickst hast du eine Auswahl von Optionen die du bearbeiten kannst, während der "edit content" button ein Pop-up Fenster öffnet wo du den Inhalt mit Hilfe des TinyMCE Editor bearbeiten kannst. Wunderst du dich? Wie bekommst du die Quick Edit Leiste wieder weg? Klicke hier auf go und dann auf logout. Auf wiedersehen Quickedit. Komm schon du willst doch Inhalt also tippe tippe tippe. Wie du den Inhalt so darstellst wie du es haben willst: im Dokumenten Baum, rechtsklick auf das Dokument welches du bearbeiten möchtest und dort wählst du bearbeiten. Benutze die Funktionen des Richt-Text Editors um Texte Bilder, Listen etc. zu generieren. Probiere ein wenig herum.