Введение в шаблоны Blade в Laravel

Изучите основы синтаксиса и системы шаблонов Blade. Система шаблонов Blade в Laravel — это один из способов, с помощью которого PHP-фреймворк Laravel облегчает жизнь разработчика.

Синтаксис Blade чист и прост, но легко справляется с наследованием вложенных шаблонов и сложными условиями. А поскольку синтаксис Blade компилируется в PHP-код и затем кэшируется, он обеспечивает более высокую производительность веб-сервера, чем использование стандартного PHP.

Содержание

Требования
Создайте новый проект
Построение базовой файловой структуры
Создать файлы
Шаблон по умолчанию
Заголовок
Нижний колонтитул
Главная страница
Создание маршрута

Требования

Облачный сервер с установленными Laravel и PHP 7.0+.

Чтобы установить Laravel, следуйте инструкциям в нашей статье «Установка Laravel PHP Framework на Ubuntu 16.04».

Создайте новый проект

Подключитесь к серверу с помощью SSH, затем войдите под своим пользователем Laravel. Перейдите в ваш веб-каталог:

cd /var/www/html

Создайте новый проект basic-site:

laravel new basic-site

Это создаст директорию проекта basic-site и создаст все стандартные компоненты и поддиректории Laravel.

Перейдите в каталог проекта:

cd basic-site

Необходимо сделать еще один шаг, прежде чем вы сможете просматривать проект в браузере. Право собственности на каталог basic-site/storage должно быть изменено на веб-пользователя сервера:

sudo chown -R www-data:www-data storage

Построение базовой файловой структуры

Шаблоны лезвий находятся в папке resources/views. Мы создадим набор каталогов для организации наших новых шаблонов Blade. Структура файлов будет следующей:

- resources
-- views
--- includes
------- header.blade.php
------- footer.blade.php
--- layouts
------- default.blade.php
--- pages
------- home.blade.php

У этого проекта будет один главный файл макета, который будет вызывать два включаемых файла: верхний и нижний колонтитулы. Главная страница будет иметь все содержимое и будет использовать главный файл макета.

Создайте необходимые каталоги с помощью команд:

mkdir resources/views/layouts
mkdir resources/views/pages
mkdir resources/views/includes

Создать файлы

Далее мы создадим файлы примеров. Каждый файл Blade должен соответствовать соглашению об именовании [имя файла].blade.php и должен быть расположен в каталоге resources/views проекта Laravel.

Шаблон по умолчанию

Создайте файл default.blade.php:

nano resources/views/layouts/default.blade.php

Это будет файл шаблона по умолчанию. Поместите в этот файл следующее содержимое:

<html>
<head>
  @include('includes.header')
</head>
<body>

  @yield('content')

  @include('includes.footer')

</body>
</html>

Сохраните и выйдите из файла.

Следует отметить два элемента синтаксиса Blade:

@include берет информацию из файлов в каталоге includes.
@yield берет информацию из раздела content главной страницы.

Заголовок

Создайте файл header.blade.php:

nano resources/views/includes/header.blade.php

Это будет включаемый файл заголовка. Поместите в этот файл следующее содержимое:

<title>My Laravel Example Site</title>
<meta name="description" content="An example site for learning Laravel.">

Сохраните и выйдите из файла.

Нижний колонтитул

Создайте файл footer.blade.php:

nano resources/views/includes/footer.blade.php

Это будет включенный файл нижнего колонтитула. Поместите в этот файл следующее содержимое:

<p>This is the included footer.</p>

Сохраните и выйдите из файла.

Главная страница

Создайте файл home.blade.php:

nano resources/views/pages/home.blade.php

Это будет наша главная страница. Поместите в этот файл следующее содержимое:

@extends('layouts.default')
@section('content')
    Hello, world! Welcome to the home page.
@endsection

Сохраните и выйдите из файла.

Несколько замечаний по синтаксису Blade:

@extends говорит Laravel, что содержимое этого файла расширяет другое представление. Он также определяет вид, который он расширяет, как наш шаблон по умолчанию: resources/views/layouts/default.blade.php.
@section определяет начало секции, которую мы назвали content. Все, что содержится в этой секции, будет отображаться в @yield, который мы определили в шаблоне.
@endsection закрывает этот раздел. @section и @endsection — это термины, которые должны использоваться парами, как и другие теги HTML (например, <div> и </div>).

Создание маршрута

Поскольку мы будем использовать только базовые макеты Blade, все, что нам нужно сделать, это создать простой маршрут, который загружает одно представление. Нет необходимости создавать что-то более сложное (например, контроллер).

Откройте для редактирования файл routes/web.php:

nano routes/web.php

Найдите раздел, который гласит:

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

Замените это на:

Route::get('/', function () {
    return view('pages/home');
});

Сохраните и выйдите из файла.

Этот маршрут принимает запросы к главной публичной директории (/) и направляет эти запросы к файлу home.blade.php в директории pages.

Теперь, когда вы закончили создание маршрута, вы можете просмотреть результаты в браузере, добавив /basic-site/public в конец вашего домена (например, http://example.com/basic-site/public).