TYPO3 CMS

Installation von TYPO3 6.2 mit Git

caticonslite_bm_alt

Die Verwendung von Git als Versionverwaltung für TYPO3 (Version Control System – VCS) ist unbedingt zu empfehlen, schließlich ergeben sich u.a. folgende Vorteile daraus:

  • Der eigene Code ist versioniert, d.h. sollte es zu Problemen kommen, kann die funktionierende Version einfach wiederhergestellt werden.
  • Der TYPO3 Core wird als Git-Submodule eingebunden, somit ist das Einspielen von Core-Patches (z.B. nach Sicherheitslücken) binnen Sekunden erledigt.

Die Installation von TYPO3 mit Git hat sich im Vergleich zu den Vorgängerversionen seit Version TYPO3 6.2 sehr vereinfacht:

1. Initialisieren eines leeren Git-Repositories im Webverzeichnis (z.B. „public_html/“):

git init

2. TYPO3-Core („typo3_src“) als Git-Submodule einbinden und in das Verzeichnis wechseln:

git submodule add git://git.typo3.org/Packages/TYPO3.CMS.git typo3_src
cd typo3_src/

3. Anzeigen der verfügbaren Tags (TYPO3 Core-Versionen):

git tag

4. Checkout des TYPO3 Core in der gewünschten Version (in diesem Fall 6.2.4):

git checkout tags/TYPO3_6-2-4

5. Wechsel zurück in das Webverzeichnis und anlegen der erforderlichen Symlinks:

cd ..
ln -s typo3_src/index.php
ln -s typo3_src/typo3

6. Kopieren der .htaccess-Datei für URL-Rewriting, etc.:

cp typo3_src/_.htaccess .htaccess

7. Ausschließlich „Programmcode“ soll im Git-Repository versioniert werden, daher werden „Benutzerdaten“ (z.B. hochgeladene Bilder, Dokumente) und weitere für die Versionierung nicht relevante Dateien/Ordner ausgenommen:

