close

Opbygning af layouts med Laravel- Oprettelse af fleksible og vedligeholdelige grænseflader

I Laravel, spiller layout en væsentlig rolle i opbygningen af ​​brugergrænsefladen til en webapplikation. Et layout repræsenterer den overordnede struktur af en webside, inklusive almindelige sektioner som header, footer  og sidebar. I denne artikel vil vi undersøge, hvordan man bygger layouts ind Laravel for at skabe fleksible og vedligeholdelige grænseflader.

Lad os først oprette et grundlæggende layout til vores hjemmeside. Start med at oprette en fil med navn app.blade.php i mappen. Denne fil vil fungere som hovedlayoutet for hele webstedet. resources/views/layouts

Her er et eksempel på indhold til filen app.blade.php:

<!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 dette layout bruger vi direktiverne @yield til at definere dynamiske sektioner i layoutet. Giver f.eks. @yield('title') barnet mulighed for at tilsidesætte og indstille sidetitlen. Tillader på samme måde barnet at indsætte hovedindholdet på siden. views @yield('content') views

Når layoutet er oprettet, kan vi oprette børn, der bruger dette layout. For at oprette en side med et lignende layout, skal du oprette en fil med navn i mappen. Denne fil vil udvide  layoutet og definere specifikt indhold for siden: 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 ovenstående eksempel bruger vi direktivet @extends til at arve app.blade.php  layoutet. Dernæst bruger vi @section direktivet til at definere det specifikke indhold for title  og content  sektioner af siden.

Til sidst skal vi definere ruterne for at linke URL'erne til de respektive. views

For eksempel routes/web.php  kan du tilføje følgende ruter i filen:

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

I dette eksempel er "/" URL'en knyttet til welcome.blade.php view, mens /about URL'en er knyttet til about.blade.php view.

Afslutningsvis giver bygningslayouts Laravel dig mulighed for at oprette en delt grænseflade til din webapplikation og administrere almindelige sektioner som header, footer og sidebar. Ved at bruge layout og underordnet kan du bygge fleksible og vedligeholdelige grænseflader i. views Laravel