close

Создание макетов с помощью Laravel — создание гибких и удобных в обслуживании интерфейсов

В Laravel, макет играет важную роль в создании пользовательского интерфейса для веб-приложения. Макет представляет собой общую структуру веб-страницы, включая общие разделы header, такие как footer  и sidebar. В этой статье мы рассмотрим, как встраивать макеты Laravel для создания гибких и удобных в сопровождении интерфейсов.

Во-первых, давайте создадим базовый макет для нашего сайта. Начните с создания файла с именем app.blade.php в каталоге. Этот файл будет служить основным макетом для всего веб-сайта. resources/views/layouts

Вот пример содержимого файла 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>

В этом макете мы используем @yield директивы для определения динамических разделов в макете. Например, @yield('title') позволяет ребенку переопределять и устанавливать заголовок страницы. Точно так же позволяет ребенку вставлять основное содержимое страницы. views @yield('content') views

Как только макет создан, мы можем создать дочерний элемент, который будет использовать этот макет. Например, чтобы создать страницу с похожим макетом, создайте файл с именем в каталоге. Этот файл расширит  макет и определит конкретное содержимое страницы: 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

В приведенном выше примере мы используем @extends директиву для наследования app.blade.php  макета. Затем мы используем @section директиву, чтобы определить конкретное содержимое для разделов title  и content  страницы.

Наконец, нам нужно определить маршруты, чтобы связать URL-адреса с соответствующим файлом. views

Например, в routes/web.php  файл можно добавить следующие маршруты:

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

В этом примере URL-адрес «/» welcome.blade.php view связан /about с about.blade.php view.

В заключение, построение макетов Laravel позволяет вам создать общий интерфейс для вашего веб-приложения и управлять общими разделами, такими как header, footer и sidebar. Используя макеты и дочерние элементы, вы можете создавать гибкие и удобные в сопровождении интерфейсы в. views Laravel