echo "# User
/fileadmin/
/uploads/
# Deprecation-Log
/typo3conf/deprecation*
# Enable Install Tool
/typo3conf/ENABLE_INSTALL_TOOL
# SQL
/typo3conf/*.sql
/typo3conf/*.sql.gz
# Temp
/typo3conf/temp_*
/typo3temp/
# IDE & OS
/.DS_Store
/.idea/
/nbproject/
*.swp
" > .gitignore

8. Initial commit im CommitMessage-Format für TYPO3:

git add .
git commit -a -m "[TASK] initial commit"

Die Verzeichnisse „fileadmin“, „uploads“,… und deren Unterverzeichnisse werden während der Installation automatisch angelegt, mit der nun im Browser begonnen werden kann.

Individuelle Rahmen für Content Elemente

caticonslite_bm_alt

Um Inhaltselementen (engl. Content Elements) in TYPO3 ein individuelles Aussehen zu verpassen (z.B. Überschrift und Text in einer abweichenden Farbe), hat man die Möglichkeit vordefinierte Rahmen zu verwenden oder auch eigene festzulegen. Die Einstellung „Einrückung und Rahmen“ (engl. „Indentation and Frames„) befindet sich in den Eigenschaften jedes (Standard-)Inhaltselements auf der Registerkarte „Erscheinungsbild“ (engl. „Appearance„). Damit die Einstellung dargestellt wird, muss „Zweite Optionspalette anzeigen“ (engl. „Show secondary options (palettes)„) am Ende in den Eigenschaften aktiviert sein.

Abhängig davon, welcher Wert für „Einrückung und Rahmen“ ausgewählt wird, werden unterschiedliche CSS-Klassen im HTML-Quelltext ausgegeben. Die vordefinierte Option „Standardframe“ führt beispielsweise zur Ausgabe der CSS-Klasse „csc-default“.

Um einen individuellen Rahmen festzulegen, fügt man im PageTS folgende Zeilen ein:

TCEFORM.tt_content {
	section_frame.addItems.101 = Individueller Rahmen
	section_frame.addItems.102 = Weiterer individueller Rahmen
}

Die Zahlen „101“ und „102“ stehen in diesem Beispiel für die IDs der Rahmen (um nicht unbeabsichtigt vordefinierte Rahmen zu überschreiben sollten Zahlen größer als 100 gewählt werden), „Individueller Rahmen“ und „Weiterer individueller Rahmen“ für die Beschreibungen, die als Optionen angezeigt werden. Anstelle einer hardcodierten Beschreibung, wie in diesem Fall, ist der Verweis auf eine Sprachdatei empfehlenswert (z.B.: „section_frame.addItems.101 = LLL:EXT:webentwickler_at/Resources/Private/Language/locallang_ttc.xlf:section_frame.I.101“).

Im TypoScript-Setup muss noch das gewünschte Verhalten festgelegt werden:

tt_content.stdWrap.innerWrap.cObject {
	101 =< tt_content.stdWrap.innerWrap.cObject.default
	101.20.10.value = csc-frame csc-frame-individual
 
	102 = TEXT
	102.value = <div class="another-individual-frame">|</div>
}

In diesem Beispiel erfolgt das Rendering des Rahmens „[101] Individueller Rahmen“ analog zu den vordefinierten Rahmen und es können sämtliche css_styled_content-Eigenschaften (z.B. „Oberer Abstand“ (engl. „Top Margin“)) verwendet werden. Für „[102] Weiterer individueller Rahmen“ ist dies nicht der Fall und es wird ausschließlich o.g. HTML-Tag als Rahmen verwendet.

Frontend Page Rendering Template anpassen

caticonslite_bm_alt

In TYPO3 lässt sich so gut wie alles konfigurieren, auch das Page Rendering Template lässt sich anpassen. Dieses Template legt die HTML-Struktur der Seite fest, d.h. an welche Position Titel, JavaScript, CSS, etc. eingefügt werden. Der Template-Pfad lässt sich im TypoScript-Setup mit der Anweisung „config.pageRendererTemplateFile“ setzen, das Standard-Template ist unter „typo3/sysext/cms/tslib/templates/tslib_page_frontend.html“ zu finden.

Möchte man beispielsweise nur Conditional Comments einfügen, um den Browser zu identifizieren und CSS-Hacks zu vermeiden  (siehe Blog-Eintrag von Paul Irish), so kann man entweder Hooks im PageRenderer (typo3/sysext/core/Classes/Page/PageRenderer.php) oder auf die TypoScript-Konfigurationsoptionen im PageGenerator (typo3/sysext/frontend/Classes/Page/PageGenerator.php) zurückgreifen. Um den HTML-Tag zu erweitern lässt sich beispielsweise „config.htmlTag_stdWrap“ verwenden.

Mehrsprachigkeit in TYPO3 konfigurieren

caticonslite_bm_alt

Um Mehrsprachigkeit in TYPO3 zu aktivieren sind mehrere Schritte erforderlich. Der hier dargestellte Weg zeigt eine mögliche Variante auf, besonders hinsichtlich RealURL sind viele unterschiedliche Konfigurationen möglich.

1. Sprache im Backend aktivieren:

Im Modul „Web > Liste“ (engl. „Web > List“) wählt man die Rootseite mit der ID „0“ (Seite mit vorangestelltem TYPO3-Symbol) aus. Nun fügt man einen neuen Datensatz vom Typ „Alternative Seitensprache“ (engl. „Website language“) ein und füllt die erforderlichen Felder aus. Die hier festgelegten Werte haben keinerlei Relevanz für die weitere Konfiguration, sondern dienen nur der Unterscheidung für Benutzer. Nach dem Speichern sucht man sich die Objekt-ID(s) im Modul „Web > Liste“ der angelegten Sprachen heraus, z.B. indem man mit der Maus auf die gewünschte Flagge zeigt. Die Standardsprache ist nicht anzulegen und hat implizit die ID 0 – in diesem Fall ist dies „Deutsch“. Als alternative Sprachen wurden „English“ mit der ID 1 und Italiano mit der ID 2 angelegt.

2. TypoScript-Setup:

config {
	linkVars = L(0-2)
	uniqueLinkVars = 1
	defaultGetVars.L = 0
	language = de
	locale_all = de_AT.UTF-8
	sys_language_uid = 0
	htmlTag_langKey = de
}
[globalVar = GP:L = 1]
	config {
		language = en
		locale_all = en_GB.UTF-8
		sys_language_uid = 1
		htmlTag_langKey = en
	}
[globalVar = GP:L = 2]
	config {
		language = it
		locale_all = it_IT.UTF-8
		sys_language_uid = 2
		htmlTag_langKey = it
	}
[global]

Die Einstellung „linkVars“ legt hier fest, dass der Parameter „L“ im Wertebereich 0-2 bei der Erzeugung von Links immer berücksichtigt wird. Hat man mehr oder weniger Sprachen, muss der Wertebereich entsprechend angepasst werden. Damit Parameter in der URL nur ein Mal vorkommen, wird „uniqueLinkVars“ aktiviert, andernfalls könnten URLs im Format „?L=0&L=2“ erzeugt werden.

Die Zahlen in den Bedingungen/Conditions (z.B.: „[globalVar = GP:L = 1]“) und für den Parameter „sys_language_uid“ (z.B.: „sys_language_uid = 1“) entsprechen den IDs der im ersten Schritt angelegten Sprachen.

Der Parameter „locale_all“ muss an die installierten Systemsprachen angepasst werden und ist erforderlich um beispielsweise das Datum in der korrekten Sprache auszugeben.

3. RealURL: (Die Konfiguration ist hier nur auszugsweise dargestellt):

// [...]
'preVars' => array(
	// [...]
	'GETvar' => 'L',
	'valueMap' => array(
		'de' => 0,
		'en' => 1,
		'it' => 2,
	),
	'noMatch' => 'bypass',
	// [...]
),
// [...]

Damit die 404-Fehlerbehandlung auch auf der ersten Ebene korrekt funktioniert, muss für alle „preVars“ die Option „’noMatch‘ => ‚bypass'“ aktiviert und es darf „postVarSet_failureMode“ nicht gesetzt sein.

4. Sprachkürzel in der URL:

Die gezeigte Konfiguration würde für die Default-Sprache Links im Format „domain.tld/seite/“ generieren, Links für zusätzliche Sprachen im Format „domain.tld/sprache/seite/“ (z.B.: „domain.tld/en/page/“). Möchte man auch bei der Standardsprache das Kürzel in der URL haben, muss man mit dem TypoScript-Setup „config.defaultGetVars.L = 0“ den Standardwert setzen. Würde man in der RealURL-Konfiguration anstelle für „’noMatch‘ => ‚bypass'“ die Option „‚valueDefault‘ => ‚de'“ setzen, würde man zwar das selbe URL-Format erreichen, allerdings würde die 404-Fehlerbehandlung auf der ersten Ebene nicht mehr funktionieren.

Eingebette Objekte (object, embed, iframe) im RTE von TYPO3

caticonslite_bm_alt

Standardmäßig ist es im Rich Text Editor (RTE) von TYPO3 nicht möglich eingebettete Objekte (z.B. Flickr-Stream, Vimeo– oder YouTube-Video) einzufügen. Abhängig von der Quelle erfolgt die Einbindung entweder mit den HTML-Tags object, param und embed, oder als iframe. Die folgende Konfiguration des RTE ist grundsätzlich über sämtliche Plug-ins hinweg gültig und funktioniert somit auch im RTE von tt_news, tx_news, usw.

Zuerst müssen die erforderlichen HTML-Tags zu den erlaubten Tags hinzugefügt werden – hierfür ergänzt man die RTE-Konfiguration im PageTS wie folgt:

RTE.default.proc {
	allowTags := addToList(object,param,embed,iframe)
	allowTagsOutside := addToList(object,embed,iframe)
	entryHTMLparser_db.allowTags < .allowTags
}

Tags die bei „allowTagsOutside“ angegeben werden, können auch außerhalb eines Block-Elements wie „p“ oder „div“ eingefügt werden.

Anschließend muss noch die Parser-Funktion des RTE im TypoScript-Setup angepasst werden:

lib.parseFunc_RTE.allowTags := addToList(object,param,embed,iframe)
1 2 3 4 5  nach oben