Laravel Layout

Bisher haben wir nur eine View blogs.blade.php

Wahrscheinlich wird es aber mehrere Webseiten geben, die zur Website gehören. Jedes Template beinhaltet den kompletten HTML Code.

Oft ist nun aber so, dass beispielsweise der Header und/oder Footer immer derselbe ist. Trotzdem wird in jedem Template der Code wiederholt. Dies ist nicht nur redundanter Code, sondern es ist auch mühselig, alle Templates anzupassen, wenn sich mal etwas ändert, z.B. am Header oder Footer.

Erfreulicherweise bieter uns Laravel hier eine Lösung an, Layout Files

Die Idee ist, sich wiederholende Teile der HTML Seite in das Layout File zu schreiben. Die einzelnen Seiten fügen dann nur noch ihren speziellen Content ein.

Damit das Sinn macht, fügen wir als erstes ein zweites Template hinzu: about.blade.php

Wir könnten nun einen AboutController hinzufügen. Wir entscheiden uns aber dafür, einen InfoController anzulegen, der über verschiedene Actions solche Seiten wie about, impressum, contact usw. abwickelt.

Wir setzen die Route:

Die Route /about definiert also den InfoController und die Action showAbout.

Der Aufruf im Browser sollte zu diesem Ergebnis führen:

Wir möchten nun eine horizontale Navigation auf all unseren Seiten haben. Anstatt nun den Code auf jeder Seite einzufügen, legen wir ein Layout File an:

Wie man sieht, stellt das Layout-Template das Html Grundgerüst zur Verfügung und die Navigation.

Genau das brauchen wir auf jeder Seite. Den speziellen Seiten-Content stellen dann die einzelnen Seiten zur Verfügung.

Wir beginnen mit der index.blade.php. Wir löschen den Inhalt und fügen diesen Code ein:

Mittels @extends(‚layout‘) erbt unser Template den Code vom layout.blade.php Template.

Man kann nun verschiedene sogenannte sections definieren, deren Inhalt dann layout.blade.php ergänzt. In diesem Fall eben das H1 Tag.

Wenn wir nun die Startseite aufrufen, sehen wir erst einmal nur das layout Grundgerüst. Wir müssen im Layout Template noch die Sections rendern:

Wenn irgendeine Seite von Layout erbt, bedeutet dies auch, dass Layout Zugriff auf die Sections hat.

Im Layout File wird dann an beliebiger Stelle, also dort, wo der Inhalt der Section erscheinen soll, mittels @yield(‚NameDerSection‘) ebendieser Inhalt der jeweiligen Section hineingerendert.

Dementsprechend sieht dann die Ausgabe im Browser aus:

Nun bearbeiten wir die about.blade.php

Die Ausgabe dann entsprechend. Durch den Mechanismus der Vererbung sparen wir also Code und gestalten den Aufbau unserer Seiten modular.

Wir müssen noch die blog.blade.php bearbeiten. Sie sollte danach so aussehen:

Wir fügen nun in die layout.blade.php noch den Artikel Link ein, der auf die Route/blogs zeigt und passen das CSS ein wenig an, damit die Formatierung nur zieht bei unserer Navigation:

Der Aufruf im Browser:

Letzte Artikel von Peter Homburg (Alle anzeigen)