$TYPO3_CONF_VARS['MAIL']['substituteOldMailAPI'] = ’0′;

lib.copyright = TEXT
lib.copyright.data = date:U
lib.copyright.strftime = %Y
lib.copyright.wrap= © |
temp.mainTemplate.subparts.copyright_date < lib.copyright

tmp.username.10 = TEXT
tmp.username.10.insertData = 1

[usergroup = *]
tmp.username.10.value (
{TSFE:fe_user|user|username}<a href="/index.php?id={TSFE:id}&amp;amp;logintype=logout&amp;PID=3">Logout</a>
)
[global]
lib.user < tmp.username

[PIDinRootline  = 33]
Inhalt
[global]

• Vorbereiten einer HTML Datei, setzen von Subparts
• Backend-Spalten anpassen
• Dateibaum erstellen
• Seitenbaum erstellen

Du hast in der Anleitung gelernt wie man ein HTML Dokument mit Subparts erstellt, wie Du das Backend mit den Spalten an Deine eigenen Bedürfnisse anpassen kannst, und was der Dateibaum und der Seitenbaum innerhalb des TYPO3-Backends ist.

In diesem Tutorial werden wir das angefangene beenden. Du wirst danach ein TypoScript Template erstellt haben. In diesem TypoScript Template werden wir die Subparts aus dem HTML Dokument ansprechen und dynamisch gegen die Inhalte aus dem TYPO3 Backend austauschen lassen. Du konfigurierst ein einfaches Listenmenü mit TypoScript inklusive einer Active-Regel. Zudem konfigurieren wir per TypoScript das Headerimage im oberen Bereich der Internetseite. Wenn Du auf der jeweiligen Seite kein Bild hinterlegst, greift das System auf ein definiertes Headerbild zurück.

Inhalt:

1. TypoScript Template anlegen
2. Constants definieren
3. Setup definieren
4. Navigation mit TypoScript
5. Headerimage einbinden
6. Supbarts austauschen
7. Allgemeine Einstellungen
8. Seitentitel definieren

Bevor wir mit TypoScript beginnen können, musst Du zuerst ein TypoScript Template anlegen. Das TypoScript Template wird immer auf der ersten und obersten Seite im TYPO3 Seitenbaum erstellt. Die Einstellungen die per TypoScript dann im Template gesetzt sind, werden diese in alle Unterseiten des Seitenbaumes vererbt. Um ein TypoScript Template zu bearbeiten gibt es in der Linken Leiste im Modul Web den Eintrag “Template“. Wenn Du nun auf die oberste Seite klickst erhälst Du im Hauptfenster einen Button namens “Create a new Template for a New Site“. Einmal drauf geklickt und unser Template ist erstellt

