Warum Ihr Unternehmen SLAs benötigt: Vorteile und Vorteile erklärt
Maintenance
11 Möglichkeiten, CSS/JS-Assets in TYPO3 einzufügen
Suchen Sie nach Möglichkeiten, Ihre Frontend-Assets CSS/JS in TYPO3 einzubinden? Als TYPO3-Integrator, -Entwickler oder -Administrator kann es vorkommen, dass Sie eigene oder fremde CSS oder JavaScripts in die TYPO3-Instanz einfügen müssen. In diesem Blog lernen Sie alle 11 Möglichkeiten kennen, wie Sie interne oder externe Assets in TYPO3 einbinden können.
FYI. This blog is translated by machine. Please ignore any spelling and grammar errors; sorry for such inconvenience. We appreciate your understanding and support.
Suchen Sie nach Möglichkeiten, Ihre Frontend-Assets CSS/JS in TYPO3 einzubinden? Als TYPO3-Integrator, -Entwickler oder -Administrator kann es vorkommen, dass Sie eigene oder fremde CSS oder JavaScripts in die TYPO3-Instanz einfügen müssen. In diesem Blog lernen Sie alle 11 Möglichkeiten kennen, wie Sie interne oder externe Assets in TYPO3 einbinden können.
TYPO3 ist eines der flexibelsten und erweiterbarsten Opensource CMS der Welt. Wenn Sie CSS/JS-Dateien oder Code einfügen möchten, haben Sie 11 Möglichkeiten, solche Frontend-Assets in TYPO3 zu integrieren. Der TYPO3-Kern ist robust und bietet viele Möglichkeiten, solche Aufgaben nach Ihren Bedürfnissen zu erledigen. Denn als TYPO3-Integrator oder -Entwickler werden Sie vielleicht mit einer anderen Situation konfrontiert, in der Sie Frontend-Assets einfügen müssen - TYPO3 ist erweiterbar genug! Schauen wir uns an, wie.
TYPO3 Fluid ViewHelper (>= v10.3)
Ab TYPO3 v10 können Sie mit den TYPO3 Viewhelper <f:asset.css /> und <f:asset.js /> ganz einfach Ihr CSS und JS einbinden.
<f:asset.css identifier="yourIdentifier" href="EXT:yourext/Resources/Public/Css/myCustom.css" />
<f:asset.css identifier="yourIdentifier">
.myBlock { display: block }
</f:asset.css>
<f:asset.script identifier="yourIdentifier" src="EXT:yourext/Resources/Public/Css/myCustom.js" />
<f:asset.script identifier="yourIdentifier">
alert('hello world');
</f:asset.script>
Referenz: View Document
TYPO3 Fluid Assets (>= v8.6)
Seit TYPO3 v8 haben wir mit HeaderAssets/FooterAssets Möglichkeiten, Ihre Frontend-Assets in Ihre TYPO3-Instanz einzubinden.
<f:section name="HeaderAssets"> for assets intended for the <head> tag
<f:section name="FooterAssets"> for assets intended for the end of the <body> tag
<f:section name="HeaderAssets">
<!-- Schreiben Sie alles, was Sie in den <head>-Tag einfügen möchten -->
</f:section>
<f:section name="FooterAssets">
<!-- Schreiben Sie alles, was Sie in den </body>-Tag einfügen möchten -->
<script async src="//yourdomain.com/your.js"></script>
</f:section>
Referenz: View Document
HeaderData TypoScript (>= v4)
Eine der sichersten und einfachsten Möglichkeiten, Ihren eigenen CSS- oder Javascript-Code im </head>-Tag mit TypoScript einzufügen, ist die folgende.
page = PAGE
page { … }
// Fügen Sie Ihre CSS/JS-Assets global hinzu
page.HeaderData.99 = TEXT
page.HeaderData.99.value = <script async src="//yourdomain.com/your.js"></script>
// Hinzufügen Ihrer CSS/JS-Assets zu bestimmten Seiten
[getTSFE().id in [1,4]]
page.HeaderData.99 = TEXT
page.HeaderData.99.value = <script async src="//yourdomain.com/your.js"></script>
[end]
FooterData TypoScript (>= v4)
Möchten Sie Ihren CSS- oder Javascript-Code in </body> einfügen und dann FooterData TypoScript verwenden?
page = PAGE
page { … }
// Fügen Sie Ihre CSS/JS-Assets global hinzu
page.FooterData.99 = TEXT
page.FooterData.99.value = <script async src="//yourdomain.com/your.js"></script>
// Hinzufügen Ihrer CSS/JS-Assets zu bestimmten Seiten
[getTSFE().id in [1,4]]
page.FooterData.99 = TEXT
page.FooterData.99.value = <script async src="//yourdomain.com/your.js"></script>
[end]
includeJS TypoScript (>= v4)
page.includeJS wird seit Jahren verwendet, um CSS/JS in Ihr TYPO3 Template zu integrieren.
page = PAGE
page { … }
page.includeJS {
// bei </head> Binden Sie Ihr gesamtes JavaScript in TYPO3 ein
yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}
page.includeJSFooter {
// bei </body> Binden Sie Ihr gesamtes JavaScript in TYPO3 ein
yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}
page.includeJSFooterlibs {
// bei </head> Binden Sie Ihr gesamtes JavaScript in TYPO3 ein
yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}
page.includeJSLibs {
// bei </head> Binden Sie Ihr gesamtes JavaScript in TYPO3 ein
yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}
Tipps:
Sie können entweder config.moveJsFromHeaderToFooter oder config.moveJsFromHeaderToFooter konfigurieren, um Ihr gesamtes JS entweder in den </head> oder </body> Tag zu verschieben, um eine bessere Leistung zu erzielen.
jsInline TypoScript (>= v4)
Möchten Sie Inline-Javascript-Code schreiben? Das bedeutet, dass Sie nicht den gesamten Javascript-Dateipfad angeben müssen, sondern nur Ihren Javascript-Code schreiben müssen; betrachten Sie jsInline Typoscript.
page = PAGE
page { … }
page.jsInline {
// Ihr JavaScript-Code
}
page.jsFooterInline {
// Ihr JavaScript-Code
}
includeCSS TypoScript (>= v4)
Auf die gleiche Weise können Sie includeCSS typoscript verwenden, um CSS-Assets hinzuzufügen.
page = PAGE
page { … }
page.includeCSS {
// bei </head> Binden Sie Ihr gesamtes JavaScript in TYPO3 ein
yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.css
}
includeCSSLibs {
// bei </head> Binden Sie Ihr gesamtes JavaScript in TYPO3 ein
yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.css
}
cssInline TypoScript (>= v4)
Verwenden Sie außerdem das cssInline TypoScript, um direkt ein Stylesheet hinzuzufügen, anstatt eine CSS-Datei aufzurufen.
page = PAGE
page { … }
page.CSS_inlineStyle {
/* Writ down other CSS stuff */
}
page.cssInline {
10 = TEXT
10.value = h1 {margin:15px;}
}
Extbase additionalFooterData (>= v6)
Hier ist nun etwas Interessantes für den TYPO3-Extension-Backend-Entwickler. Sie müssen oft Ihre CSS- oder JS-Assets dynamisch hinzufügen, während Sie Ihren Extbase PHP-Controller entwickeln. Sie können einfach Global TSFE additionalFooterData verwenden.
// Fügen Sie Ihr JS zu Ihrem Extbase-Controller hinzu
$GLOBALS['TSFE']->additionalFooterData['yourIdentifier'] = '<script async src="//yourdomain.com/your.js"></script>';
Extbase additionalHeaderData (>= v6)
Wenn Sie Ihr CSS/JS in </head> einfügen möchten, verwenden Sie additionalHeaderData.
// Fügen Sie Ihr JS zu Ihrem Extbase-Controller hinzu
$GLOBALS['TSFE']->additionalHeaderData['yourIdentifier'] = '<script async src="//yourdomain.com/your.js"></script>';
Extbase AssetCollector (>= v10.3)
Warten Sie, ab TYPO3 v10 - Sie sollten AssetCollector verwenden, um CSS oder JavaScript für Ihre Extbase TYPO3 Extension hinzuzufügen.
use TYPO3\CMS\Core\Page\AssetCollector;
use TYPO3\CMS\Core\Utility\GeneralUtility;
GeneralUtility::makeInstance(AssetCollector::class)
->addJavaScript('yourIdentifier', 'EXT:yourext/Resources/Public/Css/myCustom.js', ['data-foo' => 'bar']);
AssetCollector bietet alle ausgezeichneten Funktionen, um Ihr CSS/JS hinzuzufügen oder zu entfernen; sehen Sie sich diese Funktionen an.
AssetCollector::addInlineJavaScript()
AssetCollector::addStyleSheet()
AssetCollector::addInlineStyleSheet()
AssetCollector::addMedia()
AssetCollector::removeJavaScript()
AssetCollector::removeInlineJavaScript()
AssetCollector::removeStyleSheet()
AssetCollector::removeInlineStyleSheet()
AssetCollector::removeMedia()
AssetCollector::getJavaScripts()
AssetCollector::getInlineJavaScripts()
AssetCollector::getStyleSheets()
AssetCollector::getInlineStyleSheetsAssetCollector::getMedia()
Rendering-Reihenfolge von Assets in TYPO3
Zu guter Letzt, mit den oben genannten vielen Möglichkeiten - Sie haben vielleicht Fragen über die genaue Render-Reihenfolge oder Priorität von Assets in TYPO3.
Ab v10.3 werden CSS und JavaScript, die im AssetCollector registriert sind, nach ihren PageRenderer-Pendants gerendert. Die Reihenfolge ist
- <head>
- page.includeJSLibs.forceOnTop
- page.includeJSLibs
- page.includeJS.forceOnTop
- page.includeJS
- AssetCollector::addJavaScript() with ‘priority’
- page.jsInline
- AssetCollector::addInlineJavaScript() with ‘priority’
- </head>
- page.includeJSFooterlibs.forceOnTop
- page.includeJSFooterlibs
- page.includeJSFooter.forceOnTop
- page.includeJSFooter
- AssetCollector::addJavaScript()
- page.jsFooterInline
- AssetCollector::addInlineJavaScript()
Einpacken!
Vielen Dank für die Lektüre meines TYPO3-Blogs. Ich hoffe, Sie haben etwas gelernt und fanden es hilfreich für Ihre aktuellen oder zukünftigen TYPO3-Projekte.
Aus der obigen Liste mit den 11 Möglichkeiten, Frontend-Assets in TYPO3 zu integrieren - welche ist Ihr Favorit? Ich würde es gerne in der Kommentarbox unten erfahren.
Ich wünsche Ihnen viel Spaß beim Einbinden von Assets in TYPO3!
Post a Comment
-
Great article! These article incredibly helpful and have made my web development tasks much more efficient. Thank you!
![[Translate to German:] Your Monthly TYPO3 Maintenance Checklist](/blog/fileadmin/_processed_/3/7/csm_Your-Monthly-TYPO3-Maintenance-Checklist_1d668b2f50.jpg "[Translate to German:]")
Join over 4300+ TYPO3 Subscribers
Dhyana Chauhan
Tech Expert & Customer ManagerDhyana Chauhan is the customer support manager at T3Planet, having vast experience as an technology lead who loves exploring everything that’s in trend, especially TYPO3. Being a TYPO3 fanatic, in her free time, she loves…
More From Author