menu
Logo zum aktuellen Thema
Informatik > typo3 > Head mittels TypoScript anpassen

Head mittels TypoScript anpassen

Web Storage

Voraussetzung in meinem Tutorial ist die Variable page, sie ist vom Typ PAGE. Es handelt sich dabei, wie bei TypoScript üblich, um ein assoziatives Array, dass alle Einträge, im folgenden als Wert bezeichnet, beinhaltet. Eine Variable, die vom Typ PAGE ist, beinhaltet auch eine Variable config. Über sie sind ebenfalls Einstellungen für den Head möglich.

page = PAGE
page.typeNum = 0

Doytype

In aktuellen TYPO3-Versionen wird standardmäßig html5 verwendet. Wenn es jedoch etwas anderes sein soll, so geht es hier. Hier ist eine Liste mit den möglichen Zuweisungen und ihrer Entsprechung.

xhtml_trans
XHTML 1.0 Transitional
xhtml_frames
XHTML 1.0 Frameset
xhtml_strict
XHTML 1.0 Strict
xhtml_basic
XHTML basic
xhtml_11
XHTML 1.1
xhtml+rdfa_10
XHTML+RDFa 1.0
html5
HTML5
none
kein Doctype
page.config.doctype = xhtml_strict

Head-Tag anpassen

Man kann mit dem Wert headTag den Head-Tag neu definieren. Standard ist: <head>. Man kann auch über das Tag hinaus Inhalte festlegen. Hier kann man zum Beispiel die Metaangabe für den Kompatibilitaetsmodus des InternetExplorers festlegen.

page.headTag = <head><meta http-equiv="X-UA-Compatible" content="IE=8" />

CSS einbinden

Um CSS einzubinden muss der Wert includeCSS verwendet werden. Er beinhaltet die Werte mit den CSS-Zuweisungen. Es wird zunächst ein Pfad festgelegt und mittels media der Geltungsbreich des CSS. Es gilt folgendes Schema.

page.includeCSS {
irgendeinEindeutigerName = Pfad irgendeinEindeutigerName.Variable = Wert }

Bei Verwendung von CSS-Frameworks bzw. Bibliotheken ist folgender Wert zu empfehlen: .includeCSSLibs. Für Beide gibt es folgende Optionen

.allWrap
Umschließt Wert, der als | gekennzeichnet ist, mit den angegebenen Zeichen.
.disableCompression
Das ist ein Boolean. Wenn gesetzt, wird die Datei nicht komprimiert.
.external
Ebenfalls ein Boolean. Wenn gesetzt, heißt es, dass die Dateien außerhalb der erlaubten Pfade liegen und die Existenz der Datei nicht geprüft wird.
.forceOnTop
Die CSS-Datei wird als erste von allen eingebunden.
.import
Ist ein Boolean. Wenn gesetzt, wird kein link-Tag sondern ein import verwendet.
page.includeCSS {
file1 = fileadmin/templates/css/common.css file1.media = screen, print file1.title = allgemein gültig
file2 = fileadmin/templates/css/other.css file1.media = screen, print
ie6 = fileadmin/css/ie6.css ie6.allWrap = }

includeCSSLibs.eineCSSBibliothek = http://somegoodcsslibrary.com/styles/blogger.css
includeCSSLibs.eineCSSBibliothek.external = 1

Um CSS für druckoptimierte Darstellungen zu verwenden, empfiehlt es sich abhängig eines GET-Parameters eine entsprechende CSS-Datei zu laden.

[globalVar = GP:print=1]
# Wenn &print=1 an die URL angehaengt wird, lädt das print.css
page.includeCSS { file1 = fileadmin/templates/css/print.css file1.media = screen, print } [global]

Browserweiche

[browser = msie] AND [version = 7] page.includeCSS.ie7 = fileadmin/templates/css/browser/ie7.css [global]

[useragent = *Opera*] page.includeCSS.opera = fileadmin/templates/css/browser/opera.css [global]

Mehr zu Browserweichen mit TypoScript findet ihr auf http://www.wissen4free.org/informatik/typo3.

JavaScript einbinden

