Каждая страница любого сайта, содержит своё собственное содержимое и общие части, такие как футер или боковое меню. Существует два подхода по работе с этими общими частями.
До эры фреймворков фактически был ровно один способ выделять общие части. Он сводился к созданию двух шаблонов: хедера (шапка сайта) и футера (подвал). Затем эти шаблоны включались во всех остальных шаблонах, отвечающих за основную часть страницы. Выглядело это так:
<?= include('header.php'); ?>
<div id="page-content">
<!-- Тут основная часть -->
</div>
<?= include('footer.php'); ?>
Такой подход все ещё популярен в самописных решениях и в популярных CMS. Где-то в силу исторических причин, где-то потому, что его очень просто понять и начать использовать.
С другой стороны, у такого подхода слишком много недостатков, из-за которых фреймворки отказались от него:
Это совершенно другой подход при работе с шаблонами. Он строится не от шаблона конкретного обработчика (экшена), а от макета. Макет – это базовая структура страницы, в которую вставляются данные, сгенерированные конкретным обработчиком. Для работы макетов недостаточно стандартных 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. Так легче понять какие шаблоны можно переиспользовать.
Создайте макет 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>
Переделайте шаблон about.blade.php так, как показано в уроке (возможно понадобится почистить кеш с помощью php artisan view:clear
).
Прочитайте про CSRF.
Зафиксируйте изменения в git (дальше этот пункт повторяться не будет. Не забывайте фиксировать любые изменения в git)
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Статья «Ловушки обучения»
Вебинар «Как самостоятельно учиться»
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт