Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Макеты (Layout) PHP: Разработка на Laravel

Каждая страница любого сайта содержит свое собственное содержимое и общие части, такие как футер или боковое меню. Существует два подхода по работе с этими общими частями.

Включение

До эры фреймворков фактически был ровно один способ выделять общие части. Он сводился к созданию двух шаблонов: хедера (шапка сайта) и футера (подвал). Затем эти шаблоны включались во всех остальных шаблонах, отвечающих за основную часть страницы. Выглядело это так:

<?= include('header.php'); ?>

<div id="page-content">
    <!-- Тут основная часть -->
</div>

<?= include('footer.php'); ?>

Такой подход все еще популярен в самописных решениях и в популярных CMS. Где-то в силу исторических причин, где-то потому, что его очень просто понять и начать использовать.

С другой стороны, у такого подхода слишком много недостатков, из-за которых фреймворки отказались от него:

  • Футер и хедер хранят куски кода, которые сами по себе не являются правильным HTML: в хедере — открывающие теги, в футере — закрывающие. Из-за этого крайне легко ошибиться и потом долго искать незакрытый тег.
  • Страница, разбитая на хедер и футер, не дает увидеть всю картину целиком. Придется скакать туда-сюда для понимания того, что из себя представляет страница.
  • Появляется очень много дублирования из-за постоянных вставок хедера и футера
  • Все сильно усложняется, если хедеры и футеры разные
  • Невозможно обработать ситуацию, когда страницы имеют более сложное разбиение и включение хедера и футера не поможет.

Макеты

Это совершенно другой подход при работе с шаблонами. Он строится не от шаблона конкретного обработчика (экшена), а от макета. Макет – это базовая структура страницы, в которую вставляются данные, сгенерированные конкретным обработчиком. Для работы макетов недостаточно стандартных PHP-файлов с HTML разметкой. Разработчикам шаблонизаторов приходится придумывать специальные маркеры, которые указывают, куда и какой блок можно поместить.

В Laravel используется шаблонизатор Blade. Фактически, Blade это свой собственный язык, с помощью которого создаются шаблоны. Blade-специфичные команды в шаблонах начинаются со знака @ и называются директивами. Большинство директив похожи на вызов функций, в которые передаются аргументы.

<!-- Хранится в resources/views/layouts/app.blade.php -->
<html>
    <head>
        <title>Hexlet Blog - @yield('title')</title>
    </head>
    <body>
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

В макете выше используется директива @yield. Она указывает на то, куда будет вставлен контент конкретного обработчика.

В шаблоне самого обработчика, используется директива @section, которая определяет блок контента. Каждый такой блок имеет собственное имя, что позволяет одновременно делать вставку сразу множества блоков. Это особенно удобно для сложных макетов, где кроме самого контента, есть и другие блоки, специфичные для конкретных страниц.

<!-- Хранится в resources/views/about.blade.php -->

@extends('layouts.app')

<!-- Секция, содержимое которой обычный текст. -->
@section('title', 'О блоге')

<!-- Секция, содержащая HTML блок. Имеет открывающую и закрывающую часть. -->
@section('content')
    <h1>О блоге</h1>
    <p>Эксперименты с Laravel на Хекслете</p>
@endsection

Директива @extends указывает на макет, внутрь которого должны попасть данные из текущего шаблона. В эту директиву передается путь относительно директории resources/views. Обратите внимание, что вместо / используется точка.

Далее идут секции. У каждой секции есть имя, благодаря которому можно точечно управлять местом ее отображения. Выше создаются две секции content и title. Одна из них отображается в теге <title>, другая внутри <body> и является центральной контентной частью страницы.

Имена выбираются произвольно. Количество секций не ограничено. Количество макетов тоже.

Несмотря на наличие макетов, иногда бывает полезно иметь общий шаблон, который вставляется в конкретных местах. Blade позволяет создавать и включать такие шаблоны с помощью директивы @include:

<html>
    <head>
        <title>Hexlet Blog - @yield('title')</title>
        @include('shared.metatags')
    </head>
    <body>
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Код, подобный, тому что выше, часто встречается в тех проектах где несколько макетов. Как правило, их общие части выносят в общие шаблоны, которые затем включаются через @include. Хорошей практикой считается помещать общие шаблоны в директорию resources/views/shared. Так легче понять какие шаблоны можно переиспользовать.


Самостоятельная работа

  1. Создайте макет resources/views/layouts/app.blade.php со следующим содержимым:

    <!doctype html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Hexlet Blog - @yield('title')</title>
            <meta name="csrf-token" content="{{ csrf_token() }}">
            <meta name="csrf-param" content="_token" />
            <link href="{{ asset('css/app.css') }}" rel="stylesheet">
            <script src="{{ asset('js/app.js') }}"></script>
        </head>
        <body>
            <div class="container mt-4">
                <h1>@yield('header')</h1>
                <div>
                    @yield('content')
                </div>
            </div>
        </body>
    </html>
    
  2. Переделайте шаблон about.blade.php так, как показано в уроке (возможно понадобится почистить кеш с помощью php artisan view:clear).

  3. Прочитайте про CSRF.

  4. Зафиксируйте изменения в git (дальше этот пункт повторяться не будет. Не забывайте фиксировать любые изменения в git)


Дополнительные материалы

  1. Документация Blade

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 25 000 ₸ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 21 ноября

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»