suchen

Heim >Backend-Entwicklung >PHP-Tutorial >Holen Sie das Beste aus der Templating-Engine von Blade: Laravel heraus

Holen Sie das Beste aus der Templating-Engine von Blade: Laravel heraus

Patricia Arquette
Patricia ArquetteOriginal
2024-11-16 11:31:03214Durchsuche

Was ist eine Templating-Engine?

Eine Template-Engine ist wie ein Tool, das Ihnen hilft, Ihren Inhalt und Ihr Layout voneinander zu trennen. Dadurch wird Ihr Code sauberer und einfacher zu verwalten. Anstatt HTML mit Ihren Daten zu mischen, erstellen Sie Vorlagen, die definieren, wie Ihre Inhalte aussehen sollen, und die Engine übernimmt das Ausfüllen der Details.

Was ist Blade?

Blade ist Laravels eigene Template-Engine und wurde entwickelt, um Ihnen das Leben zu erleichtern. Blade-Vorlagen werden im Verzeichnis resources/views gespeichert und haben jeweils die Erweiterung .blade.php. Die Syntax ist einfach und klar, sodass Sie HTML mühelos mit PHP kombinieren können. Zum Beispiel:

<h1>Hello, {{ $name }}!</h1>

Aber Blade dient nicht nur der Anzeige von Daten. Sie können Ihren Vorlagen auch Logik wie Schleifen und Bedingungen hinzufügen. Hier ist ein Beispiel:

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

Sehen Sie, wie einfach es ist, unterschiedliche Inhalte anzuzeigen, je nachdem, ob ein Benutzer angemeldet ist? Wenn Sie das nächste Mal eine Benutzerliste durchlaufen müssen, versuchen Sie es mit der @foreach-Direktive von Blade. Es ist unkompliziert und sorgt für Ordnung in Ihrem Code.

Get The Most From Blade: Laravel

Vorlagenvererbung

Eine der besten Funktionen von Blade ist die Möglichkeit, Layouts wiederzuverwenden. Sie können eine Mastervorlage für Ihre Website erstellen und dann einfach den einzigartigen Inhalt für jede Seite eingeben. Hier ist ein einfaches Beispiel:

<!-- layout.blade.php -->
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <div>



<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>

<pre class="brush:php;toolbar:false">@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h1>Welcome to the Home Page!</h1>
@endsection

