Andrea Herzog-Kienast Erwin Hontheim Das TYPO3 Buch Schritt für Schritt zur professionellen Web-Präsenz
Alle in diesem Buch enthaltenen Programme, Darstellungen und Informationen wurden nach bestem Wissen erstellt. Dennoch sind Fehler nicht ganz auszuschließen. Aus diesem Grunde sind die in dem vorliegenden Buch enthaltenen Informationen mit keiner Verpflichtung oder Garantie irgendeiner Art verbunden. Autor(en), Herausgeber, Übersetzer und Verlag übernehmen infolgedessen keine Verantwortung und werden keine daraus folgende Haftung übernehmen, die auf irgendeine Art aus der Benutzung dieser Informationen oder Teilen davon entsteht, auch nicht für die Verletzung von Patentrechten, die daraus resultieren können. Ebenso wenig übernehmen Autor(en) und Verlag die Gewähr dafür, dass die beschriebenen Verfahren usw. frei von Schutzrechten Dritter sind. Die in diesem Werk wiedergegebenen Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. werden ohne Gewährleistung der freien Verwendbarkeit benutzt und können auch ohne besondere Kennzeichnung eingetragene Marken oder Warenzeichen sein und als solche den gesetzlichen Bestimmungen unterliegen. Dieses Werk ist urheberrechtlich geschützt. Alle Rechte, auch die der Übersetzung, des Nachdrucks und der Vervielfältigung des Buches oder Teilen daraus vorbehalten. Kein Teil des Werkes darf ohne schriftliche Genehmigung des Verlags in irgendeiner Form (Druck, Fotokopie, Mikrofilm oder einem anderen Verfahren), auch nicht für Zwecke der Unterrichtsgestaltung, reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden. Bibliografische Information Der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar. Copyright 2009 Open Source Press, München Gesamtlektorat: Sacha Storz / Dr. Markus Wirtz Satz: Open Source Press (LATEX) Umschlaggestaltung: www.fritzdesign.de Gesamtherstellung: Kösel, Krugzell ISBN 978-3-937514-80-2 http://www.opensourcepress.de
4 Kapitel Der traditionelle Weg mit Markern und Subparts Sie haben sich also dafür entschieden, die traditionelle Vorgehensweise kennen zu lernen. Die bisher überschaubare HTML-Vorlage muss dafür um einige TYPO3-spezifische Anweisungen ergänzt werden. Damit TYPO3 die Seite und insbesondere die Bereiche erkennt, in denen es aktiv werden muss, ist das Dokument als Subpart zu kennzeichnen. Dies geschieht mittels so genannter Subpartmarker, die einen solchen Bereich quasi einwickeln. Die Syntax dieser Marker ist folgende: Umgeben von HTML-Kommentarzeichen und drei vorangestellten und drei nachgestellten Rauten, steht die Bezeichnung in Großbuchstaben, also beispielsweise: <!--###DOKUMENT###--> Ein solcher Marker muss sowohl am Anfang wie auch am Ende des Arbeitsbereiches stehen, so dass die HTML-Vorlage folgende Form annimmt: 115
4 Der traditionelle Weg mit Markern und Subparts <html> <head> <title>html Template Verein TUS EASI 1970</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="language" content="de" /> </head> <body> <!-- ###DOKUMENT### begin --> <div id="alles"> [...] <!-- Ende alles --> <!-- ###DOKUMENT### end --> </body> </html> Da der Subpart alles innerhalb des HTML-Body einklammert, kann TYPO3 später auf sämtliche Bereiche der HTML-Seite zugreifen. Den so ausgezeichneten Gesamtbereich wollen wir nun weiter untergliedern. Im oberen Bereich definieren wir einen Seitenheader (ein statisches Design-Element), der im weiteren Verlauf noch gestaltet wird. Hier geht es zunächst um ein Bildelement, das über CSS zugewiesen wird und damit nicht weiter TYPO3-spezifisch behandelt werden muss. Später werden wir dieses Bildelement allerdings weiter verarbeiten, deshalb muss es im Subpart stehen. Wenden wir uns also dem Bereich Ó Ò ¾ für ein horizontales Menü zu. Auch hier kennzeichnen wir die Stelle im HTML-Dokument durch einen Marker, der als Platzhalter dient und später durch TypoScript-Definitionen gefüllt wird. Wir nennen ihn Å ÆÍ Ç Æ und umgeben den Namen wieder mit je drei Rautezeichen, also Å ÆÍ Ç Æ. Wie auch beim Subpart ist prinzipiell jeder Name erlaubt, der aber stets in Großbuchstaben geschrieben sein sollte. Für das vertikale Menü setzen wir den Marker Å ÆÍ ÄÁÆÃË, für das Inhaltselement den Marker ÁÆÀ ÄÌ (der später unsere Seiteninhalte anzeigt) und für die rechte Spalte ebenfalls für Seiteninhalte bestimmt den Marker Ê ÀÌË. Die Fußzeile enhält lediglich einen Abstand oder bei Bedarf ein Bildelement und bleibt zunächst unberücksichtigt. Die so vorbereitete HTML-Vorlage sollte nun folgendes Aussehen haben: 1 1 Die Datei finden Sie auf der buchbegleitenden Webseite im Downloadbereich Kapitel 3 unter dem Namen Ñ Ò Ú Ö Òº ØÑÐ. 116
4 Der traditionelle Weg mit Markern und Subparts <html> <head> <title>html Template Verein TUS EASI 1970</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="language" content="de" /> </head> <body> <!-- ###DOKUMENT### begin --> <div id="alles"> <div id="oben"> <div id="oben_2"> ###MENU_OBEN### <div id="links"> <div id="m_links"> ###MENU_LINKS### <div id="rechts"> ###RECHTS### <div id="mitte"> <div id="inhalt"> ###INHALT### <!-- Ende mitte --> <div id="footer"> <!-- Ende alles --> <!-- ###DOKUMENT### end --> </body> </html> Sichern Sie diese Datei lokal als Ñ Ò Ú Ö Òº ØÑÐ. Sofern Sie sie von der buchbegleitenden Webseite verwenden, sind die hier bereits benötigten Marker und Subparts bereits enthalten. Wechseln Sie in Ihr Root-Template auf der Seite Î Ö Ò. Dazu klicken Sie im Webmodul auf Template, und im Seitenbaum wählen Sie die Seite Î Ö Ò aus. Erstellen wir nun nach dem Config-Block, den wir bereits eingetragen haben, die Seitendefinitionen. 117
4 Der traditionelle Weg mit Markern und Subparts # Default PAGE object: page = PAGE page.typenum = 0 page.stylesheet = fileadmin/styles/standard.css page.meta.author = Andrea Herzog-Kienast page.meta.description = TUS EASI 1970 In der ersten Zuweisung wird Ô durch den Operator als Objekt vom Typ È definiert. Der Name Ô ist eigentlich frei wählbar 2, hat sich jedoch eingebürgert. Ein Objekt kann Eigenschaften haben, denen wiederum mittels Operatoren bestimmte Werte zugewiesen werden: So wird in der nächsten Zeile der Eigenschaft ØÝÔ ÆÙÑ des Objekts Ô über den Operator der Wert ¼ zugewiesen, was dem Defaultwert entspricht. ØÝÔ ÆÙÑ bestimmt den Typ der Seite und wie sie gerendert wird, und mit dem Wert ¼ stellen wir sicher, dass alle Seiten standardmäßig mit den nun folgenden Eigenschaften dargestellt werden, wenn sie nicht z. B. absichtlich mit einem anderen ØÝÔ aufgerufen werden. Anschließend wird der Objekteigenschaft ØÝÐ Ø der Pfad zu unserem Stylesheet zugewiesen. Mit den letzten beiden Zeilen werden Metaangaben indiziert, in diesem Fall der Autor und eine kurze Beschreibung; diese Angaben werden bei der Ausgabe für die HTML-Metatags der Seite verwendet. Im Kapitel 28 gehen wir im Zusammenhang mit der Suchmaschinenoptimierung näher auf solche Metaangaben ein. Nun soll auch endlich die HTML-Vorlage angesprochen werden: page.10 = TEMPLATE page.10 { template = FILE template.file = fileadmin/templates/main_verein.html workonsubpart = DOKUMENT marks {... } } Innerhalb des Objekts Ô können wir nun mit º½¼ ein Inhaltselement angeben; die ½¼ ist eine beliebige Zahl, die aber in Verbindung mit anderen Inhaltselementen die Reihenfolge der Abarbeitung bestimmt. Wir könnten also z. B. später mit Ô º¾¼ ein weiteres Element hinzufügen, und TYPO3 würde die Inhaltselemente der Reihe nach, also erst ½¼, dann ¾¼ usw., bearbeiten unabhängig davon, wo im Template die entsprechende Anwei- 2 Bis auf einige reservierte Begriffe (z. B. Toplevel-Objekte); vgl. dazu die ausführliche TypoScript-Referenz (TSref ) unter ØØÔ»»ØÝÔÓ ºÓÖ» ÓÙÑ ÒØ Ø ÓÒ» ÓÙÑ ÒØ¹Ð Ö ÖÝ»Ö Ö Ò. 118
4.1 Inhaltsbereiche definieren sung steht. Die 10er-Schritte haben sich eingebürgert, damit man bei Bedarf noch etwas zwischenschieben kann. Wir weisen nun also diesem Inhaltselement den Objekttyp Ì ÅÈÄ Ì zu, und dieses Objekt hat wiederum definierbare Eigenschaften: Das Template soll z. B. eine Datei sein (Objekttyp ÁÄ ), und dem Template wird dann eine Datei zugewiesen, die HTML-Vorlage Ñ Ò Ú Ö Òº ØÑÐ. Innerhalb dieser HMTL-Vorlage soll TypoScript den Subpart ÇÃÍÅ ÆÌ berücksichtigen. Dadurch gelten innerhalb dieses Subparts die in diesem TypoScript- Template festgelegten Definitionen. Wie Sie sehen, haben wir hier unterschiedliche Schreibweisen gewählt. Prinzipiell können und sollten gleichartige und logisch zusammengehörende Definitionen in Blöcken zusammengefasst werden. Statt des obigen Codes könnten Sie auch die folgende Schreibweise verwenden und damit auf einige Klammern verzichten. Der Übersicht dient es aber sicher nicht: page.10 = TEMPLATE page.10.template = FILE page.10.template.file = fileadmin/templates/main_verein.html page.10.workonsubpart = DOKUMENT [...] Fassen Sie also Anweisungen in Blöcken zusammen, wenn sie zusammengehören. 4.1 Inhaltsbereiche definieren Zur Darstellung der Seite im Frontend fehlen jetzt nur noch die Menüs und die Marker für die Inhaltselemente in der mittleren und rechten Spalte, die Sie innerhalb des Blocks Ñ Ö definieren: [...] MENU_OBEN < lib.menu_oben MENU_LINKS < lib.menu_links INHALT < styles.content.get [...] Die Menüs sind über die Marker Å ÆÍ Ç Æ und Å ÆÍ ÄÁÆÃË in der Vorlage definiert. Da die Menüs später ein eigenes Template erhalten, wird für die entsprechenden Marker hier lediglich der Inhalt des Objekts Ð ºÑ ÒÙ Ó Ò bzw. Ð ºÑ ÒÙ Ð Ò kopiert. Wenn wir die Menüs erstellen, werden wir in Kapitel 6 dieses Vorgehen genauer beschreiben. 119
4 Der traditionelle Weg mit Markern und Subparts Ebenso wird (über den Operator ) das Objekt ØÝÐ ºÓÒØ Òغ Ø für die Inhaltsspalte kopiert; dieses Objekt stammt aus der Extension ØÝÐ ÓÒØ ÒØ und ist für die Darstellung von via CSS gestalteten Inhalten zuständig. Damit werden der Inhalt der Spalte Normal zugewiesen und die Inhalte aus der Tabelle ØØ ÓÒØ ÒØ der TYPO3-Datenbank entnommen, in der sämtliche Seiteninhaltselemente verwaltet werden. [...] RECHTS < styles.content.getright [...] Für den Marker des rechten Inhaltselements gehen Sie analog vor. Allerdings wird hier das Objekt ØÝÐ ºÓÒØ Òغ ØÊ Ø für die rechte Inhaltsspalte kopiert, damit die Inhalte an der gewünschten Position erscheinen. Für die Positionierung ist in unserem Fall die Extension ØÝÐ ÓÒ¹ Ø ÒØ verantwortlich. Interessierte finden die Definition für die Spalten über den Extension Manager in der Datei Ø Ø» ØÙÔºØÜØ. Zur Übersicht hier noch einmal der vollständige Code des Setup mit allen Bereichen. Bitte prüfen Sie bei eventuellen Fehlern insbesondere, ob alle Klammern korrekt gesetzt sind und Datei- und Pfadangaben zu Ihrer Installation passen. ###### Umstellung auf XHTML ######## # Verwende XHTML Transitional config.doctype = xhtml_trans # Bereinigt den Code config.xhtml_cleaning = all # Sprich Deutsch config.htmltag_langkey = de # Entferne Default Javascript #config.removedefaultjs = 1 # Kommentare entfernen config.disableprefixcomment = 1 [browser = msie] config.doctypeswitch = 1 [END] ##### Umstellung auf XHTML ENDE #### config { linkvars = L sys_language_uid = 0 language = de locale_all = de_de.utf8 120
4.2 Ersten Seiteninhalt anlegen } htmltag_langkey = DE index_enable = 1 index_external = 1 cache_period = 10 # Schutz von Emailadressen: Buchstaben der Adresse werden um den # angegebenen Offset (hier 2) verschoben und bei Klick auf die # Emailadresse via JavaScript wieder korrigiert config.spamprotectemailaddresses = 2 # das @-Zeichen wird durch den folgenden HTML-Code ersetzt/ergaenzt config.spamprotectemailaddresses_atsubst = @<span class="nichtzusehen">ich-will-keinen-spam</span> # Default PAGE object: page = PAGE page.typenum = 0 page.stylesheet = fileadmin/styles/standard.css page.meta.author = Andrea Herzog-Kienast page.meta.description = tus-easi1970.de page.10 = TEMPLATE page.10 { template = FILE template.file = fileadmin/templates/main_verein.html workonsubpart = DOKUMENT marks { MENU_OBEN < lib.menu_oben MENU_LINKS < lib.menu_links INHALT < styles.content.get RECHTS < styles.content.getright } # Ende Marks } # Ende Page Speichern und schließen Sie zuletzt das Setup. 4.2 Ersten Seiteninhalt anlegen Rufen Sie über das Webmodul Seite die Startseite (für die Frontendbesucher des Vereins) auf, also die Seite Ï ÐÐ ÓÑÑ Ò. Im Inhaltsbereich Hauptinhalt klicken Sie auf den Button Seiteninhalt anlegen. 121
4 Der traditionelle Weg mit Markern und Subparts Abbildung 4.1: Seiteninhalt anlegen Abbildung 4.2: Inhaltselemente anlegen Es erscheint eine Auswahl der möglichen Inhaltstypen. 122
4.2 Ersten Seiteninhalt anlegen Auch diese werden Sie im weiteren Verlauf genauer kennen lernen. Wählen Sie hier einfach Normaler Text. Zum Hintergrund: Diese Spalte Normal hat die Spaltenposition Null, die im TypoScript-Setup mit ÓÐÈÓ ¼ angegeben werden kann. Sie entspricht der Spalte des Hauptinhaltsbereichs, die wir in der HTML-Vorlage über den Marker ÁÆÀ ÄÌ ansprechen. Da wir CSS Styled Content verwenden, ist die Positionsangabe dort definiert und wird über ØÝÐ ºÓÒØ Òغ Ø in unser Setup übernommen. Im Formular (Abbildung 4.3) tragen Sie auf der Registerkarte Allgemein lediglich eine Überschrift wie À ÖÞÐ Û ÐÐ ÓÑÑ Ò ein. Wechseln Sie auf die Registerkarte Text (Abbildung 4.4); im Editorbereich geben Sie einen beliebigen Text ein: Abbildung 4.3: Seiteninhalt anlegen: Registerkarte Allgemein Abbildung 4.4: Seiteninhalt anlegen: Registerkarte Text 123
4 Der traditionelle Weg mit Markern und Subparts Abbildung 4.5: Anzeige der Webseite mit dem ersten Inhalt Speichern Sie das Inhaltselement und lassen Sie sich die Webseite gleich anzeigen, indem Sie auf das Symbol mit Diskette und Lupe klicken. Die Seite wird im Backend mit dem ersten Seiteninhalt angezeigt. Sie enthält noch kein echtes Design. Die Marker für die beiden Menüs werden noch nicht berücksichtigt, denn die Menüs haben wir ja noch gar nicht erstellt. 124