Aktuelle Version vom 11. April 2013, 12:45 Uhr

Theme+ verbessert und optimiert den Umgang mit Stylesheets und JavaScript Dateien. Unter anderem wird die Unterstützung für eine Vielzahl Compiler (LESS, SASS, Compass, ...) und Minifier (GoogleClosure, YUI, ...) und mehr.

Theme+

Features

• Einfügen beliebiger CSS und JS Dateien aus der Dateiverwaltung.
• Bedingtes einfügen von CSS und JS Dateien auf Basis von Filtern.
• Compilieren von LESS, SCSS, CoffeeScript und weiteren Precompiler Sprachen. (Abhängig von der verwendeten Assetic Version)
• Minimieren mittels GoogleClosure, YUI und weiteren Komprimierern. (Abhängig von der verwendeten Assetic Version)
• Einfacher Entwicklermodus (Einfach im Backend anmelden und los gehts)

Version 4

Theme+ V4 ist ein nahezu vollständiger Rewrite. Im Gegensatz zur V2 und V3 die auf die compression-api aufsetzen, verwendet die V4 die Assetic Library. Damit ist die V4 viel flexibler als seine Vorgänger.

PHP API Support

Die Assetic API kann in Templates verwendet werden, um direkt Code einzubetten oder aber Assets zur globalen Liste hinzuzufügen.

$asset = new \Assetic\Asset\StringAsset('alert("Hello World!");');
$GLOBALS['TL_JAVASCRIPT'][] = $asset;

$asset = new \Assetic\Asset\StringAsset('body:before { content: "Hello World"; font-size: 30px; font-color: red; }');
$GLOBALS['TL_CSS'][] = $asset;

Twig Support

Für die Twig Erweiterung gibt es einen zusätzlichen Support.

Mit den Filtern compileJs($filter = null, $debug = null) und compileCss($filter = null, $debug = null) lässt sich JavaScript und CSS Code kompilieren. $filter ist eine Assetic Filter/Chain Referenz nach dem Schema filter:<ID> oder chain:<ID>. Bei null werden die im Layout hinterlegten Filter verwendet. $debug gibt an, ob die Filter im Debug oder Live Modus ausgeführt werden sollen.

{% set js = 'alert("Hello World!");' %}
<script>
{{ js|compileJs('filter:11', false) }}
</script>

Mit den Blöcken compilejs with {filter:null, debug:null} und compilecss with {filter:null, debug:null} können ganze Blöcke kompiliert werden.

<script>
{# 'filter:32' is a coffescript filter #}
{% compilejs with {filter:'filter:32'} %}
# Assignment:
number   = 42
opposite = true
 
# Conditions:
number = -42 if opposite
 
# Functions:
square = (x) -> x * x
 
# Arrays:
list = [1, 2, 3, 4, 5]
 
# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x
 
# Splats:
race = (winner, runners...) ->
  print winner, runners
 
# Existence:
alert "I knew it!" if elvis?
 
# Array comprehensions:
cubes = (math.cube num for num in list)
{% endcompilejs %}
</script>

Entwicklermodus

Bereits wie in V2 und V3 lässt sich der Entwicklermodus durch Anmeldung im Backend aktivieren. Der Entwicklermodus unterscheidet sich vom Live Modus in folgenden Punkten:

• Alle Dateien werden einzeln eingebunden.
• Asset Filter bei denen nicht im Debug Modus aktiviert ist, werden nicht angewendet.
• Alle Dateien werden über einen Proxy live eingebunden (kein Überfluten des temporären Verzeichnisses).
• Es werden zusätzliche Debug Informationen in die Seite als HTML Kommentare hinterlegt.

Achtung: Unter nginx funktioniert der Proxy nicht richtig. Die Proxy Datei ist in die URL "eingebettet", um den Dateinamen im Dev-Tools des Browsers zu erhalten, z.B. system/modules/theme-plus/web/proxy.php/21/Y3NzOjg=/normalize.css.css?1362750202. nginx löst dies nicht korrekt auf, weil es versucht auf die normalize.css.css zuzugreifen und nicht auf die proxy.php. Für nginx muss eine entsprechende rewrite Regel gesetzt werden.

Version 2 und Version 3

Theme+ V2 ist der Nachfolger für Contao 2.10 von layout_additional_sources - kurz LAS - für Contao 2.9. Theme+ ist ein nahezu vollständiger Rewrite und im Stil des API driven development aufgebaut. Intern setzt die V2 auf die compression-api auf.

Theme+ V3 sollte die Weiterentwicklung der V2 werden, in der die API erweitert und neue Funktionen zur Optimierung hinzugefügt wurden. Die V3 wurde zugunsten der V4 gecancelt.

Update von LAS möglich?

Ein Update von LAS ist möglich. Dazu muss zuerst die Contao Installation auf 2.10 aktualisiert werden (LAS vorher nicht deinstallieren!). Nachdem Contao auf 2.10 aktualisiert wurde, über den Erweiterungskatalog Theme+ [theme_plus] installieren (auch ohne vorher LAS zu deinstallieren). Theme+ aktualisiert automatisch alle Einstellungen von LAS und löscht LAS danach automatisch.

Aktivieren von Vereinigung und Minimierung

Compression API Einstellungen

Die Vereinigung von Stylesheet und JavaScript ist automatisch aktiviert, wenn Theme+ installiert wurde. Für die Minimierung muss zusätzlich ein Minimizer installiert werden.

• yui-compressor, vermutlich bester Minimizer für CSS und JS
  Diese Erweiterung ist lediglich ein Wrapper für ein auf dem System installierten yui-compressor.
• cssMinimizer, PHP Minimizer für CSS, basierend auf cssmin
• jsMinimizer, PHP Minimizer für JS, basierend auf jsmin
• DeanEdwardsPacker, PHP Minimizer für JS, basierend auf dem dean.edwards.name/packer/
  Der DEP verwendet eine spezielle Verpackungsweise, man könnte auch sagen, eine Komprimierung in JavaScript. Bei großen JavaScript Dateien kann dadurch die Dateigröße reduziert werden, im Gegenzug hat der Browser mehr zu berechnen um das JavaScript zu "entpacken".

Um den Minimizer zu aktivieren, muss dieser in den Systemeinstellungen im Bereich Compression API ausgewählt werden. Theme+ und die gesamten Minimizer basieren auf der Compression API, deshalb nutzt Theme+ dessen Einstellungen.

Deaktivieren von Vereinigung und Minimierung

Code wenn im BE angemeldet

Code wenn im BE abgemeldet

Die Vereinigung lässt sich nicht global deaktivieren, sie wird aber temporär deaktiviert, wenn ein Benutzer sich am Backend anmeldet. Auf diese einfache Art soll die Arbeit für Entwickler vereinfacht werden. Beim Umsetzen eines Layouts brauch der Entwickler sich nur am Backend anmelden, dann werden die einzelnen Dateien mit ein paar Debug Informationen im Code eingefügt.

Um die Minimierung zu deaktivieren, muss in den Systemeinstellungen der Minimizer geändert werden.