Nun müssen wir es mit TypoScript füllen. Als erstes klicken wir auf den Link unter der Tabellenbox mit dem Namen “Edit whole Template Record“. Im Reiter “Enthält” gibt es die Box “Statische einbinden”. Aus dieser Box wählen wir den Eintrag css_styled_content. Dieses Basis Template benötigen wir, um einfacher mit der Einrichtung der Ausgabe klar zu kommen. Dieses Template enthält grundsätzliche Stylesheet-Angaben, und der Output von TYPO3, was den Inhalt angeht, ist komplett mit DIV`s definiert. Würden wir diesen Eintrag nicht setzen, wären unsere Inhalte mit Tabellen gemischt und die persönlichen Anpassungen am aussehen sind nicht so einfach wie mit umzusetzen.

Es gibt eigentlich 2 Bereiche im TypoScript Template. Bereich 1 sind die Constants. Die Constants sind  Einstellungen die gesetzt werden, die nachher im Setup übernommen werden. Bei den Constants sind relativ wenige Einträge zu machen. Man kann hier Bildgrößen oder Templatepfade definieren, generelle Metatags hinterlegen, oder bestimmte Einstellungen für Extensions setzen. In unserem Beispiel werden wir hier die maximale Breite an eingebundenen Bildern angeben:

styles.content.imgtext.maxW = 940

Wenn wir also in Zukunft ein Bild als Inhalt anlegen, wird TYPO3 die Breite auf 940 Pixel herunter berechnen, sollte es größer alsi dieser Wert sein. 940 Pixel aus dem Grund, weil wir oben im Headerbereich eine Emo-Grafik mit 940 Pixeln mit TYPO3 platzieren.

Der eigentliche Part wenn es um TypoScript Templates geht, findet im Feld “Setup” statt. Hier werden Systemeinstellungen definiert, Menüs konfiguriert, Subparts aus der HTML Vorlage angesprochen und vieles mehr.

TypoScript funktioniert im Prinzip wie ein PHP Array. Es gibt einen Schlüssel und dieser Schlüssel hat Werte. Bei TypoScript müssen wir zuerst immer definieren was der Schlüssl ist, und geben ihm dann einen Wert. Bestes Beispiel das Page Objekt:

page = PAGE
page.typeNum = 0

Damit definieren wir “page”. Es kann auch seite = PAGE oder meineSeite = PAGE lauten, das spielt keine Rolle. Wir definieren lediglich einen Schlüssel und weisen diesem die Eigenschaft PAGE zu. Dieser Schlüssel bekommt in Zeile 2 einen Unterschlüssel zugewiesen. typeNum = 0. Damit stellen wir das page Objekt auf typeNum= 0 ein. typeNum sagt TYPO3 dass es sich um eine normale HTML Seite handelt. Man könnte auch typeNum = 99 einstellen. Das wäre dann Text Ausgabe und wir würden nur Plaintext sehen, ganz ohne HTML Code. Es gibt verschiedene PDF Erweiterungen die ebenfalls einen TypeNum haben können. Zum Beispiel 123. WIrd eine Seite mit dem Parameter ?type=123 aufgerufen, erstellt uns TYPO3 aus der angezeigten Seite automatisch eine PDF. So, genug mit der Theorie:

page {
  stylesheet = fileadmin/templates/css/style.css
  10 = TEMPLATE
  10 {
    template = FILE
    template.file = fileadmin/templates/html/main.html
    workOnSubpart = DOKUMENT
  }
}

Es gibt nun verschiedene Schreibweisen um mit TypoScript zu arbeiten. Entweder man schreibt wie im obigen Beispiel bei page “page.typeNum = 0″ oder man öffnet direkt hinter page die geschweifte Klammer. So kann man ein Hauptobjekt öffnen und die Unterobjekte direkt eintragen. In diesem TypoScript Snippet binden wir die vorhandene CSS Datei ein. Dann definieren wir das Template File, teilen TYPO3 mit wo die HTML Vorlage zu finden ist, und definieren den SubPart wo TYPO3 sie restlichen Container für die Navigation und Inhalt findet.

tmp.NAVI = HMENU
tmp.NAVI.1 = TMENU
tmp.NAVI.1 {
  wrap = <ul>|</ul>
  NO = 1
  NO {
    allWrap = <li>|</li>
  }
  ACT = 1
  ACT {
    allWrap = <li>|</li>
  }
}

Dieses Beispiel ist ein sehr minimalistisches Menü mit 2 Zuständen: Normal und Aktiv. Klickt man auf einen Menüpunkt und die Seite ist geladen, hat der aktuelle Menüpunkt eine andere CSS Klasse als der Rest.

temp.himage = TEXT
temp.himage {
  value = <img src="/fileadmin/templates/images/header.jpg"
}

temp.headerimage = COA
temp.headerimage {
  10 = COA
  10.10 < temp.himage
  10.stdWrap.override.cObject < styles.content.getBorder
}

Im ersten Teil des Codes laden wir ein Standard Emo Bild aus dem /fileadmin/ Ordner. Im 2. Bereich erstellen wir ein COA (Content Objekt Array) und weisen dem zuerst unser temp.himage definiertes Emobild zu. Wenn wir nun im TYPO3 Backend eine Grafik für den Header-Bereich hinterlegen, überschreiben wir hier das Standardbild wieder. Hinterlegen wir nichts, bleibt das Standardbild im COA enthalten und wir gleich bei den SubParts ausgegeben:

page.10.subparts {
  NAVIGATION < tmp.NAVI
  LEFTCONTENT < styles.content.getLeft
  MAINCONTENT < styles.content.get
  RIGHTCONTENT < styles.content.getRight
  HEADERIMAGE < temp.headerimage
}

Unsere 5 Subparts werden ab jetzt durch TYPO3 Content  ersetzt. Dabei weisen wir die verschiedenen Backend Spalten den verschiedenen Subparts zu. Ausserdem wird die Navigation und das Emobild auf einen SubPart gelegt.

## Allgemeine Configs ##
config {
  language = de
  locale_all = de_DE
  noPageTitle = 2
  doctype = xhtml_trans
  htmlTag_langKey = de
  xhtml_cleaning = all
  xmlprologue = none
  removeDefaultJS = 1
  removeDefaultJS = external
  inlineStyle2TempFile = 1
  disablePrefixComment = 1
  spamProtectEmailAdresses = 2
  spamProtectEmailAdresses _atSubst = (at)
}

Wir stellen hier die Systemsprache auf Deutsch, ebenso die locales. Den Doytype geben wir als XHTML Transitional an. Javascript das von TYPO3 eingebunden wird, lagern wir in Dateien aus damit der Sourcecode der Ausgabe nicht so zugemüllt ist. Ausserdem aktivieren wir den Spamschutz für Emailadressen. Emailadressen werden in nicht lesbare Phrasen umgewandelt. Das @ Zeichen wird durch einen beliebigen Wert (hier (at) ) ersetzt.

## Seitentitel vom Header ##
page.headerData.10 = TEXT
page.headerData.10 {
  field = title
  wrap = <title>| - Testtemplate on der-webentwickler.net</title>
}

Damit können wir den eingegebenen Titel der Seite um einen festen Eintrag  im Titel erweitern. Dieser erscheint dann in der Browserleiste.

Themen in diesem Kurs:

1. Vorbereiten einer HTML Datei, setzen von Subparts
2. Backend-Spalten anpassen
3. Seitenbaum erstellen
4. Dateibaum erstellen

Was kann ich am Ende des Kurses mit TYPO3 machen?

Wir werden das HTML Template für TYPO3 vorbereiten. Ich gehe davon aus, dass Du bereits mit HTML vertraut bist, und ein Layout erstellen kannst. Sollte das nicht der Fall sein, steht Dir am Ende der Download mit den Dateien zur Verfügung. An denen kannst Du Dich dann weiter orientieren. Wir werden das TYPO3 für ein 3 spaltiges Layout einrichten, und zusätzlich ein austauschbares Headerbild (Emobild) anlegen. Du lernst wie man eine Dateistruktur sowie einen Seitenbaum anlegt und einen TypoScript Template Record erstellt. Am Schluss des Lehrgangs werden wir eine Seite mit Content pflegen. Wenn Du nicht selbst Lust hast ein TYPO3 zu installieren und einzurichten, möchte ich Dir Mittwald als Hoster für TYPO3 empfehlen. Die Preise sind klein und die Leistungen sehr gut: Mittwald TYPO3 Hosting.

Als erstes benötigen wir ein fertiges HTML Dokument. Die beste Vorgehensweise ist, zuerst ein Layout zu gestalten. Bei aufwändigeren Designs wird das Layout zuerst im Grafikprogramm erstellt. Dann kommt der nächste Schritt: Nachbauen in HTML und CSS.

Für diesen Kurs habe ich ein kleines Grundlayout auf CSS Basis erstellt. Das Layout ist 3 Spaltig und hat einen Emo-Bereich. Auf der linken Seite befindet sich eine Navigation. Unter der Navigation kann zusätzlich Content gepflegt werden. In der Mitte befindet sich der Haupt-Content-Bereich und links ist erneut eine Spalte für pflegbaren Content enthalten. Im Emobereich kann das Bild getauscht werden. Hier kannst Du das HTML Layout ansehen.

Damit nun TYPO3 nachher weiß, welcher Content wohin muss, musst Du im HTML Template sogenannte “Subparts” erstellen. Jeder Subpart hat einen Start- und Endpunkt. Alles was sich in diesem Subpart befindet, entfernt TYPO3 automatisch und füllt es mit dem eigenen Content auf. Einzige Ausnahme: Der Dokumenten Subpart (wird weiter unten beschrieben). Subparts werden wie folgt erstellt:

<div>
	<!-- Subpart ###HEADERIMAGE### begin -->
		<img src="header.jpg">
	<!-- Subpart ###HEADERIMAGE### end -->
</div>

In diesem Beispiel wird also der Subpart HEADERIMAGE definiert. Wichtig dabei sind folgende Punkte:

• Code in html Kommentar schreiben
• 3 x Raute am Anfang und 3 x Raute am Ende des Namens für den Subpart

Der Code, der sich zwischen den beiden HTML Kommentaren befindet, kann so verbleiben. Eben dieser Teil wird wird nachher von TYPO3 dynamisch ersetzt. Das hat den Vorteil dass Änderungen am Layout relativ einfach vorgenommen werden können, da keine Code-Teile gelöscht werden müssen. Man sieht also am HTML Template wie es nachher auch aussehen wird, wenn TYPO3 mit dem HTML Template arbeitet.

Der wichtigste Subpart ist nun der DOKUMENT Subpart. DIeser Subpart umschliesst alle anderen Subparts. HTML Code der sich außerhalb dieses Subparts befindet, ignoriert TYPO3 schlichtweg. Dieser Subpart wird deshalb auch nach dem body-Tag des HTML Dokumentes eingeleitet, und hört vor dem schließenden body Tag wieder auf:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Training Template</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
<!-- Subpart ###DOKUMENT### begin -->
  <div>

	some code....

  </div>
<!-- Subpart ###DOKUMENT### end -->
</body>
</html>

Der Name muss nicht zwingend DOKUMENT lauten. Dieser ist frei definierbar und in TypoScript einstellbar.

Rein theoretisch kann man in einem HTML Template auch mehrere Dokumenten-Subparts angeben. So hätte man dann für verschiedene Layouts immer nur ein HTML-File mit allen Designs. Für einen Internetauftritt mit mehreren HTML Templates empfehle ich aber auch mehrere HTML Vorlagen zu bauen. Man ist bei der Gestaltung und Programmierung der Vorlage flexibler und es ist in TYPO3 nachher auch übersichtlicher.

Noch ein Beispiel: Subpart einer Navigation

<div>
	<!-- Subpart ###NAVIGATION### begin -->
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Demos</a></li>
		<li><a href="#">Misc</a></li>
	</ul>
	<!-- Subpart ###NAVIGATION### end -->
</div>

Die Navigationsliste befindet sich in einem DIV mit der Klasse navi. Das ul Element und die Listeneinträge befinden sich innerhalb des Subparts ###NAVIGATION###. Du musst also das Menü mit TypoScript so konfigurieren, dass genau diese Struktur von TYPO3 ausgegeben wird. Um den äußeren DIV machen wir uns keine Gedanken, dieser wird von TYPO3 ja nicht gelöscht.

Und hier die HTML Datei mit allen Subparts die benötigt werden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Training Template
    </title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen">
  </head>
  <body>
    <!-- Subpart ###DOKUMENT### begin -->
    <div>
      <div>
        <!-- Subpart ###HEADERIMAGE### begin -->
        <img src="header.jpg">
        <!-- Subpart ###HEADERIMAGE### end -->
      </div>
      <div>
        <div>
          <div>
            <!-- Subpart ###NAVIGATION### begin -->
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">News</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Demos</a></li>
              <li><a href="#">Misc</a></li>
            </ul>
            <!-- Subpart ###NAVIGATION### end -->
          </div>
          <!-- Subpart ###LEFTCONTENT### begin -->
          <h2>Some Content...</h2>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <!-- Subpart ###LEFTCONTENT### end -->
        </div>
      </div>
      <div>
        <div>
          <!-- Subpart ###MAINCONTENT### start -->
          <h1>Text, Text und nochmal Text....</h1>
          <img src="image01.jpg" style="display:inline; float:left; padding:0 10px 10px 0;">
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <!-- Subpart ###MAINCONTENT### end -->
        </div>
      </div>
      <div>
        <div>
          <!-- Subpart ###RIGHTCONTENT### start -->
          <h2>Some other content</h2>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <h2>Mehr davon...</h2>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <!-- Subpart ###RIGHTCONTENT### end -->
        </div>
      </div>
      <div>
      </div>
    </div>
    <!-- Subpart ###DOKUMENT### end -->
  </body>
</html>

TYPO3 bietet uns standardmäßig 4 Spalten an: Links, Mitte, Rechts und Rand. Diese Spalten werden nachher den verschiedenen Subparts im HTML Template, dass Du gerade erstellt hast, zugewiesen.

Die 4 spalten die TYPO3 bereits mitbringt, reichen in aller Regel auch aus. Allerdings möchte ich bei dieser Installation ein Headerbild austauschbar machen. Und genau dafür bietet sich eine solche Spalte an. Nur, was macht es für einen Sinn, ein Emobild in einer Spalte namens “Rand” zu pflegen? Keinen Deshalb werden wir diese 4. Spalte neu konfigurieren und mit dem Titel Headerimage belegen.

Leider bietet TYPO3 uns das nicht als Konfigurationspunkt an. Wir müssen dazu 2 Konfigurationsdateien von TYPO3 anpassen. Dazu benötigst Du ein FTP Programm mit dem Du Zugriff auf deinen Webspace hast. Ich beginne mit der Datei  /typo3conf/extTables.php:

Am Ende der Datei musst Du folgenden Code einfügen:

t3lib_extMgm::addPageTSConfig('
mod.SHARED.colPos_list = 1,0,2,3
');
$TCA["tt_content"]["columns"]["colPos"]["config"]["items"] = array (
"1" => array("Links||Links||||||||","1"),
"0" => array("Mitte||Mitte||||||||","0"),
"2" => array("Rechts||Rechts||||||||","2"),
"3" => array("Headerbild||Headerbild||||||||","3"),
);

Bitte achte darauf, diesen Code vor dem ?> einzufügen. Wenn Du soweit bist, dann öffne die Datei /typo3conf/localconf.php:

Füge auch hier am Ende der Datei folgendes ein und achte darauf dass auch hier dass ?> immer als allerletzte Zeile kommen muss!

$typo_db_extTableDef_script = 'extTables.php';

Somit hast Du nun erfolgreich die Spaltennamen im TYPO3 Backend angepasst. Solltest Du Dich diesen Schritt nicht trauen, kannst Du Ihn auch ohne Probleme übergehen. Du musst in Zukunft nur dran denken, dass die Spalte “Rand” für den Headerbereich zuständig ist.

Dieser Eingriff in die TYPO3 Dateien sind sofort zu erkennen. Wenn Du im Backend im Seitenmodul nachher auf eine Seite klickst, siehst Du die neue konfigurierten Spalten.

Zum Seitenbaum gibt es nicht besonders viel zu schreiben. Der Seitenbaum im TYPO3 Backend stellt die Struktur der Internetseite dar. Ausserdem wird aus dem Seitenbaum die Naviagtion erzeugt. Im Seitenbaum können normale Seiten, versteckte Seiten oder auch sogenannte SysFolder, also Systemordner erstellt werden. Jede Seite hat einen Titel der sich im Seitenbaum wiederspiegelt. Zum Titel kann man das Feld alias nutzen. Das ist die Angabe wenn man “sprechende” Urls unabhängig vom Seitentitel aufbauen möchte.

Einzelne Seiten lassen sich per Drag & Drop im Seitenbaum bewegen. Ausserdem gibt es noch den Eintrag “Funktionen” im Linken Modulmenü. Dieser Punkt enthält verschiednene Assistenten. Einer davon nennt sich “Viele Seiten anlegen“. Das ist ein ganz nützliches Werkzeug wenn man mehr als eine Seite gleichzeitig anlegen möchte. Man hat die Möglichkeit, bis zu 10 Seiten auf einmal anzulegen. Wie man genau Seiten anlegt, erfährst Du im Video.

Der Dateibaum in TYPO3 ist der Bereich, wo man Ressourcen und Media Daten ablegen und verwalten kann. Der Dateibaum befindet sich im Ordner fileadmin/. In diesem Dateibaum erstelle ich den Ordner templates/ in den ich dann die html, css und sonstige Dateien die für den Betrieb der Seite notwendig sind, einsortiere. Über das TYPO3 Backend lassen sich Ordner anlegen, Dateien erstellen, Dateien hochladen und wenn es sein muss, auch alles wieder löschen.

Der Zugang zum Dateibaum und den Dateien kannst du mit einem Klick auf “Dateiliste” bekommen. Für spätere Mediadaten und Downloads empfiehlt es sich, innerhalb von fileadmin/einen extra Ordner anzulegen, und den Redakteur in dieses Verzeichniss einzuschliessen, damit nicht aus versehen die benötigten Template Ressourcen verschwinden.

In den nächsten Tagen erscheint auch ein passendes Video Tutorial zum ersten Teil, sowie nächster Woche der zweite Teil der Serie.

/* IF-Condition treeLevel – Navigationsebene   */
[treeLevel = 2,3,4,5]
TypoScript
[global]