- Blade kompiliert .blade.php-Vorlagen in reines PHP und bietet übersichtliche Direktiven für Bedingungen, Schleifen, Layouts und Komponenten.
- Mit den Stacks von Blade (@stack, @push, @prepend) können Sie Skripte und Stile zentralisieren und die gestapelten Elemente an untergeordnete Ansichten delegieren.
- Umgebungs-, Autorisierungs-, Sitzungs- und Validierungsdirektiven integrieren die Ansichten sicher und ausdrucksstark in das übrige Framework.
- Benutzerdefinierte Direktiven und Hilfsfunktionen wie Js::from eröffnen die Möglichkeit für fortgeschrittene Muster, einschließlich einer hasStack-ähnlichen Direktive.
Wer täglich mit Laravel arbeitet, wird früher oder später auf Blade, seine Direktiven und natürlich die... stoßen. View-Stacks und die Idee einer hypothetischen hasStack-Direktive Um sie besser zu verwalten. Vielleicht haben Sie bereits mit klassischen PHP-Templates gearbeitet oder sind an React oder Vue gewöhnt, aber wenn Sie Blade und all seine Möglichkeiten (einschließlich Stacks) wirklich verstehen, dann macht Ihre Art, Ansichten zu organisieren, einen großen Sprung nach vorn.
In diesem Artikel gehen wir ins Detail: Sie werden sehen, wie Es bietet eine sehr detaillierte Erklärung, wie Blade funktioniert, was Kontrolldirektiven sind, wie Layouts, Komponenten, Slots, Attribute, Autorisierung und Umgebungen strukturiert sind und wie in diesem Zusammenhang das Konzept von Stacks und einer hasStack-Direktive hineinpasst. Um festzustellen, ob gestapelte Inhalte vorhanden sind, bevor das Rendering erfolgt. Alles mit praktischen Beispielen und einem realistischen Ansatz, der speziell für moderne Laravel-Projekte entwickelt wurde.
Was ist Blade und warum ist es so wichtig, seine Anweisungen zu verstehen?
Blade ist der offizielle Laravel-Template-EngineEs zwingt Sie nicht dazu, mit der Verwendung von PHP aufzuhören, bietet Ihnen aber eine wesentlich übersichtlichere Syntax zum Mischen von Präsentationslogik und HTML, ohne dass ständig Tags geöffnet und geschlossen werden müssen. Immer. Jede Vorlage .blade.php Es wird zu reinem PHP kompiliert und zwischengespeichert in storage/framework/viewsDer Laufzeit-Overhead ist daher minimal.
Blade-Ansichten werden typischerweise gespeichert in Ressourcen/Ansichten und werden von Routen oder Controllern mithilfe des Helfers zurückgegeben. view()Sie können diesem Hilfsprogramm Daten in einem zweiten Argument übergeben (assoziatives Array, compact()usw.), und in der Ansicht, dass sie mit der Syntax von Doppeltasten um maskierte Inhalte anzuzeigen oder mit Ausrufezeichen für nicht maskierte Inhalte.
Ein großer Vorteil von Blade ist, dass es bietet spezifische Richtlinien (jene Wörter, die mit beginnen @) zur Handhabung von Bedingungen, Schleifen, Autorisierung, Skriptstapeln, Komponenten, Slots, Validierung, Umgebungen… All dies macht den Ansichtscode wesentlich lesbarer und wartbarer als eine chaotische Mischung aus klassischem PHP mit echo und reinem HTML.
Grundlegende Blade-Syntax: echo, escape und verbatim
Die häufigste Operation in einer Ansicht ist die Anzeige von Daten. Um mit Blade den Inhalt einer Variablen auszugeben, verwenden Sie einfach die entsprechende Methode. {{ }}, was intern übersetzt wird in ein echo e($variable) und deshalb, HTML-Entitäten maskieren, um XSS zu verhindern:
Escape-Variablen anzeigen es ist so einfach wie:
{{ $name }}
Wenn Sie vorab generierten HTML-Code oder Inhalte anzeigen möchten, die nicht maskiert werden sollen (z. B. weil Sie die Kontrolle darüber haben und wissen, dass sie sicher sind), können Sie die folgende Syntax verwenden: {!! !!}Dadurch wird die automatische Escape-Sequenz deaktiviert und der Browser kann den Code unverändert interpretieren:
{!! $htmlSeguro !!}
Wenn Sie mit Frontend-Frameworks arbeiten, die ebenfalls Schlüssel verwenden (z. B. Vue oder eine clientseitige Template-Bibliothek), ermöglicht Ihnen Blade Folgendes: „entkommen“ dem eigenen Motor mit dem Präfix @. Auf diese Weise @{{ variableJavascript }} Es wird nicht als Blade-Ausdruck interpretiert, sondern bleibt im HTML-Code erhalten und wird vom Browser-Framework verarbeitet.
Wenn Sie große Blöcke haben, bei denen Sie die Doppelschlüssel vollständig berücksichtigen müssen, ohne dass Blade sie berührt, können Sie diese mit der Direktive umgeben. @verbatim … @endverbatimAlles im Inneren bleibt unberührt, was eine sehr nützliche Hilfe bei der Integration komplexer Frontend-Vorlagen darstellt.
Kontrollstrukturen: if, switch, Schleifen und die Variable $loop
Blade bietet ein komplettes Spiel Durchflusssteuerungsanweisungen Diese Tags kapseln die PHP-Syntax in einer lesbareren und einheitlicheren Form. In der Praxis ist die Logik nahezu identisch, aber Sie gewinnen an Übersichtlichkeit und vermeiden die übermäßige Verwendung von PHP-Tags innerhalb des HTML-Codes.
Die if-Anweisungen sind geschrieben mit @if, @elseif, @else und schließen mit @endifEs gibt auch Abkürzungen wie zum Beispiel @unless (Negation einer Bedingung), @isset um zu überprüfen, ob eine Variable definiert ist und @empty um zu überprüfen, ob es leer ist.
Für Szenarien mit mehreren möglichen Werten gilt die Direktive @schalten repliziert die PHP-Switch-Struktur mit @case, @break, @default und schließen mit @endswitch, wodurch mehrere Bedingungen ermöglicht werden, die leicht lesbar sind.
Was Schleifen betrifft, haben Sie @für, @für jede y @während, Plus @forelseDies ist sehr nützlich, wenn man eine Sammlung durchlaufen möchte, aber auch den Fall einer leeren Liste behandeln muss, ohne eine zusätzliche if-Anweisung schreiben zu müssen. @forelse ... @empty ... @endforelse Sie können alternativen Inhalt rendern, falls keine Elemente vorhanden sind.
Während Sie durch ein @für jedeBlade stellt Ihnen die Variable zur Verfügung. $loop, ein Objekt, das sehr nützliche Informationen über die aktuelle Iteration enthält: Index, ob es sich um den ersten oder letzten Durchlauf handelt, ob der Index gerade oder ungerade ist, die Gesamtzahl der Iterationen oder sogar Zugriff auf die übergeordnete Schleife im Falle verschachtelter Schleifen. $loop->parent.
Vorlagenvererbung, Layouts und Abschnitte
In realen Anwendungen möchte man Kopfzeilen, Menüs oder Fußzeilen nicht in jeder Ansicht wiederholen. Blade ermöglicht es Ihnen, eine Masterplan (typischerweise wird es gespeichert in) resources/views/layouts/master.blade.php) die alle Seiten erben. Innerhalb des Layouts definieren Sie "leere" Bereiche mit @yield und der Rest des gemeinsamen HTML-Codes bleibt unverändert.
Um dieses Layout in einer untergeordneten Ansicht zu verwenden, müssen Sie lediglich Folgendes angeben: @extends('layouts.master') und geben Sie die Abschnitte an, die Sie ausfüllen möchten, indem Sie @Abschnitt y @Endabschnitt. Jeder @yield('nombre') Der Masterabschluss entspricht einem @section('nombre') aus der Sicht der Tochter.
Ferner die Richtlinie @Elternteil Es ermöglicht Ihnen nicht nur, einen Abschnitt zu überschreiben, sondern Fügen Sie Inhalte oberhalb oder unterhalb dessen ein, was das Layout definiert.Dies ist sehr nützlich in Seitenleisten oder Blöcken, die Sie erweitern und nicht ersetzen möchten.
Wenn Sie wiederverwendbare HTML-Snippets ohne vollständige Vererbung einbinden müssen, bietet Blade die passende Lösung. @enthalten und eine ganze Reihe verwandter Richtlinien: @includeIf, @includeWhen, @includeUnless y @includeFirstdie es Ihnen ermöglichen, Unteransichten bedingt einzuschließen oder die erste in einer Liste möglicher Routen vorhandene Ansicht auszuwählen.
Für Fälle, in denen Sie ein kleines Fragment für jedes Element einer Sammlung wiederholen, die Direktive @jede Es kombiniert foreach + include in einer einzigen Zeile und kann sogar eine alternative Ansicht für den Fall definieren, dass die Sammlung leer ist.
Komponenten, Schlitze und Attribute der Klinge
Blade-Komponenten sind die natürliche Weiterentwicklung von Layouts und beinhalten: Sie ermöglichen es Ihnen, … wiederverwendbare Schnittstellenkomponenten (Schaltflächen, Warnmeldungen, Karten, Formulare…) mit eigener Logik, Eigenschaften und Slots mit Inhalten, die von außen eingefügt werden können, alles mit einer Syntax, die den Komponenten moderner JS-Frameworks sehr ähnlich ist.
Es gibt zwei Haupttypen von Komponenten: die klassenbasiert (befindet sich in app/View/Components, generiert mit php artisan make:component) und das anonymdie nur zu sehen sind in resources/views/components ohne zugehörige Klasse. In beiden Fällen werden sie in Ansichten mit Beschriftungen des Typs gerendert. <x-alert /> o <x-forms.input />.
Klassenbasierte Komponenten empfangen Daten über HTML-Attribute (Mit kebab-case in Sichtweite und camelCase im Konstruktor) werden in der Komponentenansicht als öffentliche Eigenschaften bereitgestellt und können eine Methode auswählen shouldRender() um bedingt zu entscheiden, ob sie angezeigt werden sollen.
Für flexible Inhalte bieten die Komponenten folgende Funktionen SlotsDer Hauptinhalt wird aufgerufen als $slot in der Komponentenvorlage und der Slots mit Namen werden definiert mit <x-slot name="titulo">...</x-slot> Bei der Verwendung der Komponente. Von innerhalb der Komponente können Sie Komponentenmethoden aufrufen über $component und sogar prüfen, ob ein Slot leer ist mit $slot->isEmpty() oder ob es echten Inhalt hat mit $slot->hasActualContent().
Die Komponenten verwalten außerdem auf elegante Weise die zusätzliche Attribute die nicht mit den Eigenschaften des Konstruktors übereinstimmen (zum Beispiel class, id, data-*All dies ist in einem leicht zugänglichen „Attribut-Bag“ gruppiert mit $attributesdie Sie entweder unverändert darstellen oder mit Methoden wie den folgenden bearbeiten können: merge(), class(), prepend(), filter(), whereStartsWith(), has() o get().
Darüber hinaus enthält Blade spezifische Direktiven für typisches Formular-HTML: @geprüft, @ausgewählt, @Behinderte, @readonly y @erforderlich, die das entsprechende Attribut nur dann ausgeben, wenn die ihnen übermittelte Bedingung als wahr ausgewertet wird.
Layouts mit Komponenten und klassischer Vererbung
In modernen Laravel-Versionen wird es immer üblicher, das globale Layout der Anwendung als ... zu definieren. Rotorblattkomponente (zum Beispiel, <x-layout>) anstatt nur die klassische Vererbung zu verwenden @extendsAuf diese Weise kann das Layout Slots, Attribute und Eigenschaften empfangen, genau wie die übrigen Komponenten.
Das typische Vorgehen besteht darin, eine Komponente zu erstellen. Layout mit php artisan make:component LayoutDefinieren Sie die grundlegende HTML-Struktur (Header, CSS-Links, Navigation, Footer) in Ihrer Vorlage und verwenden Sie {{ $slot }} um den Hauptinhalt einzufügen. Optional kann ein benannter Slot definiert werden. title sodass jede Seite ihren Titel in deklarativer Weise angibt.
Andererseits existiert die "klassische" Option weiterhin mit Vorlagenvererbung via @extends, @section y @yieldDies war vor der Verbreitung von Komponenten weit verbreitet. Sie können weiterhin beide Ansätze kombinieren, indem Sie für alles komponentenbasierte Layouts verwenden oder bei der traditionellen Vererbung bleiben, falls Ihr Projekt bereits so aufgebaut ist.
In beiden Fällen ist das Ziel dasselbe: Das HTML-Grundgerüst sollte nicht in jeder Ansicht wiederholt werden.Sorgen Sie für eine einheitliche Darstellung des Layouts und ermöglichen Sie es jeder Seite, sich ausschließlich auf ihren jeweiligen Inhalt zu konzentrieren.
Sitzung, Authentifizierung, Umgebung und Autorisierung in Blade
Blade integriert sich sehr gut in das restliche Framework, daher ist es nicht nur auf das Rendern von HTML beschränkt: Es bietet Ihnen auch Richtlinien auf hoher Ebene um mit der Sitzung, dem Authentifizierungssystem, der App-Umgebung und den Autorisierungsregeln zu interagieren.
Für den Authentifizierungsteil gibt es Direktiven wie beispielsweise @auth y @GastDiese Elemente zeigen ihren Inhalt nur an, wenn der Benutzer authentifiziert ist bzw. als Gast angemeldet ist. Zusätzlich können Sie eine bestimmte Schutzbedingung als Argument angeben, um den verwendeten Authentifizierungskontext genauer zu definieren.
Die Umweltrichtlinien als @production o @env('local') Sie ermöglichen es Ihnen, Teile der Ansicht abhängig von der aktuellen Laravel-Umgebung zu steuern. Dies ist beispielsweise sehr nützlich, um Banner, Debug-Protokolle oder Skripte nur in lokalen oder Testumgebungen anzuzeigen.
Bezüglich der Sitzung, die Richtlinie @Sitzung Dadurch lässt sich leicht überprüfen, ob ein Schlüssel in der Sitzung existiert, und falls ja, wird sein Wert über die Variable bereitgestellt. $ ValueDies löst auf elegante Weise den klassischen Fall von Blitzmeldungen oder Benachrichtigungen.
Für Richtlinien und Autorisierungsarten im Gate-Stil bietet Blade Folgendes: @dürfen, @kann nicht y @cananyDamit können Sie Schaltflächen, Links oder ganze Blöcke ein- oder ausblenden, je nachdem, ob der Benutzer die Berechtigung für eine bestimmte Aktion an einem Modell oder einer Klasse hat. Kombiniert mit @guest o @authSie ermöglichen den Aufbau wesentlich sichererer und übersichtlicherer Schnittstellen.
Formulare, Validierung und Fehlerbehandlung in Ansichten
Wenn man von statischen Ansichten zu Formularen wechselt, merkt man erst, wie praktisch Blade ist. Laravel erfordert das Einbinden einer CSRF-Token In allen Formularen, die Daten verändern, und um das manuelle Schreiben des versteckten Feldes zu vermeiden, gibt es die Direktive @csrf, wodurch die Eingabe mit dem entsprechenden Token generiert wird.
HTTP-Methoden wie z. B. PUT, PATCH oder DELETE Sie werden durch ein verstecktes Feld simuliert. _methodund Blade stellt es Ihnen zur Verfügung @method('PUT') (oder PATCH/DELETE), um es automatisch innerhalb des Formulars zu generieren.
Zeigen Validierungsfehler Die Richtlinie existiert @Fehlerwelches einem bestimmten Feld zugeordnet ist. Darin steht Ihnen die Variable zur Verfügung. $Nachricht mit dem Fehlertext. Da es sich tatsächlich um eine kompilierte if-Anweisung handelt, können Sie Folgendes verwenden: @else Alternativinhalte anzeigen, wenn kein Fehler vorliegt.
Das Objekt $errors Es ist stets in den Ansichten vorhanden und gruppiert alle Validierungsmeldungen für die aktuelle Anfrage. Es integriert sich nahtlos in den Helfer. old()Dadurch können Sie das Formular nach einem Validierungsfehler mit den vom Benutzer eingegebenen Werten „wieder auffüllen“, wobei die Einträge erhalten bleiben und die Fehler deutlich angezeigt werden.
Durch die Kombination dieser Direktiven mit Validierungsregeln in Controllern oder Formularanfragen erhalten Sie einen Ablauf von robuste serverseitige Validierung, ergänzend zur Kundenvalidierung und wesentlich sicherer gegen böswillige Manipulation.
Stacks in Blade: @stack, @push, @prepend und das hasStack-Konzept
Eine der weniger bekannten, aber äußerst nützlichen Funktionen von Blade für große Projekte ist... StapelnEin Stack ist im Grunde ein Stapel von Ansichtsfragmenten, zu dem man Inhalte aus untergeordneten Ansichten, Komponenten oder Includes hinzufügen und diese dann an einer bestimmten Stelle im Master-Layout zusammen rendern kann.
Richtlinie @stack('name') Es markiert den Speicherort, an dem alle zu diesem Stapel gehörenden Fragmente abgelegt werden. Von jeder anderen Ansicht aus können Sie jedoch Folgendes verwenden: @push('name') um Inhalte an das Ende des Stapels zu senden oder @prepend('name') Es wird an den Anfang gestellt. Dies wird häufig für Skripte und bestimmte Seitenstile verwendet.
Stellen Sie sich beispielsweise vor, dass Ihr Layout etwa Folgendes enthält: <head> und am Ende <body>:
@stack('styles')
...
@stack('scripts')
Dann, in einer spezifischen Ansicht, die eine benötigt Zusätzlicher JavaScript-CodeSie könnten Folgendes tun:
@push('scripts')
<script src="/js/pagina-especifica.js"></script>
@endpush
Dies ermöglicht das Layout Sie müssen nicht jede Schriftart oder jeden Stil jeder Seite kennen.Es definiert lediglich die Stacks, und die untergeordneten Ansichten sind diejenigen, die das benötigen, stapeln es. Es gibt auch @pushIf Inhalte basierend auf einer booleschen Bedingung einblenden, ohne die vollständige if-Anweisung schreiben zu müssen.
In diesem Kontext übersehen viele Entwickler einen @hasStack-Direktive oder Ähnliches Dadurch könnte man prüfen, ob ein bestimmter Stack Inhalt enthält, bevor er gerendert wird. Obwohl Blade standardmäßig keine Direktive mit diesem Namen bietet, ist die Idee klar: Man möchte beispielsweise festlegen können: „Wenn der Skript-Stack leer ist, werden keine zusätzlichen Labels ausgegeben“ oder „Wenn ein Metadaten-Stack Elemente enthält, werden diese in einen bestimmten Block eingeschlossen“.
Der Weg, um heute ein gleichwertiges Verhalten zu erreichen, ist Ergänzen Sie die Stack-Direktiven mit Logik im Layout oder mit benutzerdefinierten Hilfsfunktionen oder sogar mit unseren eigenen registrierten Direktiven über Blade::directive()Auf diese Weise kann eine hasStack-Direktive simuliert werden, die intern den Stack abfragt, bevor sie entscheidet, welches HTML generiert werden soll.
JSON, JavaScript und Hilfsdirektiven in Blade
In vielen Laravel-Views müssen Daten vom Backend an JavaScript übergeben werden. Typischerweise beinhaltet dies Folgendes: json_encode() Man kann zwar ein Array oder eine Sammlung in ein Inline-Skript einfügen, aber das ist nicht immer sicher oder praktisch. Laravel vereinfacht dies mit dem Helper. Js::from(), das PHP-Werte serialisiert und korrekt in JSON maskiert, um sie in HTML einzubetten.
Wenn Sie komplexe Daten im Browser darstellen, Js::from() Es umgeht Probleme mit Anführungszeichen oder Sonderzeichen und gibt einen Ausdruck zurück JSON.parse() Die Verwendung in Attributen oder Skripten ist unbedenklich. Die Übergabe komplexer Ausdrücke innerhalb der Direktive wird nicht empfohlen, da Blade intern reguläre Ausdrücke beim Kompilieren verwendet, was zu unerwarteten Fehlern führen kann.
Darüber hinaus ermöglicht Blade Ihnen die Definition von Vorlagenkommentare die nicht an das endgültige HTML gesendet werden (im Gegensatz zu klassischen HTML-Kommentaren) und Blöcke @php … @endphp Dort können Sie bei Bedarf kleine PHP-Codeabschnitte ausführen. Sie können sogar verwenden @verwenden Klassen in die Ansicht zu importieren oder ihnen Aliase zuzuweisen, ist praktisch, wenn man mit Hilfsfunktionen oder sehr spezifischen Komponenten arbeitet.
Wenn Sie an den Punkt gelangen, an dem Sie eine hochspezialisierte Echo-Funktionalität für bestimmte Objekte benötigen, können Sie sich registrieren. benutzerdefinierte Echo-Handler mit Blade::stringable()sodass Blade beim Ausgeben eines bestimmten Objekts Ihre Callback-Funktion anstelle der magischen Methode aufruft. __toString() der Klasse.
Fehleransichten, Fragmente und benutzerdefinierte Direktiven
Laravel ermöglicht Ihnen die Anpassung der Fehleransichten: Erstellen Sie einfach Dateien in resources/views/errors mit dem HTTP-Code als Namen (zum Beispiel, 404.blade.php o 500.blade.phpBei jedem Auftreten dieses Fehlers wird Ihre Vorlage anstelle der generischen Vorlage des Frameworks verwendet.
Für Fälle, in denen Sie mit Tools wie Turbo oder htmx arbeiten und einfach nur zurückgeben möchten spezifische Fragmente einer AnsichtBlade bietet die Richtlinien an @fragment … @endfragment kombiniert mit Methoden wie view('...')->fragment('nombre'), fragmentIf(), fragments() y fragmentsIf()Auf diese Weise können Sie dieselbe gesamte Vorlage wiederverwenden und je nach Kontext nur die benötigten Teile extrahieren.
Sollte Ihnen das Repertoire an Direktiven nicht ausreichen, können Sie jederzeit Ihre eigenen erstellen mit Blade::directive()Üblicherweise werden sie mit der Methode registriert. boot() de AppServiceProvider oder über einen dedizierten Anbieter. Der Blade-Compiler übergibt Ihnen den Ausdruck innerhalb der Direktive als Zeichenkette, und Sie geben den PHP-Code zurück, der bei der Kompilierung generiert werden soll.
Für einfache, individuelle Anpassungen gibt es auch Blade::if()Dadurch werden bedingte Anweisungen in einer einzigen Zeile erstellt. Zum Beispiel könnten Sie definieren @disk('s3') um zu prüfen, ob die Standardfestplatte der App S3 ist, und diese dann in jeder Ansicht so zu verwenden, als wäre sie eine native Direktive.
Mit diesem Arsenal können Sie zusammenbauen eine auf Ihre Bedürfnisse zugeschnittene Vorlagenspracheeinschließlich einer hasStack-Direktive, falls gewünscht, die als syntaktischer Zucker für die Logik dient, die intern prüft, ob ein Stack Inhalt hat oder nicht, bevor er ausgegeben wird.
Die umfassende Beherrschung von Blade – von der grundlegenden Syntax bis hin zu fortgeschrittenen Komponenten, Autorisierungsanweisungen, Validierung, Umgebungen und insbesondere Stack-Management – ermöglicht es Ihnen, Ansichten zu erstellen. modular, sicher, zuverlässig und wartungsarmEine zukünftige Direktive wie hasStack würde sich hier natürlich einfügen, um die Kontrolle darüber, was in die einzelnen Bereiche Ihres Layouts eingefügt wird, weiter abzurunden.
Inhaltsverzeichnis
- Was ist Blade und warum ist es so wichtig, seine Anweisungen zu verstehen?
- Grundlegende Blade-Syntax: echo, escape und verbatim
- Kontrollstrukturen: if, switch, Schleifen und die Variable $loop
- Vorlagenvererbung, Layouts und Abschnitte
- Komponenten, Schlitze und Attribute der Klinge
- Layouts mit Komponenten und klassischer Vererbung
- Sitzung, Authentifizierung, Umgebung und Autorisierung in Blade
- Formulare, Validierung und Fehlerbehandlung in Ansichten
- Stacks in Blade: @stack, @push, @prepend und das hasStack-Konzept
- JSON, JavaScript und Hilfsdirektiven in Blade
- Fehleransichten, Fragmente und benutzerdefinierte Direktiven