Русский

Учебник Laravel

Laravel - Blade Templates: A Beginner's Guide

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

Laravel - Blade Templates

Что такое Blade?

Blade — это мощный шаблонизатор Laravel. Представьте его как магический инструмент, который помогает нам создавать динамичные и повторно используемые HTML-шаблоны. Это как иметь супер-умного ассистента, который может заполнить пробелы на ваших веб-страницах реальными данными.

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

  1. Он простой и легкий для изучения.
  2. Он делает ваш код чище и более читаемым.
  3. Он помогает избежать повторения ( помните, разработчики ленивы — в хорошем смысле!).

Теперь давайте натянем рукава и начнем!

Шаги для создания шаблона Blade

1. Создание главного шаблона

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

Создайте новый файл layout.blade.php в директории resources/views:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>My Awesome Website</h1>
</header>

<main>
@yield('content')
</main>

<footer>
<p>&copy; 2023 My Awesome Website</p>
</footer>
</body>
</html>

Разберем это:

  • @yield('title'): Это говорит Blade: "Эй, мы заполним заголовок позже для каждой страницы."
  • @yield('content'): Это место, где будет идти основное содержимое каждой страницы.

2. Создание дочерних шаблонов

Теперь создадим дочерний шаблон, который будет использовать наш главный шаблон. Создайте новый файл home.blade.php:

@extends('layout')

@section('title', 'Home Page')

@section('content')
<h2>Welcome to My Awesome Website!</h2>
<p>This is the home page content.</p>
@endsection

Вот что происходит:

  • @extends('layout'): Это говорит Blade использовать наш файл layout.blade.php в качестве основы.
  • @section('title', 'Home Page'): Это заполняет заголовок, который мы оставили пустым earlier.
  • @section('content'): Это место, где мы放置им уникальное содержимое для этой страницы.

3. Отображение данных

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

@extends('layout')

@section('title', 'Home Page')

@section('content')
<h2>Welcome to My Awesome Website!</h2>
<p>This is the home page content.</p>

<h3>Our Fruit Selection:</h3>
@if(count($fruits) > 0)
<ul>
@foreach($fruits as $fruit)
<li>{{ $fruit }}</li>
@endforeach
</ul>
@else
<p>Sorry, we're all out of fruit!</p>
@endif
@endsection

В этом примере:

  • @if и @else: Эти директивы позволяют нам принимать решения в шаблоне.
  • @foreach: Это помогает нам循环 по нашему списку фруктов.
  • {{ $fruit }}: Двойные фигурные скобки говорят Blade отображать значение переменной.

4. Использование компонентов Blade

Компоненты Blade — это как LEGO-кирпичики для вашего веб-сайта. Это повторно используемые фрагменты, которые вы можете использовать на разных страницах. Давайте создадим простой компонент для кнопки.

Создайте новый файл resources/views/components/button.blade.php:

<button class="btn btn-{{ $type ?? 'primary' }}">
{{ $slot }}
</button>

Теперь мы можем использовать эту кнопку в нашем home.blade.php:

@extends('layout')

@section('title', 'Home Page')

@section('content')
<h2>Welcome to My Awesome Website!</h2>
<p>This is the home page content.</p>

@component('components.button', ['type' => 'success'])
Click me!
@endcomponent
@endsection

Это создаст кнопку с текстом "Click me!" и стилем "success".

Шпаргалка по директивам Blade

Вот удобная таблица了一些 часто используемых директив Blade:

Директива Назначение
@if Условное выражение
@else Альтернатива для @if
@elseif Альтернативное условие
@foreach Цикл по массиву
@for Цикл for
@while Цикл while
@switch Оператор switch
@yield Определение секции в макете
@section Определение содержимого для макета
@extends Указание, какой макет использовать
@include Включение другого представления
@auth Проверка, аутентифицирован ли пользователь
@guest Проверка, является ли пользователь гостем

Помните, практика makes perfect! Не бойтесь экспериментировать с этими директивами и создавать свои шаблоны. Before you know it, вы станете ниндзя Blade, резать HTML, как горячий нож сквозь масло!

За годы преподавания я понял, что лучший способ учиться — это делать. Так почему бы не попробовать создать простой шаблон блога, используя то, что мы узнали? Начните с главного шаблона, создайте страницы для главной, о нас и записей в блоге, и используйте мощные функции Blade, чтобы сделать ваш код чистым и DRY (Don't Repeat Yourself).

Счастливого кодирования, и пусть Blade будет с вами! ?

Credits: Image by storyset

Предыдущий учебник:
Laravel - Виды
Следующий учебник:
Laravel - Перенаправления