Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- addons:tpl:headers [2014/11/25 15:58]
shadowcat [Zusätzliche CSS-Dateien]
+++ addons:tpl:headers [2014/12/04 00:00] (aktuell)
@@ Zeile 4: / Zeile 4: @@
 <WRAP center round tip 100%>
-Es handelt sich hierbei um PHP-Code, die Anwendung erfordert also zumindest Basiskenntnisse im Umgang mit PHP!
+Es handelt sich hierbei um PHP-Code, die Anwendung erfordert also zumindest Basiskenntnisse im Umgang mit PHP! Hilfe kann [[http://forum.blackcat-cms.org|im Forum]] erfragt werden.
 </WRAP>
@@ Zeile 21: / Zeile 21: @@
 | **Schlüssel** | **Typ** | **Inhalt** |
-| css | multidimensionales Array | Liste **zusätzlicher** CSS-Dateien; die ''frontend.css'' wird automatisch gesucht und geladen und muß hier nicht extra aufgeführt werden. |
+| css | multidimensionales Array | Liste **zusätzlicher** CSS-Dateien; die ''template.css'' wird automatisch gesucht und geladen und muß hier nicht extra aufgeführt werden. |
-| js | Array | Liste **zusätzlicher** JavaScripts; die ''frontend.js'' wird automatisch gesucht und geladen und muß hier nicht extra aufgeführt werden. |
+| js | Array | Liste **zusätzlicher** JavaScripts; die ''frontend.js'' wird automatisch gesucht und geladen und muß hier nicht extra aufgeführt werden. *) |
 | jquery | multidimensionales Array | Erlaubt das Hinzufügen von jQuery, der jQuery UI sowie eines UI Themes. Die jQuery UI beinhaltet alle Komponenten, diese müssen also nicht gesondert aufgeführt werden. |
 | meta | Array | Liste der [[cookbook:meta|META-Tags]] |
+*) Durch einen Fehler in Version 1.1 wird dort die frontend.js leider nicht automatisch geladen. Sie kann aber der Liste der js-Dateien hinzugefügt werden, sie wird auch nach Korrektur des Fehlers nicht doppelt geladen.
 Aufgefüllt sieht das nun bisher so aus:
@@ Zeile 111: / Zeile 112: @@
     'frontend' => array(
         'css' => array(
-            array('file' => 'sheet1.css'),
+            array('file' => '/templates/mytemplate/css/sheet1.css'),
-            array('file' => 'printer.css', 'media' => 'print'),
+            array(
+                'file' => '/templates/mytemplate/css/printer.css',
+                'media' => 'print'
+            ),
             ...
         ),
@@ Zeile 123: / Zeile 127: @@
 );
 </sxh>
+===== jQuery und jQuery UI =====
+Hier ist es noch ein wenig einfacher: Da BlackCat CMS die aktuellen Versionen von jQuery und jQuery UI mit dem Modul ''lib_jquery'' bereits mitliefert, muß in der ''headers.inc.php'' nur noch 'gesagt' werden, daß diese auch geladen werden sollen.
+<sxh php>
+    'jquery' => array(
+        'core' => true,
+        'ui' => true,
+    ),
+</sxh>
+Da jQuery UI ohne jQuery nicht funktioniert, fügt BlackCat CMS den Core automatisch hinzu, wenn der Schlüssel 'ui' auf 'true' gesetzt ist. Folgendes würde also auch funktionieren:
+<sxh php>
+    'jquery' => array(
+        'ui' => true,
+    ),
+</sxh>
+==== Kein UI ohne Theme ====
+Die UI Themes lassen sich problemlos von einem CDN laden; im Modul ''lib_jquery'' ist das Theme 'base' enthalten. Da es sich hierbei um CSS-Dateien handelt, trägt man die gewünschte URL einfach im Schlüssel ''css'' ein.
+Um 'base' zu verwenden:
+<sxh php>
+        'css' => array(
+            array('file' => '/modules/lib_jquery/jquery-ui/themes/base/jquery-ui.css'),
+        ),
+</sxh>
+Was haben wir also bis jetzt?
+<sxh php>
+$mod_headers = array(
+    'frontend' => array(
+        'css' => array(
+            array('file' => '/templates/mytemplate/css/sheet1.css'),
+            array(
+                'file' => '/templates/mytemplate/css/printer.css',
+                'media' => 'print'
+            ),
+            array('file' => '/modules/lib_jquery/jquery-ui/themes/base/jquery-ui.css'),
+            ...
+        ),
+        'js' => array(
+            '/js/modernizr.custom.62906.js',
+            '/js/whatever.js',
+        ),
+        'jquery' => array(
+            'core' => true,
+            'ui' => true,
+        ),
+        ....
+    ),
+);
+</sxh>
+===== Last but not least: META =====
+META-Angaben dienen vielfältigen Zwecken, von Informationen über die aktuelle Seite ('keywords','description','author',...) über Anweisungen für Suchmaschinen ('robots') bis hin zu Weiterleitungen. (Die seitenbasierte Konfiguration von META-Angaben ist derzeit nur in Teilen möglich, ein Ausbau ist geplant.)
+Templates und Module können in der ''headers.inc.php'' META-Attribute setzen, indem diese dem Schlüssel 'meta' hinzugefügt werden. Da es hierzu bereits eine Seite gibt, hier nur der Link: [[cookbook:meta|META-Attribute]]
+===== Aus dem realen Leben =====
+Hier mal beispielhaft das Array aus einem Template, das auf dem Gumby CSS Framework basiert:
+<sxh php>
+$mod_headers = array(
+    'frontend' => array(
+        'meta' => array(
+            array( 'name' => 'viewport', 'content' => 'width=device-width, initial-scale=1.0, maximum-scale=1' ),
+            array( 'http-equiv' => "X-UA-Compatible", 'content' => "IE=edge,chrome=1" ),
+            /* facebook */
+            array( 'property' => 'fb:page_id', content => '' ),
+            array( 'property' => 'og:image', content => '' ),
+            array( 'property' => 'og:description', content => '' ),
+            array( 'property' => 'og:title', content => '' ),
+            /* Google+ */
+            array( 'itemprop' => 'name', 'content' => '' ),
+            array( 'itemprop' => 'description', 'content' => '' ),
+            array( 'itemprop' => 'image', 'content' => '' ),
+        ),
+        'css' => array(
+            array(
+                'media'       => 'all',
+                'file'        => 'templates/gumby/css/gumby.css'
+            )
+        ),
+        'jquery' => array(
+            array(
+                'core'        => true
+            )
+        ),
+        'js' => array(
+            '/js/modernizr-2.6.2.min.js',
+            '/js/libs/gumby.min.js',
+            '/js/plugins.js',
+            '/js/main.js',
+        )
+    )
+);
+</sxh>

BlackCat CMS Dokumentation, Tutorials, Tipps und Tricks

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge