Механизмы шаблонов Laravel поддерживают React, Vue и другие библиотеки. Тем не менее, разработчикам нравится надежная способность движка Laravel Blade быстро создавать модульные и повторно используемые представления. Blade позволяет легко расширять макеты, определять разделы и использовать структуры управления для создания контента, управляемого данными.

В этой практической статье рассказывается, что такое Blade, как он работает и как он улучшает ваши приложения Laravel.

Все, что вам нужно для использования Laravel Blade

Laravel Blade — это шаблонизатор по умолчанию для платформы Laravel. Он позволяет вам использовать переменные, циклы, условные операторы и другие функции PHP непосредственно в вашем HTML-коде. Чтобы создать файлы Blade, просто определите представления Blade, создав файлы с .blade.php расширение в ресурсы/представления каталог вашего проекта Laravel, а затем структурируйте предпочитаемые вами динамические страницы в этих файлах.

Почему вам следует использовать Blade?

Одним из основных преимуществ Blade является модульная организация кода. Blade помогает организовать ваш код в модули многократного использования, которые вы можете легко добавлять, удалять или обновлять, не затрагивая остальную часть вашего приложения.

Инкапсуляция кода — еще одно преимущество Blade. Blade помогает инкапсулировать функции, делая тестирование, отладку и обслуживание кода более управляемыми. Этот подход приносит пользу более крупным приложениям, поскольку неорганизованными приложениями может быстро стать сложно управлять.

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

Как использовать Laravel Blade

В этом уроке мы создадим приложение Laravel, чтобы испытать шаблоны Blade в действии. Научитесь определять и расширять макеты блейдов, передавать данные между представлениями блейдов, использовать различные доступные структуры управления и создавать свои собственные блейды.

Предварительные условия

Чтобы следовать этому руководству, убедитесь, что у вас есть следующее:

  • Предварительное знакомство с PHP
  • Композитор установлен. Убедитесь, что Composer присутствует в вашей системе, запустив composer -V

Ознакомьтесь с полным кодом руководства для получения рекомендаций во время работы.

Как создать приложение Laravel

Чтобы создать пример приложения Laravel, запустите:

composer create-project laravel/laravel my-app

Следуйте инструкциям на вашем терминале, чтобы завершить создание приложения.

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

cd my-app
php artisan serve

Нажмите ссылку в терминале, чтобы открыть страницу приветствия Laravel в вашем браузере.

Как определить макет

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

Прежде чем приступить к выполнению пошаговых инструкций, взгляните на следующую демонстрацию скелета.

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

<!-- Page 1 -->
<nav>. . . </nav>
  Content for page 1
<footer> . . . </footer>
<!-- Page 2 -->
<nav>. . . </nav>
  Content for page 2
<footer> . . . </footer>

Вместо этого вы можете легко создать свое приложение, используя макеты для совместного использования одних и тех же компонентов в одном блоке кода:

<!-- Main layout code -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>

Определив макет, вы можете использовать его на любой странице:

<!-- Page 1 or Page n -->
<main-layout>
  Content for page n
</main-layout>

В старых версиях Laravel вам приходилось создавать макеты, используя наследование шаблонов. Однако когда компания добавила функцию компонентов, создавать надежные макеты стало намного проще.

Чтобы создать новый макет с помощью Laravel Blade, сначала запустите эту команду, чтобы создать компонент макета:

php artisan make:component Layout

Эта команда создает новый макет.blade.php файл, расположенный в новой папке с именем компоненты в ресурсы/просмотры/ каталог. Откройте этот файл и вставьте этот код:

<html>
  <head>
    <title>{{ $title ?? 'Example Website' }}</title>
    <link rel="stylesheet" href="https://kinsta.com/blog/laravel-blade/{{ asset("/css/app.css') }}">
  </head>
  <body>
    <nav>
      <h3>Welcome to my website</h3>
      <hr>
    </nav>
    {{ $slot }}
    <footer>
      <hr />
      © 2023 example.com
    </footer>
  </body>
</html>

Этот код создает компонент макета с простой панелью навигации и нижним колонтитулом. slot Функция определяет, куда передавать основной контент всякий раз, когда вы расширяете свой компонент макета.

Как расширить макет

Вы можете легко импортировать компонент в виде лезвия, используя <x-component-name> ярлык. Этот метод также применим к компоненту макета, созданному вами ранее.

Чтобы увидеть, как выглядит расширение макета, откройте файл по умолчанию. ресурсы/просмотры/welcome.blade.php файл и замените содержимое файла этим кодом:

<x-layout>
  <div>
	<h1>Hello World!</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

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

Обратите внимание, что в определении макета код отображает данные заголовка, которые по умолчанию имеют значение «Пример веб-сайта», если код не передает данные заголовка. Вы можете передать эти данные в виде именованных слотов в своих представлениях через <x-slot name="slotName" /> код — в данном случае <x-slot name="title" />. Обновите добро пожаловать.blade.php файл с кодом ниже и перезагрузите страницу:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <div>
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Затем добавьте немного стиля, чтобы улучшить внешний вид вашего приложения. Создать новый приложение.css файл внутри /public/css каталог, затем вставьте код из этого файла.

Со всеми этими обновлениями при предварительном просмотре приложения по адресу http://127.0.0.1:8000/ вы должны увидеть следующий результат.

Привет, мир

Как включить серверные данные

