BlackCat CMS Dokumentation, Tutorials, Tipps und Tricks

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Für Fortgeschrittene: headers.inc.php ======

Viele Template-Designer wünschen sich für Website Baker schon lange erweiterte Steuermöglichkeiten, etwa um bestimmte (große) JavaScripts nur dann zu laden, wenn bestimmte Bedingungen erfüllt sind. BlackCat erfüllt diesen Wunsch durch die Datei headers.inc.php.

<WRAP center round tip 100%>
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>

Der grundlegende Aufbau der Datei besteht in einem multidimensionalen Array, mit dessen Hilfe zusätzliche CSS- und JavaScript-Dateien, jQuery und jQuery UI sowie META-Tags in den Seitenkopf übertragen werden können. Hierzu gliedert sich das Array zunächst in zwei Hauptschlüssel:

<sxh php>
$mod_headers = array(
    'backend' => array(),
    'frontend' => array(),
);
</sxh>

Für Frontend-Templates ist natürlich der Bereich 'frontend' interessant, während 'backend' von Backend-Themes verwendet wird.

Die beiden Hauptbereiche untergliedern sich nun in eine Reihe von Unterschlüsseln:

| **Schlüssel** | **Typ** | **Inhalt** |
| 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. *) |
| 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:

<sxh php>
$mod_headers = array(
    'frontend' => array(
        'css' => array(),
        'js' => array(),
        'meta' => array(),
        'jquery' => array(),
    ),
);
</sxh>

===== Zusätzliche CSS-Dateien =====

Bei CSS sind zwei Dinge wichtig: Die Adresse (URL) der einzubindenden Datei und die Einstellung für ''media'', also das Ausgabemedium, für die das Stylesheet gelten soll. (Weiterführende Infos hierzu unter http://de.selfhtml.org/css/formate/einbinden.htm#link_media)

Aus diesem Grund sieht jeder Eintrag im 'css'-Unterarray folgendermaßen aus:

<sxh php>
    array('file' => '<URL des CSS>', 'media' => '<Medientyp(en)>'),
</sxh>

Standardmäßig wird als Medientyp //'screen,projection'// verwendet, so daß der Schlüssel ''media'' auch weggelassen werden kann:

<sxh php>
    array('file' => '<URL des CSS>'),
</sxh>

Mehrere CSS-Dateien fügt man nun ein, indem man für jede Datei obige Zeile (mit oder ohne ''media'') einfügt:

<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'
            ),
            ...
        ),
        ....
    ),
);
</sxh>

(Anmerkung: In der echten ''headers.inc.php'' keine '...' verwenden, sie dienen nur der Verdeutlichung, daß da noch mehr stehen kann.)

==== Absolute vs. relative URL ====

Woher 'weiß' BlackCat CMS nun, von wo eine CSS-Datei geholt werden soll? Variante 1 ist natürlich die Angabe einer absoluten URL, z.B. 

<sxh php>array('file' => CAT_URL.'/templates/mytemplate/css/sheet1.css'),</sxh>

Das ist aber nicht notwendig, da BlackCat bei relativen Pfaden automatisch im lokalen Pfad der BlackCat Installation sucht. (Eigentlich sollte auch im lokalen Verzeichnis der ''headers.inc.php'' gesucht werden, was bei JavaScripts auch funktioniert, bei CSS-Dateien derzeit aber leider (noch) nicht.) Es reicht also auch:

<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>
BlackCat CMS Dokumentation, Tutorials, Tipps und Tricks

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge
