Templates
Im Zusammenhang mit Layouts kann man Templates als eine Art Schablone/Vorlage zur Anzeige von Inhalten bezeichnen.
Templates versucht man "allgemein" zu definieren, wobei auch Bereiche für dynamische Inhalte vorgesehen werden. Zum Beispiel kannn ein Template erstellt werden, dass einen Navigation an der linken Seite beinhaltet und für die Anzeige des Inhaltes einen Platzhalter verwendet.
Diese Vorlage kann dann z.B. zur Anzeige einer Seite und die Anzeige eines Blog-Beitrags verwendet werden. Der definierte Platzhalter wird dann entweder mit dem Seiteninhalt oder dem Inhalt des Blog-Beitrags ersetzt.
Die Navigation steht im Template und kann dort, an einer zentralen Stelle geändert werden, ohne dies für jeden Seiteninhalt oder Blog-Beitrag wiederholen zu müssen.
Es gibt heute eine Vielzahl von Template-Engines. Im Projektumfeld des brShop24 setzen wir Blade Templates ein, welche standardmäßig in das verwendete PHP Framework Laravel integriert sind.
So kann es aussehen:
<!-- Gespeichert unter layout.blade.php -->
<html>
<head>
<title>Mein Shop - @yield('titel')</title>
</head>
<body>
@section('hauptmenu')
Dies ist das Hauptmenü für {{ $username }}
@show
<div class="container">
@yield('inhalt')
</div>
</body>
</html> {warning} Diese Theme & Template Dokumentation hat den Status "Work in Progress". Die Freigabe erfolgt in Q1/2019
- Übersicht
- Wie funktionieren Blade Templates?
- Ein Beispiel für ein Blade Template im Detail erklärt
- Die Verbindung zwischen Applikation und Templates
Wie funktionieren Blade Templates?
Blade ist eine einfache, sehr mächtige Template-Engine. Sie basiert auf der Open-Source-Scriptsprache PHP.
Blade Templates können HTML und CSS Code beinhalten. Auch die Verwendung von PHP Code ist innerhalb eines Blade-Templates gestattet. Für "nicht Entwickler" beinhaltet die Template-Engine einen eigenen Sprachumfang an Funktionen.
Alle Blade-Templates der Applikation werden automatisch in PHP Dateien umgewandelt und gecached (zwischengespeichert), solange sie nicht verändert werden. Dies bedeuete, dass die Verwendung während der Laufzeit keine "Übersetzungszeit" und dementsprechend Resourcen kostet, welche den Aufbau der Webseite verlangsamen.
Ein Beispiel für ein Blade Template im Detail erklärt
Schauen wir uns das aufgeführte Beispiel einmal etwas genauer an, um zu erkennen wie einfach Templates funktionieren und erstellt werden können:
Grundlegend erkennen wir auf den ersten Blick ;-), dass es sich erst einmal um typischen HTML-Code handelt.
Besonderheiten dabei sind jedoch Einträge welche mit "@" kennzeichnet sind. Es handelt sich dabei um die Einträge @yield, @section und @show. Außerdem finden wir einen Eintrag {{ $username }} welche ebenfalls nicht zum HTML Sprachumfang zählt. Diese Elemente zählen zum Blade Sprachumfang.
Das Template beschreibt ein Vorlage für ein Grundlayout und sieht im Layout dynamisch ersetzbare Content-Bereiche (@yield) vor.
<!-- Gespeichert unter layout.blade.php -->
<html>
<head>
<title>Mein Shop - @yield('titel')</title>
</head>
<body>
@section('hauptmenu')
Dies ist das Hauptmenü für {{ $username }}
@show
<div class="container">
@yield('inhalt')
</div>
</body>
</html> @section('hauptmenu') definiert den Inhalt für die Sektion "hauptmenu".
Während @yield('inhalt') beschreibt das an die entsprechende Position der Inhalt der Sektion "inhalt" dargestellt werden soll.
Während @yield('titel') beschreibt das an die entsprechende Position der Inhalt der Sektion "titel" dargestellt werden soll.
{{ $username }} ist ein Platzhalter und wird durch den gelieferten Wert für den Benutzernamen ersetzt.
Auf Basis dieses Grundlayouts können nun "Kind-Vorlagen" erstellt werden:
Diese Kind-Vorlage beschreibt über den Eintrag @extends('layout') das es eine Erweiterung des Templates mit der Bezeichnung "layout" ist.
Die @yield Einträge titel und inhalt des Layout Templates, werden durch den Inhalt der Sektionen der Kind-Vorlage ersetzt.
Die Sektion "hauptmenu" verwendet den Inhalt aus dem übergeordneten Layout (@parent) und ergänzt den Inhalt um den zusätzlichen Inhalt der Sektion (@section('hauptmenu')) aus der Kind-Vorlage.
Der Platzhalter {{ $username }} wird durch den Namen des aktuell angemeldeten Benutzers (Peter Maier) ersetzt.
<!-- Gespeichert unter kind.blade.php -->
@extends('layout')
@section('titel', 'Mein Seiten-Titel')
@section('hauptmenu')
@parent
<p>Das Hauptmenü wird um diesen Eintrag ergänzt</p>
@endsection
@section('inhalt')
<p>Das ist der Inhalt aus dem Kind Template</p>
@endsectionBei Aufruf des "kind" Templates wird als Ergebnis folgender Code an den Webbrowser übergeben:
<html>
<head>
<title>Mein Shop - Mein Seiten-Titel</title>
</head>
<body>
Dies ist das Hauptmenü für Peter Maier
<p>Das Hauptmenü wird um diesen Eintrag ergänzt</p>
<div class="container">
<p>Das ist der Inhalt aus dem Kind Template</p>
</div>
</body>
</html> Die Verbindung zwischen Applikation und Templates
Wenn man sich das oben beschrieben Beispiel detaillierter anschaut, werden am Ende zwei Fragen offen bleiben:
Grundsätzliche gibt es innerhalb der Applikation eine strikte Trennung zwischen Layout (Theme & Templates) und dem Code (System-Logik).
An den beiden oben aufgeführten Stellen muss es jedoch eine Verbindung geben, um System-Informationen darstellen zu können. Klicken Sie einfach auf die enstprechenden Punkte um mehr darüber zu erfahren.