close

Bygga layouter med Laravel- Skapa flexibla och underhållbara gränssnitt

I Laravel, spelar layout en viktig roll för att bygga användargränssnittet för en webbapplikation. En layout representerar den övergripande strukturen för en webbsida, inklusive vanliga avsnitt som header, footer  och sidebar. I den här artikeln kommer vi att utforska hur man bygger in layouter Laravel för att skapa flexibla och underhållbara gränssnitt.

Låt oss först skapa en grundläggande layout för vår webbplats. Börja med att skapa en fil som heter app.blade.php i katalogen. Den här filen kommer att fungera som huvudlayout för hela webbplatsen. resources/views/layouts

Här är ett exempel på innehåll för app.blade.php filen:

<!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>

I denna layout använder vi @yield direktiven för att definiera dynamiska sektioner i layouten. Låter till exempel @yield('title') barnet åsidosätta och ställa in sidtiteln. På samma sätt låter barnet infoga huvudinnehållet på sidan. views @yield('content') views

När layouten har skapats kan vi skapa barn som använder denna layout. För att till exempel skapa en sida med en liknande layout, skapa en fil som heter i katalogen. Den här filen utökar  layouten och definierar specifikt innehåll för sidan: 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

I exemplet ovan använder vi @extends direktivet för att ärva app.blade.php  layouten. Därefter använder vi @section direktivet för att definiera det specifika innehållet för title  och content  avsnitten på sidan.

Slutligen måste vi definiera rutter för att länka webbadresserna till respektive. views

Till exempel, i routes/web.php  filen kan du lägga till följande rutter:

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

I det här exemplet är "/"-URL:n länkad till welcome.blade.php view, medan /about URL:en är länkad till about.blade.php view.

Sammanfattningsvis, genom att bygga layouter Laravel kan du skapa ett delat gränssnitt för din webbapplikation och hantera vanliga sektioner som header, footer och sidebar. Genom att använda layouter och barn kan du bygga flexibla och underhållbara gränssnitt i. views Laravel