Durch die Verwendung von @extends verlinken Sie auf das Layout und mit @section können Sie die Platzhalter mit Ihrem spezifischen Inhalt füllen. Dadurch bleibt Ihr Code trocken (Don't Repeat Yourself) und super verwaltbar. Blade vereinfacht Ihren Arbeitsablauf, sodass Sie sich mehr auf das Wesentliche konzentrieren können – die Entwicklung großartiger Webanwendungen.

Get The Most From Blade: Laravel

Klingenkomponenten

Blade-Komponenten sind wie kleine Bausteine ​​für Ihre Benutzeroberfläche. Stellen Sie sie sich als Legostücke vor – Sie erstellen einen kleinen, wiederverwendbaren Teil Ihrer Schnittstelle und können ihn überall dort einrasten lassen, wo Sie ihn benötigen. Dadurch wird Ihr Code sauberer und wartbarer.

Sie können eine Komponente einmal definieren und sie in Ihrer gesamten Anwendung verwenden. Benötigen Sie eine Schaltfläche, die auf verschiedenen Seiten gleich aussieht? Erstellen Sie eine Blade-Komponente dafür! Noch besser: Sie können diesen Komponenten Attribute übergeben, um sie flexibel und anpassungsfähig zu machen.

Hier ist ein einfaches Beispiel einer Schaltflächenkomponente:

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

Sie können Ihre Komponenten dynamisch machen, indem Sie eine Komponentenklasse verwenden. Dadurch können Sie Attribute wie Typ oder Klasse übergeben, um das Verhalten oder den Stil der Schaltfläche anzupassen.

// In a component class
public function render()
{
    return view('components.button', [
        'type' => $this->type,
        'class' => $this->class,
    ]);
}

// In the Blade component
<button type="{{ $type }}">



<h2>
  
  
  Including Subviews
</h2>

<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg" alt="Get The Most From Blade: Laravel&#s Templating Engine" /></p>

<h2>
  
  
  Blade Directives
</h2>

<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>

<pre class="brush:php;toolbar:false"><form action="/submit" method="POST">
    @csrf
    @method('PUT')
    <button type="submit">Submit</button>
</form>

Benötigen Sie etwas individuelleres? Sie können Ihre eigenen Blade-Anweisungen für wiederverwendbare Logik erstellen.

Angenommen, Sie müssen häufig Datumsangaben formatieren. Sie können eine benutzerdefinierte Direktive wie folgt definieren:

<h1>Hello, {{ $name }}!</h1>

Get The Most From Blade: Laravel

Weitere Funktionen

Blade verfügt über einige wirklich praktische Funktionen, die Ihr Leben als Entwickler einfacher machen. Lassen Sie uns auf einige davon eingehen.

Asset-URLs verwalten

Müssen Sie Ihre CSS- oder JavaScript-Dateien verlinken? Mit der Hilfsfunktion asset() sind Sie bestens gerüstet. Es generiert die richtige URL für Ihre Assets, sodass Sie sich keine Gedanken über Pfade machen müssen:

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

Umgang mit leeren Arrays oder Sammlungen

Blades @forelse-Direktive ist ein Lebensretter beim Umgang mit leeren Arrays oder Sammlungen. Damit können Sie Elemente durchlaufen und auch den Fall handhaben, dass keine Elemente vorhanden sind:

<!-- layout.blade.php -->
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <div>



<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>

<pre class="brush:php;toolbar:false">@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h1>Welcome to the Home Page!</h1>
@endsection

Bedingte Inhaltsanzeige

Blade bietet mehrere Anweisungen zum Anzeigen von Inhalten basierend auf Bedingungen:

@isset: prüft, ob eine Variable gesetzt ist
@empty: prüft, ob eine Variable leer ist
@unless: funktioniert wie if, aber umgekehrt
Hier ist ein Beispiel mit @isset:

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

Schutz vor XSS

Blade maskiert die Ausgabe automatisch, um Ihre App vor XSS-Angriffen (Cross-Site Scripting) zu schützen. Aber manchmal möchten Sie vielleicht rohes HTML ausgeben. Verwenden Sie in diesem Fall {!! !!}:

// In a component class
public function render()
{
    return view('components.button', [
        'type' => $this->type,
        'class' => $this->class,
    ]);
}

// In the Blade component
<button type="{{ $type }}">



<h2>
  
  
  Including Subviews
</h2>

<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg" alt="Get The Most From Blade: Laravel&#s Templating Engine" /></p>

<h2>
  
  
  Blade Directives
</h2>

<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>

<pre class="brush:php;toolbar:false"><form action="/submit" method="POST">
    @csrf
    @method('PUT')
    <button type="submit">Submit</button>
</form>

Get The Most From Blade: Laravel

Erweiterte Verwendung

Müssen Sie rohes HTML oder JavaScript einbinden, das Blade-Syntax enthält? Verwenden Sie die @verbatim-Direktive, um Blade daran zu hindern, es zu analysieren:

// In a service provider
Blade::directive('datetime', function ($expression) {
    return "<?php echo ($expression)->format('Y-m-d H:i:s'); ?>";
});

// Usage in Blade
@datetime($dateVariable)

Mit APIs arbeiten? Blade macht es einfach, JSON-Daten direkt in Ihren Vorlagen zu rendern:

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Wenn Sie Livewire verwenden, arbeitet Blade nahtlos damit zusammen. Sie können Blade-Komponenten neben Livewire-Komponenten für eine dynamische, interaktive Benutzeroberfläche verwenden, ohne viel JavaScript schreiben zu müssen.

Die @once-Direktive stellt sicher, dass ein Codeblock nur einmal ausgeführt wird. Mit Blade können Sie dynamische Komponenten erstellen, die sich basierend auf den von Ihnen übergebenen Daten anpassen. Dies eignet sich hervorragend für flexible, wiederverwendbare UI-Teile:

@forelse ($items as $item)
    <p>{{ $item }}</p>
@empty
    <p>No items found.</p>
@endforelse

Mit der @error-Direktive können Sie ganz einfach Fehlermeldungen für bestimmte Felder anzeigen:

@isset($variable)
    <p>{{ $variable }}</p>
@endisset

Als ich anfing, Blade zu nutzen, war ich ein wenig verwirrt darüber, wie viele Möglichkeiten ich habe, aber schon bald öffnete sich für mich eine ganze Welt. Jetzt kann ich mir das Codieren ohne seine vielseitigen Funktionen nicht mehr vorstellen. Ich hoffe, dieser Artikel hat Ihnen dabei geholfen, den Einstieg in diese erstaunliche Template-Engine zu finden.

Das obige ist der detaillierte Inhalt vonHolen Sie das Beste aus der Templating-Engine von Blade: Laravel heraus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript laravel json css html xss define if for foreach format include try Directory Error using class Interface Conditional function this display ui
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie behebe ich den Fehler „Keine Eingabedatei angegeben“ im Anchor CMS auf GoDaddy?Nächster Artikel：Wie behebe ich den Fehler „Keine Eingabedatei angegeben“ im Anchor CMS auf GoDaddy?

In Verbindung stehende Artikel

Mehr sehen