Последние записи в блоге

Тег embed

Тег embed комбинирует в себе поведение include и extends. Он позволяет вам подключать другие шаблоны также, как include, однако позволяет заменить любой блок внутри подключенного:

Считайте встроенные шаблоны "микро-основой макета"

{% embed "teasers_skeleton.twig" %}
    {# Этот блок определен в "teasers_skeleton.twig" #}
    {# И мы переопределим его здесь #}
    {% block left_teaser %}
        Какой-то текст слева
    {% endblock %}
    {% block right_teaser %}
        какой-то текст с права
    {% endblock %}
{% endembed %}

Тег embed берет свое начало от наследования шаблонов кусками. В то время, как наследование позволяет создать основу документа, а наполнение переложить на "плечи детей", тег embed дает возможность создать основу для маленьких кусочков и повторно использовать везде, где захотите.

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

┌─── макет страницы ──────────────────┐
│                                     │
│           ┌── block "content" ──┐   │
│           │                     │   │
│           │                     │   │
│           │ (дочерний шаблон    |   |
|           | поместит содержимое │   │
│           │  сюда)              │   │
│           │                     │   │
│           │                     │   │
│           └─────────────────────┘   │
│                                     │
└─────────────────────────────────────┘

Представим две страницы "foo" и "bar". Они используютодинаковую структуру - два вертикальных блока:

┌─── макет страницы ──────────────────┐
│                                     │
│           ┌── block "content" ──┐   │
│           │ ┌─ block "top" ───┐ │   │
│           │ │                 │ │   │
│           │ └─────────────────┘ │   │
│           │ ┌─ block "bottom" ┐ │   │
│           │ │                 │ │   │
│           │ └─────────────────┘ │   │
│           └─────────────────────┘   │
│                                     │
└─────────────────────────────────────┘

Пока другие страницы "boom" и "baz" используют другую структуры - два блока стоят сторона к стороне:

┌─── page layout ─────────────────────┐
│                                     │
│           ┌── block "content" ──┐   │
│           │                     │   │
│           │ ┌ block ┐ ┌ block ┐ │   │
│           │ │"left" │ │"right"│ │   │
│           │ │       │ │       │ │   │
│           │ │       │ │       │ │   │
│           │ └───────┘ └───────┘ │   │
│           └─────────────────────┘   │
│                                     │
└─────────────────────────────────────┘

Без тега embed у вас есть два варианта создать шаблон:

 

  • Создать два базовых шаблона, которые унаследованы от оригинального шаблона-макета: тот, что с вертикально стоящими блоками будет использоваться для страниц "foo" и "bar", а второй для страниц "boom" и "baz".
  • Добавить разметку для верхнего, нижнего, левого и правого блока на каждую страницу напрямую

Эти решения не достаточно хорошо масштабируются, поэтому имеют следующие недостатки:

  • Первый вариант имеет право на существование. Однако это упрощенный пример. Но представьте, мы добавим боковую панель, которая может включать в себя другой повторяющийся контент. Теперь нам нужно создать базовые шаблоны для всех возможных комбинаций.
  • Второй вариант предполагает дублирование исходного кода со всеми вытекающими: любые изменения влекут за собой ручное изменение скопированных участков, в итоге один и тот же код станет отличаться ...

В такой ситуации использовать полезно использовать тег embed. Общий макет может быть в одном базовом шаблоне, и два различных вариантов содержмого, давайте назовем их мини-макеты и разобьем шаблоны:

Шаблон foo.twig:

{% extends "layout_skeleton.twig" %}

{% block content %}
    {% embed "vertical_boxes_skeleton.twig" %}
        {% block top %}
            Текст для верхнего блока
        {% endblock %}

        {% block bottom %}
            Текст для нижнего блока
        {% endblock %}
    {% endembed %}
{% endblock %}

А здесь код vertical_boxes_skeleton.twig:

<div class="top_box">
    {% block top %}
        Текст верхнего блока по умолчанию
    {% endblock %}
</div>

<div class="bottom_box">
    {% block bottom %}
        Текст нижнего блока по умолчанию
    {% endblock %}
</div>

Цель vertical_boxes_skeleton.twig вынести разметку блоков.

Тег embed принимает точно такие же аргументы, как тег "include":

{% embed "base" with {'foo': 'bar'} %}
    ...
{% endembed %}

{% embed "base" with {'foo': 'bar'} only %}
    ...
{% endembed %}

{% embed "base" ignore missing %}
    ...
{% endembed %}

 

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