ThemePlus: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(Deaktivieren von Vereinigung und Minimierung)
(Entwicklermodus)
 
(Eine dazwischenliegende Version von einem Benutzer wird nicht angezeigt)
Zeile 1: Zeile 1:
Theme+ verbessert Contao im Umgang mit Stylesheets und JavaScript Dateien.
+
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+=
 
=Theme+=
 
Theme+ ist der Nachfolger für Contao 2.10 von [http://www.contao.org/erweiterungsliste/view/layout_additional_sources.10070029.de.html 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.
 
  
 
==Features==
 
==Features==
  
* Einbinden externer Stylesheet und JavaScript Dateien aus tl_files/ oder als URL.
+
* Einfügen beliebiger CSS und JS Dateien aus der Dateiverwaltung.
* Zusammenführen von Stylesheet und JavaScript Dateien, einschließlich der Contao CSS Dateien und Plugin CSS/JS Dateien.
+
* Bedingtes einfügen von CSS und JS Dateien auf Basis von Filtern.
* Minimieren von Stylesheet und JavaScript Dateien mittels yui-compressor (benötigt den yui-compressor und Java installiert auf dem Server) oder cssmin/jsmin ([http://www.contao.org/erweiterungsliste/view/cssMinimizer.de.html cssMinimizer] und [http://www.contao.org/erweiterungsliste/view/jsMinimizer.de.html jsMinimizer])
+
* Compilieren von LESS, SCSS, CoffeeScript und weiteren Precompiler Sprachen. (Abhängig von der verwendeten Assetic Version)
* Support für [http://lesscss.org/ lesscss] mittels less.js (benötigt Node.js installiert auf dem Server) oder [http://www.contao.org/erweiterungsliste/view/phpless.de.html phpless].
+
* 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 [https://contao.org/de/extension-list/view/compression-api.10020009.de.html compression-api] aufsetzen, verwendet die V4 die [https://github.com/kriswallsmith/assetic 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.
 +
 
 +
<source lang="php">
 +
$asset = new \Assetic\Asset\StringAsset('alert("Hello World!");');
 +
$GLOBALS['TL_JAVASCRIPT'][] = $asset;
 +
</source>
 +
 
 +
<source lang="php">
 +
$asset = new \Assetic\Asset\StringAsset('body:before { content: "Hello World"; font-size: 30px; font-color: red; }');
 +
$GLOBALS['TL_CSS'][] = $asset;
 +
</source>
 +
 
 +
===Twig Support===
 +
 
 +
Für die [[Twig]] Erweiterung gibt es einen zusätzlichen Support.
 +
 
 +
Mit den Filtern <code>compileJs($filter = null, $debug = null)</code> und <code>compileCss($filter = null, $debug = null)</code> lässt sich JavaScript und CSS Code kompilieren.
 +
<code>$filter</code> ist eine Assetic Filter/Chain Referenz nach dem Schema <code>filter:<ID></code> oder <code>chain:<ID></code>. Bei <code>null</code> werden die im Layout hinterlegten Filter verwendet.
 +
<code>$debug</code> gibt an, ob die Filter im Debug oder Live Modus ausgeführt werden sollen.
 +
 
 +
<source lang="html4strict">
 +
{% set js = 'alert("Hello World!");' %}
 +
<script>
 +
{{ js|compileJs('filter:11', false) }}
 +
</script>
 +
</source>
 +
 
 +
Mit den Blöcken <code>compilejs with {filter:null, debug:null}</code> und <code>compilecss with {filter:null, debug:null}</code> können ganze Blöcke kompiliert werden.
 +
 
 +
<source lang="html4strict">
 +
<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>
 +
</source>
 +
 
 +
===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. <code>system/modules/theme-plus/web/proxy.php/21/Y3NzOjg=/normalize.css.css?1362750202</code>. nginx löst dies nicht korrekt auf, weil es versucht auf die <code>normalize.css.css</code> zuzugreifen und nicht auf die <code>proxy.php</code>. Für nginx muss eine entsprechende rewrite Regel gesetzt werden.
 +
 
 +
==Version 2 und Version 3==
  
===Geplante Features===
+
Theme+ V2 ist der Nachfolger für Contao 2.10 von [http://www.contao.org/erweiterungsliste/view/layout_additional_sources.10070029.de.html 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 [https://contao.org/de/extension-list/view/compression-api.10020009.de.html compression-api] auf.
  
* Eigener CSS Parser, soll Fehleranalyse verbessern und phpless ersetzen.
+
Theme+ V3 sollte die Weiterentwicklung der V2 werden, in der die API erweitert und neue Funktionen zur Optimierung hinzugefügt wurden.
* Unterstützung für weitere JavaScript Frameworks.
+
Die V3 wurde zugunsten der V4 gecancelt.
  
==Update von LAS möglich?==
+
===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.
 
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==
+
===Aktivieren von Vereinigung und Minimierung===
  
 
[[Bild:compression-api.png|thumb|Compression API Einstellungen]]
 
[[Bild:compression-api.png|thumb|Compression API Einstellungen]]
Zeile 35: Zeile 122:
 
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.
 
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==
+
===Deaktivieren von Vereinigung und Minimierung===
  
 
[[Bild:theme_plus_files_angemeldet.png|thumb|Code wenn im BE angemeldet]]
 
[[Bild:theme_plus_files_angemeldet.png|thumb|Code wenn im BE angemeldet]]

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.

Ansichten
Meine Werkzeuge

Contao Community Documentation

Fork die Wand an!

Tristan Lins
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge