close

Układy budynków z Laravel- Tworzenie elastycznych i łatwych w utrzymaniu interfejsów

W Laravel programie układ odgrywa znaczącą rolę w budowaniu interfejsu użytkownika dla aplikacji internetowej. Układ reprezentuje ogólną strukturę strony internetowej, w tym wspólne sekcje, takie jak header, footer  i sidebar. W tym artykule przyjrzymy się, jak budować układy w Laravel celu tworzenia elastycznych i łatwych w utrzymaniu interfejsów.

Najpierw stwórzmy podstawowy układ naszej strony internetowej. Zacznij od utworzenia pliku o nazwie app.blade.php w katalogu. Ten plik posłuży jako główny układ całej strony. resources/views/layouts

Oto przykładowa zawartość pliku 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>

W tym układzie używamy @yield dyrektyw do definiowania sekcji dynamicznych w układzie. Na przykład @yield('title') pozwala dziecku zastąpić i ustawić tytuł strony. Podobnie pozwala dziecku wstawić główną treść strony. views @yield('content') views

Po utworzeniu układu możemy utworzyć element potomny, który będzie korzystał z tego układu. Na przykład, aby utworzyć stronę o podobnym układzie, utwórz plik o nazwie w katalogu. Ten plik rozszerzy  układ i zdefiniuje określoną zawartość strony: 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

W powyższym przykładzie używamy @extends dyrektywy do dziedziczenia app.blade.php  układu. Następnie używamy @section dyrektywy do zdefiniowania konkretnej treści dla sekcji title  i content  na stronie.

Na koniec musimy zdefiniować trasy, aby połączyć adresy URL z odpowiednimi plikami. views

Na przykład w routes/web.php  pliku możesz dodać następujące trasy:

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

W tym przykładzie adres URL „/” jest połączony z welcome.blade.php view, podczas gdy /about adres URL jest połączony z about.blade.php view.

Podsumowując, budowanie układów w Laravel umożliwia tworzenie współdzielonego interfejsu dla aplikacji internetowej i zarządzanie wspólnymi sekcjami, takimi jak header, footer i sidebar. Korzystając z układów i elementów podrzędnych, można tworzyć elastyczne i łatwe w utrzymaniu interfejsy w programie. views Laravel