В предыдущем примере вы легко обменивались данными между компонентами и представлениями через слоты. Однако существуют более эффективные подходы для загрузки данных из базы данных или другого удаленного источника.

В этом случае загрузите и передайте данные непосредственно из определения вашего маршрутизатора и получите к ним доступ так же, как вы получили доступ к именованному слоту в предыдущем примере. Для этого откройте маршруты/web.php файл и замените его содержимое этим кодом:

<?php
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
  $name = "John Doe";
  return view('welcome', ['name' => $name]);
});

В приведенном выше коде вы обновили свой веб-маршрут, чтобы передать имя. "John Doe" к приветствуемому виду. Теперь получите доступ к этому значению в представлениях лезвий следующим образом:

<div>
  Hello, {{ $name }}
  <!-- Outputs: Hello, John Doe -->
</div>

Вы можете использовать этот метод для загрузки данных из базы данных. Например, предположим, что у вас есть таблица дел, содержащая список дел. Используйте фасад БД, чтобы загрузить эти задачи и передать их в представление:

<?php
use Illuminate\Support\Facades\DB; // Import DB Facade
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
  $todos = DB::table('todos')->get();
  return view('welcome', ['todos' => $todos]);
});

Однако если у вас нет базы данных, обновите маршрут веб-записи, чтобы передать массив статических задач. Открой маршруты/web.php файл и обновите файл по умолчанию (/) маршрут с кодом ниже:

Route::get('/', function () {
  $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
  return view('welcome', ['todos' => $todos]);
});

Замените содержимое добро пожаловать.blade.php файл с приведенным ниже кодом для доступа к задачам в виде закодированного массива JSON.

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <p>{{ json_encode($todos) }}</p>
  <!-- Output:  ["Learn Laravel","Learn Blade","Build Cool Stuff"] -->
</x-layout>

Как использовать ярлыки управления

Механизм шаблонов Blade также поддерживает несколько директив для условной визуализации различных типов данных. Например, чтобы перебрать возвращенный массив задач, который вы передали в представление приветствия, примените foreach цикл, вставив следующий код в добро пожаловать.blade.php файл:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <ul>
    @foreach ($todos as $todo)
      <li>{{ $todo }}</li>
    @endforeach
  </ul>     
</x-layout>

Это изменение должно отобразить ваши задачи в неупорядоченном списке, как на снимке экрана ниже.

Дела в неупорядоченном списке
дела в неупорядоченном списке

Чтобы создать блок условных операторов, используйте команду @if, @elseif, @elseи @endif директивы. Например:

@if (count($todos) === 1)
  <p>I have one task!</p>
@elseif (count($todos) > 1)
  <p>I have multiple tasks!</p>
@else
  <p>I don't have any tasks!</p>
@endif

Замените содержимое добро пожаловать.blade.php файл с приведенным выше кодом. Различные if–else директивы подсчитывают элементы дел и отображают специальное сообщение для различных сценариев. Учитывая, что в вашем массиве дел имеется более одной задачи, вы должны увидеть вывод «У меня несколько задач!» в браузере.

Дополнительные поддерживаемые директивы вы можете найти в документации Laravel.

Как создать собственное расширение

Вы также можете написать собственную директиву, как в предыдущем примере. Чтобы изучить этот метод, создайте собственную директиву усечения текста.

Сначала создайте нового поставщика услуг, выполнив:

php artisan make:provider TruncateTextServiceProvider

Эта команда создает новый файл поставщика услуг по адресу приложение/Поставщики/TruncateTextServiceProvider.php. Откройте этот файл и замените его содержимое на:

<?php
namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class TruncateTextServiceProvider extends ServiceProvider
{
  public function register()
  {
    //
  }
  public function boot()
  {
    Blade::directive('truncate', function ($expression) {
      list($text, $length) = explode(',', $expression);
      return "<?php echo Str::limit($text, $length); ?>";
    });
  }
}

Код импортирует фасад Blade и определяет новую пользовательскую директиву под названием @truncate. Директива принимает два аргумента: $text и $length. Он использует Str::limit() метод для усечения текста до указанной длины.

Наконец, зарегистрируйте поставщика услуг, добавив его в массив ваших поставщиков в конфигурация/app.php Файл конфигурации:

'providers' => [
  // Other service providers
  App\Providers\TruncateTextServiceProvider::class,
],

Используйте пользовательскую директиву в своих шаблонах Blade (добро пожаловать.blade.php), вызвав его через @truncate синтаксис.

<div>
  @truncate('Lorem ipsum dolor sit amet', 10)
  <!-- Outputs: Lorem ipsu... -->
</div>

Краткое содержание

В этой статье было рассмотрено, как Laravel Blade позволяет оптимизировать процесс разработки, создавая модульные и повторно используемые представления для веб-приложений. Однако ваш путь разработки Laravel на этом не должен заканчиваться.

Инфраструктура, в которой размещено ваше приложение, так же важна для вашего успеха, как и локальный процесс разработки. Чтобы вывести ваше приложение Laravel на новый уровень, вам нужна надежная хостинговая платформа, способная удовлетворить ее требования.

Kinsta оптимизирует хостинговые решения с точки зрения производительности, безопасности и масштабируемости, позволяя вам развивать свое приложение в наилучшей возможной среде. Разверните свое приложение Laravel на Kinsta, чтобы испытать его на себе.