close

Erstellen von Layouts mit Laravel- Erstellen flexibler und wartbarer Schnittstellen

Das Laravel Layout spielt eine wichtige Rolle beim Aufbau der Benutzeroberfläche einer Webanwendung. Ein Layout stellt die Gesamtstruktur einer Webseite dar, einschließlich allgemeiner Abschnitte wie header, footer  und sidebar. In diesem Artikel erfahren Sie, wie Sie Layouts erstellen, Laravel um flexible und wartbare Schnittstellen zu erstellen.

Lassen Sie uns zunächst ein grundlegendes Layout für unsere Website erstellen. Erstellen Sie zunächst eine Datei mit dem Namen app.blade.php im Verzeichnis. Diese Datei dient als Hauptlayout für die gesamte Website. resources/views/layouts

Hier ist ein Beispielinhalt für die app.blade.php Datei:

<!DOCTYPE html>  
<html>  
<head>  
    <title>@yield('title')</title>  
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">  
</head>  
<body>  
    <header>  
        <h1>Header</h1>  
    </header>  
  
    <nav>  
        <ul>  
            <li><a href="/">Home</a></li>  
            <li><a href="/about">About</a></li>  
            <li><a href="/contact">Contact</a></li>  
        </ul>  
    </nav>  
  
    <main>  
        @yield('content')  
    </main>  
  
    <footer>  
        <p>Footer</p>  
    </footer>  
  
    <script src="{{ asset('js/app.js') }}"></script>  
</body>  
</html>

In diesem Layout verwenden wir die @yield Direktiven, um dynamische Abschnitte innerhalb des Layouts zu definieren. Ermöglicht beispielsweise @yield('title') dem Kind, den Seitentitel zu überschreiben und festzulegen. Ebenso ermöglicht es dem Kind, den Hauptinhalt der Seite einzufügen. views @yield('content') views

Sobald das Layout erstellt ist, können wir untergeordnete Elemente erstellen, die dieses Layout verwenden. Um beispielsweise eine Seite mit einem ähnlichen Layout zu erstellen, erstellen Sie eine Datei mit dem Namen im Verzeichnis. Diese Datei erweitert das  Layout und definiert spezifische Inhalte für die Seite: views about about.blade.php resources/views app.blade.php about 

@extends('layouts.app')  
  
@section('title', 'About')  
  
@section('content')  
    <h2>About Page</h2>  
    <p>This is the about us page.</p>  
@endsection

Im obigen Beispiel verwenden wir die @extends Direktive, um das app.blade.php  Layout zu erben. Als nächstes verwenden wir die Direktive, um den spezifischen Inhalt für die Abschnitte  und  der Seite @section zu definieren. title content

Schließlich müssen wir die Routen definieren, um die URLs mit den jeweiligen zu verknüpfen. views

In der Datei können Sie beispielsweise routes/web.php  die folgenden Routen hinzufügen:

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

In diesem Beispiel ist die „/“-URL mit verknüpft welcome.blade.php view, während die /about URL mit verknüpft ist about.blade.php view.

Zusammenfassend Laravel lässt sich sagen, dass Sie durch das Erstellen von Layouts eine gemeinsame Schnittstelle für Ihre Webanwendung erstellen und gemeinsame Abschnitte wie header, footer und verwalten können sidebar. Durch die Verwendung von Layouts und untergeordneten Elementen können Sie flexible und wartbare Schnittstellen erstellen. views Laravel