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.
Es handelt sich hierbei um PHP-Code, die Anwendung erfordert also zumindest Basiskenntnisse im Umgang mit PHP! Hilfe kann im Forum erfragt werden.
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:
$mod_headers = array(
'backend' => array(),
'frontend' => array(),
);
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 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:
$mod_headers = array(
'frontend' => array(
'css' => array(),
'js' => array(),
'meta' => array(),
'jquery' => array(),
),
);
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:
array('file' => '<URL des CSS>', 'media' => '<Medientyp(en)>'),
Standardmäßig wird als Medientyp 'screen,projection' verwendet, so daß der Schlüssel media auch weggelassen werden kann:
array('file' => '<URL des CSS>'),
Mehrere CSS-Dateien fügt man nun ein, indem man für jede Datei obige Zeile (mit oder ohne media) einfügt:
$mod_headers = array(
'frontend' => array(
'css' => array(
array('file' => '/templates/mytemplate/css/sheet1.css'),
array(
'file' => '/templates/mytemplate/css/printer.css',
'media' => 'print'
),
...
),
....
),
);
(Anmerkung: In der echten headers.inc.php keine '…' verwenden, sie dienen nur der Verdeutlichung, daß da noch mehr stehen kann.)
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.
array('file' => CAT_URL.'/templates/mytemplate/css/sheet1.css'),
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:
array('file' => '/templates/mytemplate/css/sheet1.css'),
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:
'js' => array(
'/js/modernizr.custom.62906.js',
'/js/whatever.js',
),
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:
$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',
),
....
),
);
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.
'jquery' => array(
'core' => true,
'ui' => true,
),
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:
'jquery' => array(
'ui' => true,
),
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:
'css' => array(
array('file' => '/modules/lib_jquery/jquery-ui/themes/base/jquery-ui.css'),
),
Was haben wir also bis jetzt?
$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,
),
....
),
);
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: META-Attribute
Hier mal beispielhaft das Array aus einem Template, das auf dem Gumby CSS Framework basiert:
$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',
)
)
);