Für JavaScript wird der Wert includeJS verwendet. Für die Zuweisungen der Werte gilt das gleiche Schema wie bei CSS. Nachfolgend sind die gültigen Werte für includeJS aufgelistet. Für JavaScript-Bibliotheken bzw. Frameworks wird folgender Wert empfohlen: includeJSLibs. Der Vollständigkeit halber erwähne ich, dass mittels includeJSFooter und includeJSFooterlibs JavaScript und entsprechende Bibliotheken im Footer eingebunden werden können. Dies geschieht direkt vor dem schließendem body-Tag. Folgende Werte stehen zu Verfügung.

.allWrap
Umschließt Wert, der als | gekennzeichnet ist, mit den angegebenen Zeichen.
.async
Ermöglich asynchrones Laden.
.disableCompression
Das ist ein Boolean. Wenn gesetzt, wird die Datei nicht komprimiert.
.external
Ebenfalls ein Boolean. Wenn gesetzt, heißt es, dass die Dateien außerhalb der erlaubten Pfade liegen und die Existenz der Datei nicht geprüft wird.
.forceOnTop
Die CSS-Datei wird als erste von allen eingebunden.
.import
Ist ein Boolean. Wenn gesetzt, wird kein link-Tag sondern ein import verwendet.
.integrity
Hier kann entsprechend der Subresource Integrity ein Hashwert hinterlegt werden um sicherzustellen, dass keine fremden Inhalte geladen werden.
page.includeJS { file1 = fileadmin/templates/js/jquery.min.js file2 = fileadmin/templates/js/global.js
file3 = https://getfirebug.com/firebug-lite.js file3.external = 1 file3.integrity = sha256-C6CB9UYIS9UJeqinPHWTHVqh/E1uhG5Twh+Y5qFQmYg= }

favicon

Um ein Favicon einzubinden, wird shortcutIcon verwendet. Es gibt keine weiteren Werte dafür als die Pfadangabe.

page.shortcutIcon = fileadmin/templates/favicon.ico

Metadaten

Zur Festlegung der Meta-Tags wird meta verwendet. Die mit Punkt getrennte Zeichenkette legt den Wert für name im entsprechenden Metag-Tag fest und bekommt als Wert die entsprechende Zuweisung.

page.meta.robots = INDEX,FOLLOW
page.meta.author = Firma XY
page.meta.publisher = Firma XY
page.meta.copyright = Firma XY
page.meta.language = DE
page.meta.E-Mail = kontakt@firma-xy.de
page.meta.description = Hier steht eine kurze aber aussagekräftige Beschreibung

Da der Redakteur in TYPO3 für jede Seite manuell Metadaten vergeben kann, kann es auch vorkommen, dass welche nicht angegeben wurden. Damit das nicht passiert, hilft folgendes Snippet.

page.meta{ keywords.field = keywords keywords.ifEmpty ( Universell gültige Schlagworte ) description.field = description description.ifEmpty ( Eien universell gültige Beschreibung ) robots = INDEX,FOLLOW }

Für eine bestimmte Seite andere Konfiguration

Ich habe hier ein Snippet, das zeigt wie man den Head seitenabhängig konfigurieren kann. Im Beispiel bekommt die Seite mit der UID 100 ein CSS, das in der Variable file3 gespeichert ist. Sollte die Seite so eine Variable schon geerbt haben, so wird sie hier überschrieben, wenn nicht kommt sie hinzu.

[globalVar = TSFE:id = 100] page.includeCSS { file3 = fileadmin/templates/css/someother.css file3.media = screen } [global]

Base-URL

Die Base-URL wird mit .config.baseURL angegeben. Ich zeige auch gleichzeitig, wie man sie für HTTP und HTTPS-Verbindungen angibt.

page.config.baseURL = http://www.mydomain.de/

[globalString = _SERVER|HTTPS=on]
page.config.baseURL = https://www.mydomain.de/ [global]

Alles in einem

Es gibt mit headerData die Möglichkeit den kompletten Head komplett unterzubringen. Hier werden jedoch alle eingebundenen Dateien nicht auf ihre Existenz geprüft, komprimiert oder sonstiges. Den Werten innerhalb von headerData müssen jedoch noch Inhaltstypen festgelegt. Es ist insgesamt etwas komplizierter.

page.headerData.10 = TEXT
page.headerData.10.field = subtitle // title
page.headerData.10.wrap = <title>Some good Content :  |</title>
page.headerData.20 = HTML
page.headerData.20.value = <script type="text/javascript" language="javascript" src="fileadmin/templates/js/script.js"></script>

Quellen

  • letzte Änderung: 2016-01-16 17:06:05
  • Autor: Torsten Witt
Facebook