Feature: #91499 - Additional attributes for includeJS, includeCSS and all other page.include**¶
See forge#91499
Description¶
The PageRenderer
supports additional tag attributes for CSS and JavaScript files.
These data attributes can be configured using a key/value list via TypoScript.
page.includeCSS
page.includeCSSLibs
page.includeJS
page.includeJSFooter
page.includeJSLibs
page.includeJSFooterlibs
Impact¶
It is now possible to extend <script>
and <link>
tags with any
kind of HTML tag attributes, which is very useful for integration with
external scripts such as a consent manager.
Example¶
Configuration:
page = PAGE
page {
includeCSSLibs {
someIncludeFile = fileadmin/someIncludeFile1
someIncludeFile.data-foo = includeCSSLibs
}
includeCSS {
someIncludeFile = fileadmin/someIncludeFile2
someIncludeFile.data-foo = includeCSS
}
includeJSLibs {
someIncludeFile = fileadmin/someIncludeFile3
someIncludeFile.data-consent-type = marketing
}
includeJS {
someIncludeFile = fileadmin/someIncludeFile4
someIncludeFile.data-consent-type = essential
}
includeJSFooterlibs {
someIncludeFile = fileadmin/someIncludeFile5
someIncludeFile.data-my-attribute = foo
}
includeJSFooter {
someIncludeFile = fileadmin/someIncludeFile6
someIncludeFile.data-foo = includeJSFooter
}
}
Reserved keywords which will not be mapped to attributes are:
compress
forceOnTop
allWrap
type
(set automatically, depending onconfig.doctype
)disableCompression
excludeFromConcatenation
external
inline
Resulting HTML of the above example:
<head>
<link rel="stylesheet" type="text/css" href="/typo3conf/ext/myext/Resources/Public/someIncludeFile1" media="all" data-foo="includeCSS">
<link rel="stylesheet" type="text/css" href="/typo3conf/ext/myext/Resources/Public/someIncludeFile2" media="all" data-foo="includeCSSLibs">
<script src="/typo3conf/ext/myext/Resources/Public/someIncludeFile3" data-consent-type="marketing"></script>
<script src="/typo3conf/ext/myext/Resources/Public/someIncludeFile4" data-consent-type="essential"></script>
</head>
<body>
<script src="/typo3conf/ext/myext/Resources/Public/someIncludeFile5" data-my-attribute="foo"></script>
<script src="/typo3conf/ext/myext/Resources/Public/someIncludeFile6" data-foo="includeJSFooteribs"></script>
</body>