Setup einer TYPO3 Webseite mit TypoScript

Einbindung einer TypoScript Datei

Sobald man das Root (Basis) Template der Webseite angelegt hat, kann man mit der Einbindung des Setup der Webseite in TypoScript beginnen. In diesem Setup der Seite wird das PAGE Objekt erzeugt, das für den Aufbau des Quelltextes der Seite sorgt. Dabei ist es notwendig, ein HTML-Template für die Seite einzubinden. Zudem werden Suchpfade für das Layout und Partials vorgegeben. Schließlich werden die Inhalte des Backend Layouts mit Objekten in den HTML-Templates verknüpft. 

Page Objekt initialisieren

Hier sehen Sie ein Beispiel für den Aufbau eines Setup in TypoScript: 

 ## Initialisierung eines PAGE Objektes 
page = PAGE 
page.10 = FLUIDTEMPLATE 
page.10 {
    format = html
    # Pfad zu der HTML Vorlage der Webseite 
    file = fileadmin/templates/Page.html
    # Pfad zu eingebundenen Partials 
    partialRootPath = fileadmin/templates/Partials/
    # Pfad zur Layout Datei 
    layoutRootPath = fileadmin/templates/Layouts/
    variables {
        page_title = TEXT
        page_title.field = subtitle // title
   
        # Verknüpfung der Inhalte mit dem Backend Layout 
        content < styles.content.get
        content.select.where = colPos = 1
    }
}

Zur Verknüpfung der Inhalte des Backend Layout mit dem Fluid Template nutzt man die Spaltennummern, die man dort vergeben hat. Diese finden sich in der Tabelle tt_content der TYPO3 Datenbank im Feld ColPos wieder. Über das oben geschilderte TypoScript bindet man diese Inhalte nun an Objekte, deren Namen man fast frei wählen kann, wie hier die Bezeichnung content. Man sollte dabei auf diese Konventionen achten:

  • Die Bezeichnung der Variablen darf nur aus Kleinbuchstaben bestehen
  • Es dürfen keine Umlaute und Sonderzeichen verwendet werden
  • Zum Trennen einzelner Worte sind Unterstriche sind zulässig, aber keine Leerzeichen

Ein Name wie inhalt_ganze_seite ist ein zulässiger Titel für eine Variable.

Vererbung des Fluid Templates

In einem weiteren Schritt wird das HTML-Template so eingebunden, dass es über beliebig viele Ebenen vererbt werden kann, wie oben bei der Einbindung in der Startseite geschildert. Auch wenn eine TYPO3-Webseite mehrere Tausend einzelne Seiten in mehreren Ebenen hat, reicht es dadurch, ein einzelnes HTML-Template anzugeben. 

 page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
    key.data = levelfield:-1, backend_layout_next_level, slide
    key.override.field = backend_layout
    default = TEXT
    # Einbindung der HTML Vorlage 
    default.value = fileadmin/templates/Page.html
}

Mehrere Backend Layouts einbinden 

Es besteht nun auch die Möglichkeit, mehrere Backend Layouts in eine Webseite einzubinden. Die Objekte für die Inhalte müssen an die entsprechende Spaltennummer (ColPos) gekoppelt werden. Um das Layout bereitzustellen, muss die obige Einbindung erweitert werden: 

 page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
    key.data = levelfield:-1, backend_layout_next_level, slide
    key.override.field = backend_layout
    
    # Einbindung des ersten HTML Templates 
    1 = TEXT
    1.value = fileadmin/templates/Page.html
     
    # Einbindung des zweiten HTML Templates 
    2 = TEXT
    2.value = fileadmin/templates/Zweipalten.html
     
    # Einbindung des Standard HTML Templates 
    default = TEXT
    default.value = fileadmin/templates/Page.html
}

Hierbei ist darauf zu achten, dass die zusätzlichen HTML Templates entsprechend ihrer UID in der Tabelle backend_layout der TYPO3 Datenbank benannt werden. Das hier verwendete zweite Backend Layout hat also die Uid „2“ in der Tabelle. 
 

HEAD Angaben einbinden

CSS einbinden 

page {
    includeCSS {
        css1 = fileadmin/scripts/css/formate.css
        css1.media = all
    }
}

JavaScript einbinden 

page {
    includeJSFooterlibs {
        file = fileadmin/scripts/js/jquery-3.3.1.min.js
    }
}

Erzeugung eines TITLE Tag: 

page {
    headerData { 
        10 = TEXT
        10.field = subtitle // title // description
        10.wrap = <title>|</title>
    }
}

Hinweis: Seit der Version v9.5 von TYPO3 ist diese Art der Einbindung nicht mehr notwendig. In den Seiteneigenschaften gibt es das neue Feld seo_title (Titel für Suchmaschinen). Wenn dieses Feld ausgefüllt ist, wird der bei der Erstellung der Seite vergebene Text überschrieben. Auch die Abschaltung des Stand Titels ist nun nicht mehr notwendig. 

Social Media Einbindung in TypoScript

Für die Einbindung von Dateien in Facebook und Twitter war es bis zur v8.7 von TYPO3 die Regel, dass die HEADER-Angaben der Webseite um entsprechende Tags ergänzt hat. Hier ein Beispiel für die Einbindung einer Beschreibung für Facebook: 

Tag für Open Graph (Facebook): 

page {
    headerData { 
        20 = TEXT
        25 {
            field = description // subtitle // title
            wrap = <meta property="og:description" content="|">
        }
    }
}

Hinweis: Ab der Version v9.5 von TYPO3 ist diese Angabe nicht mehr explizit notwendig. Für diese Daten gibt es nun eine eigene Eingabemaske in den Seiteneigenschaften. 

Thomas Berscheid, 24.11.2019 15:11
^