TYPO3 Frontend-Rendering (im HEAD) verändern

Um CSS, JavaScript oder auch META-Tags einzubauen,  bietet TYPO3 standardmäßig per TypoScript mehrere Möglichkeiten.

Für CSS beispielsweise:

page.includeCSS
page.includeCSSLibs

oder auch JavaScript:

page.includeJS
page.includeJSLibs

Und einige weitere für META-Tags oder headerData (siehe TypoScript Reference).

Was sich allerdings nicht im TypoScript angeben lässt, ist die Reihenfolge der Ausgabe im Front-End. Dort wird grundsätzlich ein „page.includeJSLibs“ vor einem „page.includeJS“ gerendert (was in aller Regel auch Sinn macht 😉 ). Möchte man dennoch diese Reihenfolge ändern, dann ist nicht viel nötig. Es genügt eine Zeile TypoScript und eine HTML-Template Datei.

Template

Dafür muss man aber zunächst wissen, dass TYPO3 das grobe Rendering über eine Template-Datei steuert. Diese Template-Datei findet sich in den Systemextensions:

typo3/sysext/core/Resources/Private/Templates/PageRenderer.html (TYPO3 6.2)

(früher: typo3/sysext/cms/tslib/templates/tslib_page_frontend.html )

Diese Datei sieht folgendermaßen aus:

###XMLPROLOG_DOCTYPE###
###HTMLTAG###
###HEADTAG###

###METACHARSET###
###INLINECOMMENT###

###BASEURL###
###SHORTCUT###
###TITLE###
###META###

###CSS_LIBS###
###CSS_INCLUDE###
###CSS_INLINE###

###JS_LIBS###
###JS_INCLUDE###
###JS_INLINE###

###HEADERDATA###
</head>
###BODY###
###JS_LIBS_FOOTER###
###JS_INCLUDE_FOOTER###
###JS_INLINE_FOOTER###
###FOOTERDATA###
</body>
</html>

Wie diese Datei vermuten lässt, werden die einzelnen Marker beim Rendering der Seite ersetzt. Und wer sich ein bisschen mit dem TYPO3-Page-Object befasst hat stellt sehr schnell Parallelen zu den Eigenschaften des Page-Objects fest.

So entspricht zum Beispiel der Block

###JS_LIBS###
###JS_INCLUDE###
###JS_INLINE###

den TypoScript-Pfaden:

page.includeJSlibs
page.includeJS
page.jsInline

Die weiteren Marker erklären sich dann von selbst bzw können auch durch etwas probieren herausgefunden werden.

Um also jetzt das Rendering verändern zu können, kopiert man sich diese Datei in seinen eigenen Source-Code-Bereich (niemals Änderungen im Core -> TYPO3 ist dann nicht mehr updatefähig!!!) und verändert sie nach seinen Wünschen. Die ersten drei Zeilen (Doctype und öffneneder HTML- und HEAD-Tag und den Body-Marker) sollte man allerdings an Ort und Stelle lassen.

TypoScript

Damit jetzt auch die neue Template-Datei verwendet wird, fehlt noch eine Zeile TypoScript:

config {
    pageRendererTemplateFile = /path/to/my/templateFile.html
}

Das ist schon alles :-).

Auf diese Weise kann man also zum Beispiel ganz leicht die Reihenfolge der einzelnen TypoScript-Blöcke des Page-Objects verändern.