Карта сайта

Урок 4: Шаблонизатор Blade в Laravel

/Уроки по Laravel/Урок 4: Шаблонизатор Blade в Laravel
Урок 4: Шаблонизатор Blade в Laravel
Автор: написал в рубрике Уроки по Laravel. 0 Комментариев.

В 4-ом уроке мы продолжим погружаться в Laravel, я расскажу о Blade. Это мощный шаблонизатор, который делает работу с HTML в Laravel невероятно удобной и гибкой. Blade позволяет создавать чистые, структурированные шаблоны, избегая дублирования кода. Мы разберем синтаксис, наследование шаблонов, директивы и даже компоненты. А в конце урока вас ждут практические задачи и примеры кода.

Синтаксис Blade

Blade это не просто шаблонизатор, а настоящий язык, который компилируется в чистый PHP. Его синтаксис интуитивно понятен и лаконичен.

Вывод данных

Для вывода переменных в Blade используются двойные фигурные скобки {{ }}. Например:

<h1>Привет, {{ $username }}!</h1>

Если переменная содержит HTML-теги, и вы хотите их отобразить (а не экранировать), используйте {!! !!}:

<div>{!! $rawHtmlContent !!}</div>

Комментарии

Комментарии в Blade пишутся с помощью {{-- --}} и не попадают в итоговый HTML:

{{-- Это комментарий, который не будет виден в браузере --}}

Пример шаблона:

<!DOCTYPE html>
<html>
<head>
    <title>{{ $pageTitle }}</title>
</head>
<body>
    {{-- Выводим имя пользователя --}}
    <h1>Добро пожаловать, {{ $user->name }}!</h1>
</body>
</html>

Наследование шаблонов: @extends и @section

Одна из самых мощных возможностей Blade наследование шаблонов. Это позволяет создавать базовый макет (layout) и переопределять его части в дочерних шаблонах.

Создаем базовый шаблон (layout)

Создайте файл resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <div class="header">
        @section('header')
            Это стандартный заголовок
        @show
    </div>

    <div class="content">
        @yield('content')
    </div>

    <div class="footer">
        @section('footer')
            © 2024 Мой сайт
        @show
    </div>
</body>
</html>

Расширяем базовый шаблон

Теперь создадим дочерний шаблон resources/views/home.blade.php, который наследует app.blade.php:

@extends('layouts.app')

@section('title', 'Главная страница')

@section('header')
    <h1>Добро пожаловать на главную!</h1>
@endsection

@section('content')
    <p>Это контент главной страницы.</p>
@endsection
  • @extends('layouts.app') указывает, какой шаблон наследуем.
  • @section('title', '...') заполняет блок title из базового шаблона.
  • @section('header') переопределяет блок header, добавляя свой контент.

Важно:

  • @yield('section') — выводит содержимое секции.
  • @section('section') ... @show — определяет секцию и сразу выводит ее.

Директивы @if, @foreach, @include

Blade предоставляет удобные директивы для управления логикой в шаблонах.

Условные операторы (@if, @else, @endif)

@if ($user->isAdmin())
    <p>Вы администратор.</p>
@elseif ($user->isEditor())
    <p>Вы редактор.</p>
@else
    <p>Вы обычный пользователь.</p>
@endif

Циклы (@foreach, @for, @while)

<ul>
@foreach ($posts as $post)
    <li>{{ $post->title }}</li>
@endforeach
</ul>

Включение подшаблонов (@include)

Директива @include позволяет подключать другие Blade-файлы:

<div class="sidebar">
    @include('partials.sidebar')
</div>

Файл resources/views/partials/sidebar.blade.php будет вставлен в это место.

Работа с компонентами Blade

Компоненты это переиспользуемые блоки кода, которые можно параметризовать. Они особенно полезны для элементов интерфейса: кнопок, карточек, форм.

Создаем компонент

  1. Создайте файл компонента: resources/views/components/alert.blade.php:
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>
  • $slot — это контент, который будет передан между тегами компонента.
  1. Используем компонент в шаблоне:
<x-alert type="success">
    Пароль успешно изменен!
</x-alert>

Компоненты с несколькими слотами

Иногда нужно передать несколько блоков контента. Например, для карточки с заголовком и телом:

{{-- resources/views/components/card.blade.php --}}
<div class="card">
    <div class="card-header">
        {{ $title }}
    </div>
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

Использование:

<x-card title="Статья #1">
    <p>Текст статьи...</p>
</x-card>

Практические задачи

Закрепим материал на практике!

Задача 1: Создайте layout

  1. Создайте базовый шаблон layouts/main.blade.php с блоками title, content и scripts.
  2. Создайте страницу contact.blade.php, которая наследует main и заполняет блоки.
  3. Добавьте в блок scripts скрипт Google Analytics.

Решение:

{{-- layouts/main.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    @yield('content')
    @yield('scripts')
</body>
</html>

{{-- contact.blade.php --}}
@extends('layouts.main')

@section('title', 'Контакты')

@section('content')
    <h1>Наши контакты</h1>
    <p>Email: contact@example.com</p>
@endsection

@section('scripts')
    <script src="https://analytics.example.com"></script>
@endsection

Задача 2: Используйте @foreach и @if

Дан массив продуктов:

$products = [
    ['name' => 'Телефон', 'price' => 20000],
    ['name' => 'Ноутбук', 'price' => 50000],
    ['name' => 'Наушники', 'price' => 3000],
];

Выведите их в виде списка, выделяя товары дороже 10000 руб. классом expensive.

Решение:

<ul>
@foreach ($products as $product)
    <li @if ($product['price'] > 10000) class="expensive" @endif>
        {{ $product['name'] }}: {{ $product['price'] }} руб.
    </li>
@endforeach
</ul>

Вы изучили основы Blade: «Вывод данных, наследование шаблонов, управляющие структуры и компоненты». Теперь вы можете создавать чистые, легко поддерживаемые шаблоны в Laravel. Чтобы закрепить знания, рекомендую выполнить задачи и поэкспериментировать с кодом.

Хотите узнать больше? Переходите к следующим урокам: полный курс по Laravel для начинающих. Мы разберем работу с базой данных, Eloquent ORM и создадим первый CRUD!