Карта сайта

Урок 4: Шаблоны с Twig в Symfony. Наследование, переменные, фильтры

/Уроки по Symphony/Урок 4: Шаблоны с Twig в Symfony. Наследование, переменные, фильтры
Урок 4: Шаблоны с Twig в Symfony. Наследование, переменные, фильтры
Автор: написал в рубрике Уроки по Symphony. 0 Комментариев.

В 4-ом уроке мы погрузимся в изучение шаблонов Symfony с использованием Twig. Это ключевой навык для создания красивых и структурированных веб-приложений.

Twig это современный шаблонизатор для PHP, который стал стандартом в Symfony. Он превращает написание HTML-кода в удовольствие благодаря своей чистоте, безопасности и простоте. Вот почему Twig так хорош:

  • Читаемость. Синтаксис похож на естественный язык.
  • Безопасность. Автоматически экранирует переменные, защищая от XSS-атак.
  • Гибкость. Наследование шаблонов, фильтры, макросы — всё под рукой.

Установка Twig

В Symfony Twig включен по умолчанию. Но если вдруг его нет, установите через Composer:

bash
composer require twig

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

Представьте, что у вас есть 10 страниц с одинаковым хедером и футером. Копировать их на каждую страницу? Нет! Twig позволяет использовать наследование шаблонов.

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

Создайте файл templates/base.html.twig:

twig
<!DOCTYPE html>  
<html>  
<head>  
    <title>{% block title %}Мой сайт{% endblock %}</title>  
    {% block stylesheets %}{% endblock %}  
</head>  
<body>  
    <header>Шапка сайта</header>  

    <main>  
        {% block content %}{% endblock %}  
    </main>  

    <footer>Подвал сайта © {{ "now"|date("Y") }}</footer>  

    {% block javascripts %}{% endblock %}  
</body>  
</html>

Здесь:

  • {% block %} — определяет область, которую можно переопределить в дочерних шаблонах.
  • {{ "now"|date("Y") }} — выводит текущий год, используя фильтр date.

Дочерний шаблон

Создайте templates/page/homepage.html.twig:

twig
{% extends 'base.html.twig' %}  

{% block title %}Главная страница{% endblock %}  

{% block content %}  
    <h1>Добро пожаловать!</h1>  
    <p>Это контент главной страницы.</p>  
{% endblock %}

Что происходит:

  • {% extends 'base.html.twig' %} — наследуем структуру базового шаблона.
  • Переопределяем блоки title и content.

Практическая задача 1:
Создайте базовый шаблон с блоками header, content, footer. Сделайте дочерний шаблон для страницы «О нас», переопределив блок content.

Переменные, фильтры и циклы в Twig

Переменные

Передать переменную из контроллера в шаблон очень просто. Например, в контроллере:

php
// src/Controller/DefaultController.php  
public function index(): Response {  
    return $this->render('homepage.html.twig', [  
        'username' => 'Максим',  
        'products' => ['Ноутбук', 'Телефон', 'Наушники'],  
    ]);  
}

В шаблоне homepage.html.twig:

twig
<p>Привет, {{ username }}!</p>

Фильтры

Фильтры преобразуют переменные. Примеры:

twig
{{ username|upper }} <!-- МАКСИМ -->  
{{ "2023-10-01"|date("d.m.Y") }} <!-- 01.10.2023 -->  
{{ "Hello World"|lower }} <!-- hello world -->

Список популярных фильтров:

  • capitalize: Первая буква заглавная.
  • length: Длина массива или строки.
  • default('Гость'): Значение по умолчанию, если переменная пуста.

Циклы

Для вывода списка товаров:

twig
<ul>  
{% for product in products %}  
    <li>{{ product }}</li>  
{% else %}  
    <li>Товаров нет.</li>  
{% endfor %}  
</ul>

Условия:

twig
{% if products|length > 0 %}  
    <p>Количество товаров: {{ products|length }}</p>  
{% else %}  
    <p>Товары отсутствуют.</p>  
{% endif %}

Практическая задача 2:
Создайте шаблон, который выводит список пользователей (массив users). Если список пуст, выведите «Пользователи не найдены». Используйте фильтр capitalize для имен.

Подключение CSS/JS в Symfony

В Symfony для управления статикой используется компонент Asset.

Настройка

  1. Убедитесь, что установлен пакет:
bash
composer require symfony/asset
  1. CSS и JS размещайте в директории public/assets/:
public/  
    assets/  
        css/  
            styles.css  
        js/  
            script.js

Подключение в шаблоне

В базовом шаблоне base.html.twig:

twig
{% block stylesheets %}  
    <link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}">  
{% endblock %}  

{% block javascripts %}  
    <script src="{{ asset('assets/js/script.js') }}"></script>  
{% endblock %}

Функция asset() автоматически генерирует корректный путь, учитывая настройки сервера.

Версионирование

Чтобы избежать кэширования старых файлов, добавьте версию:

twig
<link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}?v=1.0">

Практическая задача 3:
Создайте файл styles.css с изменением цвета фона body. Подключите его к базовому шаблону. Проверьте, что стили применяются.

Итоги 4-го урока

Сегодня мы разобрали основы Twig: от наследования шаблонов до работы с переменными и циклами. Теперь вы умеете:

  1. Создавать структуру сайта через extends и block.
  2. Использовать фильтры и условия для динамического контента.
  3. Подключать CSS/JS через компонент Asset.

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

Хотите освоить Symfony от основ до продвинутых тем? Переходите на курс по Symfony для начинающих. Там вас ждут уроки по Doctrine, формам, аутентификации и многому другому.