betawax
Follow me on Twitter
 
13
Jul

TYPO3: CSS & JavaScript einbinden

Um CSS & JavaScript im Headerbereich einer Seite einzubinden stehen in TypoScript die Eigenschaften includeCSS und includeJS bereit. Damit liesen sich bisher allerdings nur lokale Dateien, z.B. im fileadmin, einbinden. Seit TYPO3 4.3 existiert nun auch jeweils eine Untereigenschaft external die optional erlaubt eben auch externe Dateien einzubinden. Hier zwei Beispiele:

page.includeCSS {
   file1 = fileadmin/css/page.css
   file1.media = screen
   file2 = http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
   file2.media = screen
   file2.external = 1
}
page.includeJS {
   file1 = http://www.google.com/jsapi
   file1.external = 1
   file2 = fileadmin/js/main.js
}

Die Ausgabe sieht dann entsprechend so aus:

<link rel="stylesheet" type="text/css" href="fileadmin/css/page.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" media="screen" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="fileadmin/js/main.js" type="text/javascript"></script>

Die Eigenschaften werden in der TSref näher beschrieben und erlauben zusätzlich z.B. auch einen Wrap für Conditional Comments etc.

Seit TYPO3 4.4 erhalten zusätzlich alle lokal eingebundenen Dateien auch automatisch den Timestamp ihrer letzten Änderung, dieser wird als GET-Parameter an die URI angehängt um Probleme mit dem Cache der Browser zu umgehen. Die finale Ausgabe sieht damit dann so aus:

<link rel="stylesheet" type="text/css" href="fileadmin/css/page.css?1278407468" media="screen" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" media="screen" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="fileadmin/js/main.js?1278923017" type="text/javascript"></script>

Mit dieser Methode erübrigt sich das Einbinden und manuelle setzen eines Timestamps via headerData.

Am 13.07.10 um 11:46 Uhr in Kategorie: Webentwicklung

Kommentare

Zu diesem Beitrag wurden noch keine Kommentare verfasst.

Kommentar verfassen









be·ta·wax We·blog

Ein Weblog von Holger Weis in dem er, hin und wieder, zu interessanten Themen aus der Web- und Softwareentwicklung berichtet.

Holger ist 26, lebt in Bamberg und arbeitet als Entwickler für eine Münchener Agentur.


Add to Google

Kategorien
Archiv