CSS und Javascript Dateien einbinden
Dafür gibt es im Page Object folgende Bereiche:
page.includeCSSLibs { mycss = EXT: my_template/Resources/Public/Css/globallib.css } page.includeCSS { mycss = EXT: my_template/Resources/Public/Css/mycss.css } page.includeJSlibs { // Diese Javascriptdateien werden in den Seitenheader geschrieben } page.includeJS { // Diese Javascriptdateien werden in den Seitenheader geschrieben } page.includeJSFooterlibs { // Diese werden als erstes im Footer eingebunden } page.includeJSFooter { // Diese Dateien kommen im Footer nach den JSFooterlibs }
Externe Dateien einbinden
page.includeJSFooterlibs {Subresource Integrity (SRI)
jquery = https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
jquery.external = 1
}
Mit SRI werden die Resourcen mit einem Hash versehen und nur dann ausgeführt, wenn der Hash
aus dem Dateilink mit dem Hash der tatsächlichen Datei übereinstimmt.
page.includeJSFooterlibs {Asynchrones Laden (nur für js includes)
jquery = https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
jquery.external = 1
jquery.integrity =57132f35dcfe677cbd90014e3f0862278bc...
}
page.includeJSlibs {
myscript = EXT: my_template/Resources/Public/JavaScript/myscript.js
myscript.async = true}
CSS und Javascript Dateien mit Conditions wrappen
page.includeJSlibs {
respond = EXT:my_template/Resources/Public/JavaScript/Libs/respond.min.js
respond.allWrap = <!--[if IE 8 ]>|<![endif]-->
respond.excludeFromConcatenation = 1
respond.disableCompression = 1
}
Komprimierung und Zusammenfassung von CSS und Javascriptdateien
config {
compressJs = 1
compressCss = 1
concatenateJs = 1
concatenateCss = 1
}
page.includeJSlibs {
respond = EXT:my_template/Resources/Public/JavaScript/Libs/respond.min.js
respond.excludeFromConcatenation = 1
respond.disableCompression = 1
}
Praxisbeispiel: CSS und JavaScript in ein TYPO3 Template einbinden
page { includeCSSLibs { bootstrap = EXT:my_extension/Resources/Public/Css/bootstrap.min.css } includeCSS { theme = EXT:my_extension/Resources/Public/Css/bootstrap-theme.min.css layout = EXT:my_extension/Resources/Public/Css/layout.css print = EXT:my_extension/Resources/Public/Css/print.css print.media = print } page.includeJSlibs { respond = EXT:my_template/Resources/Public/JavaScript/Libs/respond.min.js respond.allWrap = <!--[if IE 8 ]>|<![endif]--> respond.excludeFromConcatenation = 1 respond.disableCompression = 1 } includeJSFooterlibs { jquery = https://code.jquery.com/jquery-1.12.4.min.js jquery.external = 1 jquery.integrity = sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ= jquery.forceOnTop = 1 jquery.disableCompression = 1 jquery.excludeFromConcatenation = 1 bootstrap = EXT:my_Extension/Resources/Public/JavaScript/bootstrap.js } includeJSFooter { myscript = EXT:my_Extension/Resources/Public/JavaScript/meintollesscrip.js } } config { compressJs = 1 compressCss = 1 concatenateJs = 1 concatenateCss = 1 }