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.

11 Möglichkeiten, CSS/JS-Assets in TYPO3 einzufügen

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()

 

Referenz: https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/10.3/Feature-90522-IntroduceAssetCollector.html 

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

  1. <head>
  2. page.includeJSLibs.forceOnTop
  3. page.includeJSLibs
  4. page.includeJS.forceOnTop
  5. page.includeJS
  6. AssetCollector::addJavaScript() with ‘priority’
  7. page.jsInline
  8. AssetCollector::addInlineJavaScript() with ‘priority’
  9. </head>
  10. page.includeJSFooterlibs.forceOnTop
  11. page.includeJSFooterlibs
  12. page.includeJSFooter.forceOnTop
  13. page.includeJSFooter
  14. AssetCollector::addJavaScript()
  15. page.jsFooterInline
  16. 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!

Do you need help maintaining and supporting (SLA) your TYPO3 website?

  • 2 Days of quick support (reaction and resolution time)
  • 3 Packages plans available for TYPO3 SLA (service level agreement)
  • 3 Timezone support available (CET, CEST, IST)
  • 2 Languages support available (English, German)
  • 1 Monthly updates & report (TYPO3 security & maintenance)
TYPO3 SLA Gig
maintenance

Post a Comment

×
Captcha Code Kann das Bild nicht gelesen werden? Klicken Sie hier, um zu aktualisieren
  • user
    Nichol Southwell 2023-07-25 um 1:23 pm
    Hi t3planet.com webmaster, You always provide great resources and references.
  • user
    David Adler 2023-07-14 um 12:35 pm
    I never knew there were so many ways to add CSS/JS assets in TYPO3! This article provided a comprehensive guide, and I can't wait to implement these techniques in my projects. Thanks for sharing!
  • user
    Lucas Holzman 2023-07-14 um 12:33 pm
    Great article! These article incredibly helpful and have made my web development tasks much more efficient. Thank you!
  • user
    Lucas Holzman 2023-07-14 um 12:32 pm
    Great article! These article incredibly helpful and have made my web development tasks much more efficient. Thank you!