CSS und JS Dateien in Contao Seiten einbinden

von Markus Schindler

Ladezeiten und Code Optimierung in Contao

Oft kommt es vor, das man für eine bestimmte Übersichtsseite oder Unterseite ein JS oder CSS einbinden möchte, aber sich nicht global die Ladezeit mit JS / CSS Code überladen möchte. Dafür gibt es mit folgender Einbindung die Möglichkeit anhand der Seiten ID sich per Include die Dateien in den HEAD zu laden.

Dazu legt ihr eine HTML5 Datei in das Templateverzeichnis für die jeweilige Installation.

Z.B. in /templates/DEINPROJEKT/ j_KUNDE-XYZ-css-js.html5

In die fügt ihr folgenden CodeSnippet ein. Unter Layout > Themes > KundenLayout > jQuery-Templates findet Ihr jetzt die einzubindende j_KUNDE-XYZ-css-js die euch die JS / CSS in den HEAD includiert. Wenn nichts erscheint vielleicht mal die Systemwartung mit dem Punkt Skriptcache leeren und Internen Cache leeren / ausführen.

Um die JS / CSS mit den anderen zusammen zu fassen, kann das über den Parameter deine-datei.js|static oder deine-datei.css|static erfolgen.

 

Snippet für die Einbindung von CSS und JS Dateien

<?php

if ($GLOBALS['objPage']->id == 5 OR $GLOBALS['objPage']->id == 93) {
$GLOBALS['TL_CSS'][] = 'files/design/css/bxslider.css|static';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/design/js/jquery.bxslider.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/design/js/jquery.bxslider.config.js';
}
?>

Zurück