Benutzer-Werkzeuge

Webseiten-Werkzeuge


addons:tpl:headers

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
addons:tpl:headers [2014/11/25 15:48]
shadowcat [Zusätzliche CSS-Dateien]
addons:tpl:headers [2014/12/04 00:00] (aktuell)
Zeile 4: Zeile 4:
  
 <WRAP center round tip 100%> <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>​ </​WRAP>​
  
Zeile 21: Zeile 21:
  
 | **Schlüssel** | **Typ** | **Inhalt** | | **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. | | 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]] | | 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: Aufgefüllt sieht das nun bisher so aus:
Zeile 62: Zeile 63:
     '​frontend'​ => array(     '​frontend'​ => array(
         '​css'​ => 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 83: Zeile 87:
 <sxh php>​array('​file'​ => '/​templates/​mytemplate/​css/​sheet1.css'​),</​sxh>​ <sxh php>​array('​file'​ => '/​templates/​mytemplate/​css/​sheet1.css'​),</​sxh>​
  
 +===== Zusätzliche JavaScripts =====
 +
 +Bei JavaScripts ist es ein wenig einfacher als bei StyleSheets,​ weil neben der Adresse (URL) keine weiteren Informationen benötigt werden. Daher sieht das Unterarray für JavaScripts auch etwas einfacher aus:
 +
 +<sxh php>
 +    '​js'​ => array(
 +        '/​js/​modernizr.custom.62906.js',​
 +        '/​js/​whatever.js',​
 +    ),
 +</​sxh>​
 +
 +Im Gegensatz zu CSS-Dateien funktioniert hier auch die Angabe eines relativen Pfades, d.h., obige Dateien werden in 
 +
 +    ./​templates/​mytemplate/​js
 +
 +gesucht. (Wobei '​mytemplate'​ natürlich nur ein beispielhafter Name ist.)
 +
 +Auch hier können absolute URLs angegeben werden, es ist also möglich, JavaScripts von CDNs (etwa Google) zu laden.
 +
 +Mit optionalem CSS und JS sieht es nun also in etwa so aus:
 +
 +<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'​
 +            ),
 +            ...
 +        ),
 +        '​js'​ => array(
 +            '/​js/​modernizr.custom.62906.js',​
 +            '/​js/​whatever.js',​
 +        ),
 +        ....
 +    ),
 +);
 +</​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>​
  
addons/tpl/headers.1416926933.txt.gz · Zuletzt geändert: 2014/11/25 00:00 (Externe Bearbeitung)