close

Crearea layout-urilor cu Laravel- Crearea de interfețe flexibile și întreținute

În Laravel, aspectul joacă un rol semnificativ în construirea interfeței cu utilizatorul pentru o aplicație web. Un aspect reprezintă structura generală a unei pagini web, inclusiv secțiuni comune precum header, footer  și sidebar. În acest articol, vom explora cum să construim layout-uri pentru Laravel a crea interfețe flexibile și ușor de întreținut.

În primul rând, să creăm un aspect de bază pentru site-ul nostru. Începeți prin a crea un fișier numit app.blade.php în director. Acest fișier va servi ca aspect principal pentru întregul site web. resources/views/layouts

Iată un exemplu de conținut pentru app.blade.php fișier:

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

În acest aspect, folosim @yield directivele pentru a defini secțiuni dinamice în cadrul layout-ului. De exemplu, @yield('title') permite copilului să înlocuiască și să stabilească titlul paginii. În mod similar, permite copilului să insereze conținutul principal al paginii. views @yield('content') views

Odată ce aspectul este creat, putem crea copii care utilizează acest aspect. De exemplu, pentru a crea o pagină cu un aspect similar, creați un fișier numit în director. Acest fișier va extinde  aspectul și va defini conținut specific pentru pagină: 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

În exemplul de mai sus, folosim @extends directiva pentru a moșteni app.blade.php  aspectul. Apoi, folosim @section directiva pentru a defini conținutul specific pentru secțiunile title  și content  ale paginii.

În cele din urmă, trebuie să definim rutele pentru a lega URL-urile la respectivul. views

De exemplu, în routes/web.php  fișier, puteți adăuga următoarele rute:

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

În acest exemplu, adresa URL „/” este legată de welcome.blade.php view, în timp ce /about adresa URL este legată de about.blade.php view.

În concluzie, construirea machetelor în Laravel vă permite să creați o interfață partajată pentru aplicația dvs. web și să gestionați secțiuni comune precum header, footer și sidebar. Folosind layout-uri și child, puteți construi interfețe flexibile și ușor de întreținut în. views Laravel