Für jede Sprache, in die die Website übersetzt werden soll, müssen folgende Schritte durchlaufen werden:

1. Website-Sprache einrichten
2. TypoScript konfigurieren
3. RealURL konfigurieren

Um zusätzliche Website-Sprachen einzurichten muss man in der Listen-Ansicht zur root-Seite (auch „Wurzelebene“ genannt) der Website wechseln.

Dort befindet sich entweder eine Box mit dem Titel „Website-Sprache“, falls bereits eine Website-Sprache eingerichtet ist, oder eine erste, zusätzliche Website-Sprache muss über das „Datensatz hinzufügen“-Icon anglegt werden (Der Punkt „Website-Sprache“ befindet sich im Abschnitt „Systemdatensätze“).

In der Ansicht zum Anlegen der Website-Sprache muss nun ein Name für die Sprache vergeben werden (der Name kann beliebig sein, da dieser nur für das Backend ist, sollte aber für die Redakteure trotzdem sinnvoll gewählt werden). Dazu kann, zur einfacheren Orientierung für die Redaktion, ein Flaggen-Symbol ausgewählt werden.

Zudem kann bestimmt werden, ob die Website-Sprache zunächst inaktiv sein soll. Dies kann sinnvoll sein, wenn die Website erst nach und nach übersetzt werden soll, aber man die Konfiguration in einem Zug durchgeführt werden soll. Dann können alle Website-Sprachen auf einmal angelegt werden und alle Sprachen, die der Redakteur noch nicht sehen soll, als „inaktiv“ markiert werden. Später können dann die Website-Sprachen schnell aktiviert werden.

Nachdem einrichten der Website-Sprache muss mittels TypoScript die Verbindung zwischen dem Template und den Inhalten hergestellt werden.

Einmalig muss die Standard-Sprache und der URL-Parameter eingerichtet werden, über den die anderen Sprach-Versionen später erreichbar sind. Dies lässt sich am einfachsten über einen config-Block einstellen:

# URL-Parameter
config.linkVars = L
config.uniqueLinkVars = 1
 
# Standard-Sprache
config.sys_language_uid = 0
config.language = de
config.locale_all = de_DE.UTF8  
config.htmlTag_langKey = de-DE

Zudem sollte ein Sprach-Wahl-Menü erstellt werden, dazu kann z.B. im Template ein Platzhalter ###LANGUAGE_MENU### definiert werden, das dann per TypoScript ersetzt wird:

page.10 = TEMPLATE
page.10 {
  template = FILE
  template.file = fileadmin/template/default.tpl.html
 
  workOnSubpart = DOCUMENT
 
  subparts {
    LANGUAGE_MENU = COA
    LANGUAGE_MENU {
      wrap = <ul class="language-nav">|</ul>
 
      # Standard/Deutsch
      10 = TEXT
      10 {
        wrap = <li>|</li>
        value = Deutsch
        stdWrap.typolink.parameter.data = page:uid
        stdWrap.typolink.additionalParams = &L=0
      }
 
      # Englisch
      20 = TEXT
      20 {
        wrap = <li>|</li>
        value = English
        stdWrap.typolink.parameter.data = page:uid
        stdWrap.typolink.additionalParams = &L=1
      }
    }
  }
}

Wichtig ist bei den einzelnen Links die Eigenschaft stdWrap.typolink.additionalParams die richtige ID der Website-Sprache in &L= einzutragen.

Für eine weitere Sprache, z.B. Französisch mit der ID = 2, müsste dann ein weiterer Block eingefügt werden:

# Französisch
30 = TEXT
30 {
  wrap = <li>|</li>
  value = Francais
  stdWrap.typolink.parameter.data = page:uid
  stdWrap.typolink.additionalParams = &L=2
}

Diese Konfiguration muss für jede Website-Sprache vorgenommen werden.

Es muss für jede Sprache ein Bedingungs-Block globalVar = GP:L eingerichtet werden, der die Sprach-Einstellungen je nach, vom Nutzer ausgewählten, Sprache ändert.

[globalVar = GP:L = 1]
config.sys_language_uid = 1
config.language = en
config.locale_all = en_EN.UTF8
config.htmlTag_langKey = en
[global]

Im Vergleich bei globalVar = GP:L wie bei config.sys_language_uid muss die ID der Website-Sprache eingetragen werden. Diese wird einfach hochgezählt, d.h. die erste angelegte Website-Sprache hat die ID = 1, die zweite ID = 2, usw.

Bei Bedarf lässt sich die ID der Website-Sprache ermitteln, indem man bei den Website-Sprachen mit dem Maus-Zeiger über die Fahne der Sprache fährt und kurz auf den Tooltip wartet, indem dann die ID der Website-Sprache angezeigt wird.

In config.language wird der Sprach-Code nach ISO 639-1 eingetragen, siehe dazu: Liste der ISO 639-1 Codes.

In config.htmlTag_langKey wird der Sprach-Code für HTML-Seiten eingetragen, siehe dazu: W3C: Language Tags

In config.locale_all wird der Sprach-Code ähnlich zum Sprach-Code für HTML-Seiten eingetragen, außer das dieser nicht mit einem Binde- sondern mit einem Unterstrich getrennt wird. Zudem wird durch einen Punkt getrennt noch der verwendete Zeichensatz eingefügt, meist UTF8.

Für eine weitere Sprache, z.B. Französisch mit der ID = 2, müsste dann ein weiterer Block eingefügt werden:

[globalVar = GP:L = 2]
config.sys_language_uid = 2
config.language = fr
config.locale_all = fr_FR.UTF8
config.htmlTag_langKey = fr
[global]

Wenn, wie mittlerweile meist üblich, kanonische URLs verwendet werden, dann wird für TYPO3 meist die Erweiterung RealURL verwendet. Damit die URLs statt dem Parameter ?L=1 dann lesbare Adressen wie /en/home anzeigen, muss in RealURL einige Einstellungen vorgenommen werden.

Dazu muss die Datei realurlconf.php bearbeitet werden, die im Verzeichnis typo3conf liegt:
/typo3conf/realurlconf.php

Dort befindet sich im Array preVars ein Array mit dem Eintrag 'GETvar' =\> 'L':

realurlconf.php

<?php
$TYPO3_CONF_VARS['EXTCONF']['realurl']['_DEFAULT'] = array(
	// ...
	'preVars' => array(
		// ...
		 array(
			'GETvar' => 'L',
			'valueMap' => array(
				'en' => '1'
			),
			'noMatch' => 'bypass',
		),
	),
	// ...
);

Dort können im Array valueMap URL-Ersetzungen den IDs der Website-Sprachen zu geordnet werden, z.B. der Website-Sprache mit der ID = 1 (im Beispiel Englisch), wird der URL-Teil „en“ zugewiesen, sodass statt ?L=1 in der URL /en/ steht. Die Liste kann beliebigt erweitert werden (Achtung, PHP-Syntax!).

Für eine weitere Sprache, z.B. Französisch mit der ID = 2, müsste das Array wie folgt erweitert werden:

'valueMap' => array(
	'en' => '1',
	'fr' => '2'
),