CakePHP & DIEVOLUTION Blog

YAML und CakePHP

 

Auf vielfachen Wunsch ein kleiner Beitrag, wie man YAML und CakePHP zusammenbringt. Leider reicht es nicht aus, einfach den YAML Ordner in den CSS Ordner von CakePHP zu packen, aber es ist zum Glück auch nicht viel komplizierter.

Zunächst lädt man sich das YAML Paket runter und extrahiert es in einen beliebigen Ordner. Man nimmt nun den Inhalt des yaml-Unterordners (in dem sich central_draft.css usw. befinden) und kopiert die Inhalte in den CSS Ordner von CakePHP. Im CSS Ordner sollten sich nun ein central_draft.css, markup_draft.html sowie die Ordner core, debug, navigation, patches, print und screen befinden.
Nun empfehle ich, den YAML Builder zu benutzen, um sich sein Grundlayout zu basteln. Denn dadurch wird extrem viel Arbeit an YAML selbst schon vom Builder erledigt.
Ist man mit dem Layout zufrieden, kopiert man sich die vom Builder angelegte basemod.css in app/webroot/css/screen sowie das IE-Patchfile in app/webroot/css/patches/patch_layout.css.
Nun kopiert man sich das XHTML File vom Builder entsprechend seinen Wünschen in das Cake Projekt. Ich arbeite hier bei neuen Projekten erst mit der Datei views/layouts/default.ctp und kopiere die Inhalte, die nachher durch $content_for_layout eingesetzt werden in /views/pages/home.ctp. So kann man sich erstmal in Ruhe um das Layout kümmern und gerät nicht gleich durch die vielen Divs in Schwierigkeiten.
Bindet nun in den Layoutheader folgendes ein:
app/views/layouts/default.ctp

  1. <?php echo $html->css(‘central_draft’);?>
  2. <!–[if lte IE 7]>
  3. <?php echo $html->css(‘patches/patch_layout’);?>
  4. <![endif]–>
  5. </head>

Praktisch ersetze ich hier die CSS Vorgaben vom Builder durch den Cake-Weg. Nun ist es fast geschafft.
Es müssen allerdings an den CSS Dateien selbst noch ein paar Änderungen vorgenommen werden.
Meine /webroot/css/central_draft.css sieht nun folgendermaßen aus:

  1. @charset "UTF-8";
  2. /* import core styles | Basis-Stylesheets einbinden */
  3. @import url(core/base.css);
  4.  
  5. /* import screen layout | Screen-Layout einbinden */
  6.   @import url(navigation/nav_shinybuttons.css);
  7.   @import url(screen/basemod.css);
  8.   @import url(screen/content_default.css);
  9.  

Durch diese Pfadanpassung sollten die CSS Dateien nun korrekt geladen werden.

Noch ein Wort zu Hintergrundbildern: Da die Pfadstruktur bestehen bleibt, müsst ihr die Bilder im webroot/img Ordner relativ zur ausgewählen CSS Datei referenzieren. Ein Beispiel:
Ich habe einen Hintergrund in webroot/img namens background.gif. Wenn ich nun in der basemod.css (der Screen-Layoutdatei von YAML) dieses Bild angeben will, ist folgender Aufruf nötig:
app/webroot/css/screen/basemod.css

  1. #main {
  2.                 background-image: url(‘../../img/background.gif’);
  3.         }

Ich hoffe, diese Denkanstöße zum Thema YAML in CakePHP helfen euch weiter, eure Seiten weiter zu verbessern.

Veröffentlicht am Montag, den 14. Januar 2008 um 12:21 Uhr veröffentlicht

Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Eine Reaktion zu “YAML und CakePHP”

 

  1. Jochen Am 24. Januar 2008 um 15:27 Uhr

    Das werde ich noch ausprobieren danke!

Einen Kommentar schreiben