Laravel Blade Templates – eine Einführung

Erlernen Sie die Grundlagen der Blade-Syntax und des Templating-Systems. Laravels Blade Template-System ist eine der Möglichkeiten, wie das Laravel PHP-Framework das Leben eines Entwicklers erleichtert.

Die Blade-Syntax ist sauber und einfach, kann aber leicht mit verschachtelter Vorlagenvererbung und komplexen Bedingungen umgehen. Und da die Blade-Syntax in PHP-Code kompiliert und dann zwischengespeichert wird, bietet sie eine bessere Webserverleistung als die Verwendung von Standard-PHP allein.

Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach

Anforderungen

  • Ein Cloud Server mit installiertem Laravel und PHP 7.0+.

Um Laravel zu installieren, folgen Sie den Anweisungen in unserem Artikel "Installieren Sie das Laravel PHP Framework auf Ubuntu 16.04".

Free Cloud Server Trial
Cloud Server kostenlos testen

Dank Startguthaben testen Sie Cloud Server bei IONOS 1 Monat lang kostenlos (oder bis das Guthaben verbraucht ist) und erleben die perfekte Kombination aus Leistung und Sicherheit!

Ein neues Projekt erstellen

Verbinde dich mit deinem Server mit SSH, dann su mit deinem Laravel-Benutzer. Gehen Sie zu Ihrem Webverzeichnis:

cd /var/www/html

Erstellen Sie das neue Basisprojekt:

laravel new basic-site

Dadurch wird das grundlegende Projektverzeichnis erstellt und alle Laravel-Standardkomponenten und Unterverzeichnisse erstellt.

Wechseln Sie in das Projektverzeichnis:

cd basic-site

Ein weiterer Schritt ist notwendig, bevor Sie das Projekt in einem Browser betrachten können. Der Besitz des Basic-Site/Storage-Verzeichnisses muss auf den Webuser des Servers umgestellt werden:

sudo chown -R www-data:www-data storage

Aufbau einer grundlegenden Dateistruktur

Blade-Vorlagen leben im Ordner resources/views. Wir werden einen Satz von Verzeichnissen erstellen, um unsere neuen Blade-Vorlagen zu organisieren. Die Dateistruktur ist:

- resources
-- views
--- includes
------- header.blade.php
------- footer.blade.php
--- layouts
------- default.blade.php
--- pages
------- home.blade.php

Dieses Projekt wird eine Master-Layoutdatei haben, die zwei eingebundene Dateien aufruft: die Kopf- und Fußzeile. Die Homepage hat den gesamten Inhalt und verwendet die Master-Layout-Datei.

Erstellen Sie die notwendigen Verzeichnisse mit den Befehlen:

mkdir resources/views/layouts
mkdir resources/views/pages
mkdir resources/views/includes

Erstellen Sie die Dateien

Als nächstes werden wir die Beispieldateien erstellen. Jede Blade-Datei muss der Namenskonvention[Dateiname].blade.php folgen und sich im Verzeichnis resources/views des Laravel-Projekts befinden.

Standardvorlage

Erstellen Sie die Standard-Datei.blade.php:

nano resources/views/layouts/default.blade.php

Dies ist die Standard-Vorlagendatei. Den folgenden Inhalt in diese Datei einfügen:

<html>
<head>
    @include('includes.header')
</head>
<body>
    @yield('content')
    @include('includes.footer')
</body>
</html>

Speichern und beenden Sie die Datei.

Zwei Elemente der Blade-Syntax zu beachten:

  • @include zieht Informationen aus den Dateien im Include-Verzeichnis ein.
  • @yield ruft Informationen aus dem Inhaltsbereich der Homepage ab.

Kopfzeile

Erstellen Sie die Datei header.blade.php:

nano resources/views/includes/header.blade.php

Dies wird die eingebundene Header-Datei sein. Fügen Sie den folgenden Inhalt in diese Datei ein:

<title>My Laravel Example Site</title>
<meta name="description" content="An example site for learning Laravel.">

Speichern und beenden Sie die Datei.

Fußzeile

Erstellen Sie die Datei footer.blade.php:

nano resources/views/includes/footer.blade.php

Dies ist die enthaltene Fußzeilen-Datei. Den folgenden Inhalt in diese Datei einfügen:

<p>This is the included footer.</p>

Speichern und beenden Sie die Datei.

Startseite

Erstellen Sie die Datei home.blade.php:

nano resources/views/pages/home.blade.php

Dies wird unsere Homepage sein. Den folgenden Inhalt in diese Datei einfügen:

@extends('layouts.default')
@section('content')
    Hello, world! Welcome to the home page.
@endsection

Speichern und beenden Sie die Datei.

Ein paar Hinweise zur Blade-Syntax:

  • @extends teilt Laravel mit, dass der Inhalt dieser Datei eine andere Ansicht erweitert. Es definiert auch die Ansicht, die es als unsere Standardvorlage erweitert: Ressourcen/Ansichten/Layouts/default.blade.php
  • @section definiert den Anfang eines Abschnitts, den wir Inhalt genannt haben. Alles, was in diesem Abschnitt enthalten ist, erscheint in dem @yield, das wir in der Vorlage definiert haben.
  • @endsection schließt diesen Abschnitt. @section und @endsection sind Begriffe, die paarweise verwendet werden müssen, ähnlich wie andere HTML-Tags (z.B. <div> und </div>).
Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach

Erstellen der Route

Da wir nur einfache Blade Layouts verwenden werden, müssen wir lediglich eine einfache Route erstellen, die eine einzelne Ansicht lädt. Es ist nicht notwendig, etwas Komplizierteres (wie einen Controller) zu erstellen.

Öffnen Sie die Datei routes/web.php zur Bearbeitung:

nano routes/web.php

Finde den Abschnitt, der lautet:

Route::get('/', function () {
    return view('welcome');
});

Ersetzen Ihn durch:

Route::get('/', function () {
    return view('pages/home');
});

Speichern und beenden Sie die Datei.

Diese Route nimmt Anfragen für das öffentliche Hauptverzeichnis (/) entgegen und leitet diese an die Datei home.blade.php im Seitenverzeichnis weiter.

Nachdem Sie die Erstellung der Route abgeschlossen haben, können Sie die Ergebnisse in Ihrem Browser anzeigen, indem Sie /basic-site/public an das Ende Ihrer Domain anfügen (z.B. http://example.com/basic-site/public).

War dieser Artikel hilfreich?