Mehrsprachige Webseiten 

Single Tree oder Multi Tree? Unterschiede der Sprachvarianten und eine handvoll TypoScript.

02.03.2016 1515

Mehrsprachige Webseiten mit TYPO3

Mehrsprachige Webseiten sind mit TYPO3 eigentlich ganz einfach zu realisieren. Schaut man in die Praxis, werden dort oft TypoScript Angaben kreuz und quer überschrieben, zahlreiche Extensions für das Language Menü ausprobiert und am Ende ist das Ergebnis immer noch nicht zufriedenstellend. Hier eine Anleitung für die Praxis:

Single-Tree oder Multi-Tree?

Grundsätzlich kann man mit TYPO3 mehrsprachige Webseiten auf zwei verschiedene Arten abbilden. Mit der Single-Tree Variante(one tree fits all) die in diesem Tutorial beschrieben wird, arbeiten alle Sprachen mit dem gleichem Seitenbaum. Die Seiten (und Content) werden in die benötigten Sprachen übersetzt, über einer Sprachmenü kann die übersetzte Seite ausgewählt werden. Dabei verbleibt man im Seitenbaum auf der gleichen Seite und wechselt nur die Sprache. Der URL wird dazu ein Language Parameter angehangen, meist in Form von z.B. ?L=1. Über ReaURL kann dieser auch in einen URL Pfad verwandelt werden, also z.B. meineseite.de/en/. Doch dazu später mehr.
Beim Multi Tree Konzept wird für jede Sprache ein eigener Seitenbaum angelegt. Damit ist man völlig frei welche Inhalte und Menüpunkte auf der fremdsprachigen Version der Seite angezeigt werden. Das Sprachmenü verweist dann nur auf die PageId des jeweiligen Sprachbaums.

Mehrsprachige Webseiten in TYPO3 anlegen

Für mehrsprachige Webseiten (single tree) müssen wir folgende Punkte beachten:
  • Im TYPO3 Backend die Übersetzung von Seiten & Content ermöglichen
  • Definieren wie nicht übersetzten Seiten & Content angezeigt werden
  • Ändern der local Angaben im Frontend bei Sprachumschaltung
  • Ein Sprachmenü einbauen
  • Optional: Language Parameter (meineSeite.de?L=1) per realURL in Token ändern (meineSeite.de/en/)
Die Standardsprache festlegen In eurem config Part des Seitensetups solltet Ihr unabhängig von der Mehrsprachigkeit folgende Zeilen stehen haben:
config {
    # setzt den html Tag im Seitenheader z.B. für html5 Seiten
    htmlTag_setParams = lang="de"

    # Wird benötigt um automatisch die Srachdateien in Extensions zu finden
   language = de

   # Angabe für php um sprachspezifische Ausgabe zu ermöglichen, z.B. Datumsformat
   locale_all = de_DE.UTF-8
   ...
}
Den Teil ergänzen wir um die Linkvariable für die Sprache sowie um die Angabe wie nicht übersetzter Content behandelt werden soll:
config {
    ....
    #Linkvariable für die Sprache setzten
    linkVars = L

    # Bei der empfohlenen Einstellung "content_fallback" bleibt das Frontend
    # in der entsprechenden Sprache auch wenn die Seite nicht übersetzt ist:
    # Die Menüs werden immer noch in der richtigen Sprache angezeigt, der
    # Content wird in der Standardsprache angezeigt.
    sys_language_mode = content_fallback

    # Nicht übersetzter Content: Content in Default anzeigen
    sys_language_overlay = 1
}

Parameter für weitere Sprachen festlegen

Im ersten Code Snippet hatten wir die Parameter für die Standardsprache festgelegt. Wir benötigen nun für jede weitere Sprache entsprechende Einstellungen. Dies erledigen per conditions am Ende des Setups (Hinweis: Conditions dürfen nicht in geschweiften Klammern stehen, diese Angaben haben also im Config Teil nichts zu suchen!)
[globalVar = GP:L = 1]
    config {
        sys_language_uid = 1
         language = en
         htmlTag_setParams = lang = "en"
    }
[global]
Die SprachID (L = 1 und sys_language_uid = 1) ist abhängig welche UID eure Sprache hat. Siehe nächster Abschnitt.

Sprachen für das TYPO3 Backend definieren

Damit die Standardsprache bei der Backendeingabe auch einen Namen und eine Flagge bekommt, wechseln wir in das Seitensetup unserer Rootseite und ergänzen dort folgenden Eintrag:
mod.SHARED {
    defaultLanguageFlag = de
   defaultLanguageLabel = Deutsch
}
Danach gehen wir auf in die Listenansicht unseres Rootverezichnisses und können dort eine neue Sprache hinzufügen. Bitte kontrolliert nochmal in der der Listenansicht die UID eurer Sprache, diese muss mit der Angabe in der global Condition übereinstimmen! Nun können wir endlich im Backend unsere Seiten übersetzen.

Das Language Menü

Es gibt eine handvoll Extensions die ein Language Menü erzeugen, aber im Grunde reichen ein paar Zeilen TypoScript um das zu realisieren:

ERROR: Content Element with uid "93" and type "t3devtemplate_code" has no rendering definition!

Das Snippet hat einen kleinen Schönheitsfehler:
Wird die Seite erstmalig aufgerufen, laufen alle Links ohne Language Parameter. Beim Umschalten auf Englisch wird richtigerweise &L=1 angehangen. Wechselt man nun wieder auf die deutsche Sprache, sind alle Links mit dem Language Parameter &L=0. Das bedeutet das die deutschen Seiten doppel gecached werden sowie über zwei verschiedene URLs erreichbar sind (mit und ohne dem Parameter &L=0). Dies kann per RealUrl verhindert werden:
Um aus unserem Parameter "?L=1" nun ein Token "/en/" zumachen sowie um die unnötigen ?L=0 Parameter für die Standardsprache zu entfernen reicht folgender Eintrag in der realURL Configuration:
'preVars' => array (
....
array (
'GETvar' => 'L',
       'valueMap' => array (
       'en' => '1' // die Uid der Sprache!
       ),
       'noMatch' => 'bypass'
    ),
    ....
)