close

Lay-outs bouwen met Laravel- Flexibele en onderhoudbare interfaces creëren

In Laravel speelt lay-out een belangrijke rol bij het bouwen van de gebruikersinterface voor een webtoepassing. Een lay-out vertegenwoordigt de algehele structuur van een webpagina, inclusief algemene secties zoals de header, footer  en sidebar. In dit artikel zullen we onderzoeken hoe u lay-outs kunt inbouwen Laravel om flexibele en onderhoudbare interfaces te creëren.

Laten we eerst een basislay-out voor onze website maken. Begin met het maken van een bestand met de naam app.blade.php in de map. Dit bestand zal dienen als hoofdopmaak voor de gehele website. resources/views/layouts

Hier is een voorbeeldinhoud voor het app.blade.php bestand:

<!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 deze lay-out gebruiken we de @yield richtlijnen om dynamische secties binnen de lay-out te definiëren. @yield('title') Hiermee kan het kind bijvoorbeeld de paginatitel overschrijven en instellen. Op dezelfde manier kan het kind de hoofdinhoud van de pagina invoegen. views @yield('content') views

Zodra de lay-out is gemaakt, kunnen we kinderen maken die deze lay-out gebruiken. Om bijvoorbeeld een pagina met een vergelijkbare lay-out te maken, maakt u een bestand met de naam in de directory. Dit bestand breidt de  lay-out uit en definieert specifieke inhoud voor de pagina: 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

In het bovenstaande voorbeeld gebruiken we de @extends richtlijn om de app.blade.php  lay-out over te nemen. Vervolgens gebruiken we de richtlijn om de specifieke inhoud voor de secties  en  van de pagina @section te definiëren. title content

Ten slotte moeten we de routes definiëren om de URL's te koppelen aan de respectieve. views

In het bestand kun je bijvoorbeeld routes/web.php  de volgende routes toevoegen:

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

In dit voorbeeld is de "/" URL gekoppeld aan de welcome.blade.php view, terwijl de /about URL is gekoppeld aan de about.blade.php view.

Concluderend, door lay-outs in te bouwen, Laravel kunt u een gedeelde interface voor uw webtoepassing maken en gemeenschappelijke secties beheren, zoals de header, footer en sidebar. Door lay-outs en child te gebruiken, kunt u flexibele en onderhoudbare interfaces bouwen in. views Laravel