Artikelformat

Website in 30 Minuten mit TYPO3 Teil 2: TypoScript Templates, Inhalte pflegen

Im ersten Teil des TYPO3 Kurs: Website in 30 Minuten habe ich folgende Themen behandelt:

  • 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

So sieht ein eben erstelltes TypoScript Template aus

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.

Autor: Rene Kreupl

Bloggt über WebEntwicklung und Fotografie

3 Kommentare

  1. Hi, also ein super tutorial. Ich muss gerade für ein Projekt mich in typo3 einarbeiten. Bis jetzt habe ich immer Drupal oder WordPress genutzt. Sehr gut und aussführlich erklärt. Vielen Danke.

  2. Hallo,

    echt mal eine detaillierte Erklärung, finde ich super geschrieben und man kann auch als Anfänger sich reindenken.
    Ich habe auch alles fein säuberlich übernommen – bekommen jedoch noch nichts angezeigt, außer eine Fehlermeldung.

    ———-Fehlermeldung —————-
    # 1294587217: Die Seite ist nicht konfiguriert! [Type = 0] []. Dies bedeutet, dass es keine TypoScript Objekt vom Typ PAGE mit typeNum = 0 konfiguriert ist. ( Weitere Informationen ) TYPO3 \ CMS \ Core \ Fehler \ Http \ ServiceUnavailableException in geworfen Linie 2355 .

    2 TYPO3 \ CMS \ Frontend \ Controller \ TypoScriptFrontendController :: getConfigArray ()

    C: \ xampp \ htdocs \ swz_intranet \ typo3 \ sysext \ cms \ tslib \ index_ts.php:
    00167: / / config zu bekommen, wenn nicht bereits bekommen
    00168: / / Nach dieser, sollten wir über eine gültige Config-Array bereit
    00169: $ TSFE-> getConfigArray ();
    00170: / / Konvertieren POST-Daten im internen „renderCharset“ falls abweichend von der metaCharset
    00171: $ TSFE-> convPOSTCharset ();

    1 erfordern (“ C: \ xampp \ htdocs \ swz_intranet \ typo3 \ sysext \ cms \ tslib \ index_ts.php „)

    C: \ xampp \ htdocs \ swz_intranet \ index.php:
    00039: -> redirectToInstallToolIfLocalConfigurationFileDoesNotExist ();
    00040:
    00041: require (PATH_tslib ‚index_ts.php‘.);
    00042:>

    ——————ENDE ————-

    Woran könnte es liegen?

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.