CSS und Javascript Dateien in einem Contao Modul einbinden

CSS und Javascript Dateien können sehr pragmatisch in einem Contao Modul eingebunden werden. Folgender Code demonstriert das:

// append custom js
$GLOBALS['TL_JAVASCRIPT'][] = '/system/modules/meinmodul/html/js/common.js';
 
// append custom css
$GLOBALS['TL_CSS'][] = '/system/modules/meinmodul/html/css/search.css';

Als einziges muß man beachten, dass man im eventuell überschriebene fe_page-Template die Variablen <?php echo $this->stylesheets; ?> und <?php echo $this->head; ?> nicht entfernt hat. Es gibt noch eine weitere Variable, die in diesem Zusammenhang ganz interessant ist:

$GLOBALS['TL_HEAD'][] = '<script type="text/javascript">// <![CDATA[
mce:0
// ]]></script>';

Wie wir hier sehen, kann man damit auch leicht eigene Javascript-Blöcke in den Head-Bereich der Seite bekommen.

Falls man jedoch Javascript am Ende der Seite benötigt, kann dies über

$GLOBALS['TL_MOOTOOLS'][]='<script ... />

in die Seite einbinden. Wer sich etwas tiefer damit befassen will, kann ja einen Blick in die Datei \system\modules\frontend\PageRegular.php wagen. Dort werden diese Variablen ausgewertet und dem Template hinzugefügt.

Update

Weil ich immer wieder mal gefragt werde, hier auch der Weg, wie man eigenes CSS und Javascript über Contao einbinden kann, ohne ein Modul zu programmieren:

In der Theme einfach unter den Experten-Einstellungen in den zusätzliche <head>-Tags beliebige CSS und Javascript-Dateien einbinden:

Contao: CSS und Javascript im Backend einbinden

 

4 Gedanken zu “CSS und Javascript Dateien in einem Contao Modul einbinden

  1. Hallo Tobias, ich würde dich gerne was fragen.
    Ich möchte für eine Startseite folgendes: leere Seite auf der verstreut, verschiedene Worte auftauchen und wieder verschwinden. Habe dazu ein Javaskript gefunden. Das funktioniert auch – leider nur oben links in der Bildschirmecke. Wie kann ich diesen Javaskript-Effekt vervielfachen und Positionen zuweisen?

Kommentar verfassen