Typo3Seiten
Mit dem Anlegen des Templates und des Style-Sheets sind die ersten Grundlagen für den Webauftritt gelegt. Nun geht es darum eigene Seiten zu erstellen und diese Seiten mit den Vorlagen in irgendeiner Form zu verknüpfen.
Inhaltsverzeichnis |
Erstellen des Seitenbaumes
Für die Experimente mit Typo-Script und dem Aufbau von Menüs ist es sinnvoll bereits ein paar Seiten vorbereitet zu haben. Dazu legen wir beispielsweise zuerst einmal folgenden Seitenbaum an (angegeben jeweils die Seitennamen).
- root
- Menü oben
- Impressum
- Sitemap
- Kontakt
- Menü links
- Thema 1
- Thema 1 1
- Thema 1 2
- Thema 1 3
- Thema 2
- Thema 2 1
- Thema 2 2
- Thema 3
- Thema 3 1
- Thema 3 2
- Thema 1
- Menü oben
Zum Erstellen der Seiten klickt man im Backend auf Seite unterhalb von Web. Dann klickt man mit der rechten Taste auf das potentielle Elternelement, für die erste Seite also auf die Weltkugel, dann auf die Seite root und dann auf die Menüseiten. Es öffnet sich ein kleines Kontextmenü, aus dem heraus man jeweils neu wählt.
In der Rubrik Neuer Datensatz wählt man dann Seite. Der Seitenbaum sieht dann etwa aus wie in der Abbildung.
Die roten Kreuze sin ein Hinweis darauf, dass bei einzelnen Seiten vergessen wurde das Häkchen bei Seiten verstecken zu entfernen.
Ruft man jetzt die Startseite http://Rechnername/cms/ auf, so bekommt man immer noch eine Fehlermeldung, nicht weil die Seiten noch leer sind, sondern weil noch keine Verknüpfung mit den Vorlagen erstellt wurde.
Ein erstes Template erstellen
Das Anlegen von Templates mit Typoscript erfordert etwas Überlegung. Im Prinzip kann jede Seite ihr eigenes Template bekommen. Sinnvoller ist aber in der Regel eine einheitliche Gestaltung der Seiten. Da sich Templates auf Unterseiten vererben legt man also das Template auf der obersten Seite an, hier der Seite mit dem Namen root.
Dazu klickt man auf Template unterhalb von Web und erhält folgendes Menü
Es gibt noch kein Template auf dieser Seite, was Typo3 in roter Schrft anmerkt. Man hat jetzt hier die Möglichkeit ein Template auszuwählen, ein Template zu erstellen oder ein Erweiterungstemplate zu erstellen. Angemessen ist hier das Erstellen eines eigenen Templates. Also Create a new template for a new site. Danach muss man noch einmal auf NEW SITE klicken, worauf das Fenster zum Bearbeiten von Templates erscheint. Hier taucht ein sehr goßes Eingabefenster für Constants auf. Klickt man noch einmal auf root, so wird es etwas übersichtlicher.
Klickt man hier auf Setup, so sieht man im Editor, dass Typo3 ein paar Dummy-zeilen eingetragen hat.
# Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD!
das ist Typo3 Code, der dazu führt, dass jetzt bei einem Seitenaufruf HELLO WORLD! ins Browserfenster geschrieben wird. Das ist zwar nett, aber noch nicht das wirkliche Ziel.
Ersetzt man dies durch die Zeilen
config.doctype = xhtml_trans
config.htmlTag_langKey = de
config.xhtml_cleaning = all
page = PAGE
page {
typeNum = 0
bodyTag = <body bgColor = "#DDDDDD" >
stylesheet = fileadmin/vorlage3/style.css
meta.AUTHOR = Uwe Debacher
meta.DESCRIPTION = Eine erste Website zum Testen
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/vorlage3/vorlage.html
10.workOnSubpart = DOKUMENT
}
Die ersten Zeilen geben an, dass wir mit XHTML arbeiten wollen und Typo3 sich auch mit um die Einhaltung der Regeln kümmern soll. Danach wird ein Seitenobjekt definiert und mit der Vorlage verknüpft. Die letzte Zeile bewirkt, dass Type3 von der HTML-vorlage nur den gekennzeichneten Bereich benutzt. Das ist wichtig, sonst würde ein doppelter Seiten-Header auftauchen.
Ruft man die Seite jetzt im Browser auf, so sollte die Vorlage genau so auftauchen, wo sie unter Typo3Layout#Das_Layout_mit_CSS zu sehen war. Alle Platzhalter sollten noch vorhanden sein, man kann die Seite jetzt aber noch einmal schön validieren lassen um letzte Fehler auszumerzen bevor die Seite umfangreicher wird.
Grafischer Header
Erweiter man den Code jetzt um die folgenden Zeilen (zwischen workOnSubpart und der schließenden Klammer) so kann man die Grafikfähigkeiten von Typo3 ausprobieren.
10.marks {
TRAILER = IMAGE
TRAILER.file = GIFBUILDER
TRAILER.file {
XY = 559, 86
backColor = #82BC8B
10 = TEXT
10.text = Willkommen
10.fontSize = 66
10.fontFile = fileadmin/fonts/arialbi.ttf
10.fontColor = #96CC9F
10.niceText = 1
10.offset = 10, 65
20 = TEXT
20.text = Meine Homepage
20.fontSize = 40
20.fontFile = fileadmin/fonts/arialbd.ttf
20.fontColor = #E2F5E5
20.niceText = 1
20.offset = 40, 58
}
Es wird jetzt der Marker TRAILER (bzw. die Zeichenkette ###TRAILER### in der Vorlage) durch das Produkt dieser Codezeilen ersetzt. Das Produkt ist eine Text-Grafik, die beim ersten Aufruf erzeugt wird. Die notwendigen Schriftdateien muss man vorher aber in das passende Verzeichnis kopiert haben, sonst werden Ersatz-Schriften benutzt.
Das Typo3-Template gliedern
Schon an diesem kleinen Besipiel sieht man, dass soch ein Template durch viele Zeilen Code schnell unübersichtlich werden kann. Mehr als zehn Zeilen Code für den ersten Marker. Es mach daher Sinn funktionale Untereinheiten des Typo-Script Codes in funktionale Templates auszulagern.
Für das Auslagern des Codes eignet sich ein Sysordner. Zum Erstellen eines solchen Ordners klickt man mit der rechten Maustaste auf die Weltkugel und wählt Neu aus dem Menü. Rechts erscheint dann wie immer der Bereich neuer Datensatz, hier wählt man wie bisher auch neue Seite. Bei der eneuen Seite stellt man jetzt aber den Typ von Standard auf SysOrdner und gibt einen sprehenden Namen, also z.B. Templates an.
Jetzt klickt man mit der rechten Maustaste auf den neu erstellten SysOrdner Templates und wählt wiederum Neu aus dem Kontextmenü.
In der Rubrik neuer Datensatz sollte jetzt auch Template zur Auswahl stehen, was man dann auch auswählt.
Nach der Auswahl von Template landet man im Fenster zum Anlegen einer neuen Template-Seite. Hier wird zuerst ein sprechender Name vergeben, also z.B. Trailer und dann der Code in das Fenster Setup kopiert.
temp.trailer = IMAGE
temp.trailer.file = GIFBUILDER
temp.trailer.file {
XY = 559, 86
backColor = #82BC8B
10 = TEXT
10.text = Willkommen
10.fontSize = 66
10.fontFile = fileadmin/fonts/arialbi.ttf
10.fontColor = #96CC9F
10.niceText = 1
10.offset = 10, 65
20 = TEXT
20.text = Meine Homepage
20.fontSize = 40
20.fontFile = fileadmin/fonts/arialbd.ttf
20.fontColor = #E2F5E5
20.niceText = 1
20.offset = 40, 58
}
Dann wird die Seite gespeichert. Anschließend muss diese Seite noch in das Template der Seite root eingebunden werden.
Der TypoScript Code der root-Seite lässt sich dann vereinfachen zu:
config.doctype = xhtml_trans
config.htmlTag_langKey = de
config.xhtml_cleaning = all
page = PAGE
page {
typeNum = 0
bodyTag = <body bgColor = "#DDDDDD" >
stylesheet = fileadmin/vorlage3/style.css
meta.AUTHOR = Uwe Debacher
meta.DESCRIPTION = Eine erste Website zum Testen
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/vorlage3/vorlage.html
10.workOnSubpart = DOKUMENT
10.marks {
TRAILER < temp.trailer
}
Leider langt das so noch nicht ganz. Es muss noch die eben erstellte Template-Seite in das Template der root-Seite direkt eingebunden werden, damit temp.trailer auch bekannt ist.
Dazu klickt man wieder auf Template und dann die Seite root. Rechts erschein die Seite zum Bearbeiten des Templates. Hier klickt man unten auf den Link Click here to edit whole template record. Darauf erweitert sich das Bearbeitungsfenster.
In der Rubrik basis template kann man dann, wenn man auf das Ordner-Icon rechts neben dem Eingabebereich klickt die eben erstellte Template-Seite auswählen.
Nach dem Speichern sollte ein Neuladen der Seitenvorschau keine Veränderung gegenüber dem bisherigen Erscheinungsbild bieten.
Nun kann man relativ bequem die einzelnen Marker ergänzen. Der komplette Bereich hat dann folgenden Inhalt
10.marks {
TRAILER < temp.trailer
MENU_OBEN < temp.menu_oben
KLICKPFAD < temp.klickpfad
MENU_LINKS < temp.menu_links
CONTENT < temp.content
FOOTER < temp.footer
}
Nun geht es nur noch darum die einzelnen Template-Seiten zu erstellen und einzubinden.
Menü oben
Da die Erstellung Menüs durch Typo3 sehr weitgehend übernommen wird, reicht relativ wenig Code um das obere Menü erscheinen zu lassen.
temp.menu_oben = HMENU
temp.menu_oben {
special = directory
special.value = 2
1 = TMENU
NO = 1
1.NO.linkWrap = | | |*| | | |*| |
}
Wichtig ist hier der special.value, der angibt von welcher Seite das Menü ausgeht. Gehr man mit der Maus auf das Seitensymbol von Menü oben, so wird die Nummer bzw. id der Seite angezeigt, genau diese Zahl wird hier benötigt.
Schaut man sich die Vorschau der Seite an, so kann die Gestaltung ncht ganz überzeugen, da die Links alle blau und unterstrichen erscheinen. Das lässt sich durch eine kleine Erweiterung des Stylesheets aber ändern. Einfach folgende Zeilen in style.css hinzufügen.
#menu_oben a {
text-decoration: none;
color: #FFFFFF;
}
#menu_oben a:hover {
text-decoration: underline;
color: #D3E2F9;
}
Schon sieht die Seite deutlich besser aus.
Klickpfad
Der Klickpfad ist eine Funktion, die Typo3 weitestgehend mitbringt. Dadurch ist der Code relativ knapp zu halten. Wir legen uns also eine Seite Klickpfad im Sysordner an und versehen sie mit folgendem Code.
temp.klickpfad = COA
temp.klickpfad {
10 = TEXT
10.value = <a href="/cms/">Start</a>
20 = HMENU
20 {
special = rootline
special.range = 2|-1
1 = TMENU
1.NO = 1
1.NO.linkWrap = <img src="fileadmin/images/arrow.png"> |
}
}
Rootline ist ein Typo3-Element, welche alle Seiten zwischen der aktuellen Seite und der Rootseite beinhaltet. Damit ist es extrem einfach einen Klickpfad aufzubauen. Als Bereich (range) ist hier angegeben von der zweiten Ebene an (2) bis zu beliebiger Tiefe (-1). Die Umhüllung des jeweiligen Links (linkWrap) bringt ein kleines Dreieck zwischen die einzelnen Einträge (genaugenommen davor). Der Linkpfad startet bei Ebene 2, damit Manü links nicht mit auftaucht. Dafür muss dann der Wurzeleintrag am Anfang per Hand erstellt werden (10.value).
Auch her kann die Linkgestaltung noch nicht gefallen, auch wenn bisher nur ein einziger Link auftaucht. Auch hier hilft eine Erweiterung des Style-Sheets.
#klickpfad a {
text-decoration: none;
color: #FFFFFF;
}
#klickpfad a:hover {
text-decoration: underline;
color: #D3E2F9;
}
Menü links
Da hier ein mehrstufiges grafisches Menü aufgebaut werden soll ist der Code etwas umfangreicher.
temp.menu_links = HMENU
temp.menu_links {
special = directory
special.value = 3
entryLevel = 1
1 = GMENU
1.NO = 1
1.NO {
XY = 164, 30
backColor = #478951
10 = TEXT
10.text.field = title
10.fontColor = #FFFFFF
10.fontFile = fileadmin/fonts/arial.ttf
10.fontSize = 14
10.niceText = 0
10.offset = 7, 21
20 = IMAGE
20.file = GIFBUILDER
20.file {
XY = 164,1
backColor = #FFFFFF
}
20.offset = 0, 29
}
1.RO < .1.NO
1.RO.backColor = #061467
1.ACT < .1.NO
1.ACT.backColor = #579961
2 < .1
2.NO {
backColor= #D3E2F9
10.fontColor= #061467
10.fontSize = 11
10.offset = 12,21
}
2.RO < .2.NO
2.RO.backColor = #C1D5F5
2.ACT < .2.NO
2.ACT.backColor = #E3F2FF
}
Nach der Eingabe des Codes und der Einbindung der Template-Seite ist in der Vorschau von dem Menü noch nichts zu erkennen. Das hängt damit zusammen, das die root-Seite vor dem Menü liegt. Klickt man aber auf einen der Einträge aus dem oberen Menü, so erscheint auch das linke Menü mit seinen drei Hauptpunkten. Klickt man auf einen der Hauptpunkte so öffnet sich das Menü für die zugehörigen Unterpunkte.
Es bleibt das Problem zu lösen, dass die root-Seite zwar als Standard-Seite aufgerufen wird, aber keinen eigenen Inhalt haben soll und auch nicht in den Menübaum integriert ist. Das Problem lässt sich einfach dadurch lösen, dass man einen Verweis (Shortcut) auf eine Seite im normalen Verzeichnisbaum erstellt.
Dazu klickt man auf Seite, wählt die Seite root aus und geht dann auf Seitentitel bearbeiten und ändert dort den Typ von Standard auf shortcut. Nun muss noch das Ziel angegeben werden, dazu wählt man unter Shortcut zur Seite z.B. die Seite Thema 1 als Ziel aus.
Sciherlich ist es geschickter eine extra Startseite einzurichten. Die legt man als neue Seite direkt unterhalb der Seite Menü links an und lässt dann den Shortcut auf diese Seite verweisen.
Auch bei den Seiten Menü oben und Menü links ist es ähnlich, wie bei der Seite root. Zwar kann man diese Seiten nicht direkt aufrufen, aber durch Eingabe ihrer id in der URL. Wenn auch dann ein sinnvoller Inhalt erscheinen soll, dann legt man auch für diese Seiten einen Shortcut an.
Kontent
Folgender Code findet Inhalte ein, die auch in dieser Spalte stehen sollen.
temp.content = CONTENT
temp.content {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
}
Zusätzlich zum eigenen Template Content muss jetzt noch auf der root Seite unter Include static (from extension) die Vorlage CSS_styled_content mit eingebunden werden, die bereits installiert worden sein sollte.
Nun muss man noch etwas Text anlegen. Dazu geht man auf Seite und Startseite und klickt dann auf Seiteninhalt anlegen. Bei der nun folgenden Auswahl wählt man erst einmal Einfacher Text. Nun gibt man eine Überschrift und etwas Text ein.
Die Gestaltung des Textes wird noch nicht begeistern, dafür fehlen auch noch zuviele Styles. Man kann diese aber aus der Vorlage css_styled_content einbinden.
temp.footer = TEXT
temp.footer {
data = date : Y
wrap = (c) Uwe Debacher (|)
}
