Перейти к основному содержанию

Наследование шаблонов в Drupal 8 с шаблонизатором Twig

Рассмотрим две страницы. Они очень похожи, единственное отличие заключается в названии класса в одном регионе. Первая страница имеет класс «hotpink», в то время как вторая страница имеет класс «ghostwhite». Мы рассмотрим два метода обмена между этими именами классов в наших файлах шаблонов твиг.

Метод 1: Определите заменяемый контент с помощью «блоков» Twig
Блоки Twig - это, по сути, заменяемые части файла шаблона. Чтобы переопределить только имя класса в первом шаблоне, мы расширим его вторым шаблоном и поменяем местами содержимое в области блоков.

Первый шаблон (page.html.twig)

<header>
  {{ page.header }}
</header>
 
{# REPLACE ME #}
{% block replaceable %}
  <section class="hotpink">
    {{ page.content }}
  </section>
{% endblock %}
 
</section>
 
<footer>
  {{ page.footer }}
</footer>

Второй шаблон (страница - two.html.twig)

{% extends  "page.html.twig" %}
 
{# Replace content_fields #}
{% block replaceable %}
  <section class="ghostwhite">
    {{ page.content }}
  </section>
{% endblock %}

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

Конечно, это самый простой из примеров. Синтаксис блока Twig позволяет нам указать столько заменяемых блоков, сколько мы хотим. Важно только дать каждому сменному блоку уникальное имя.

Метод 2: Сменные переменные
Twig также позволяет нам переопределять переменные из одного шаблона с переменными из другого шаблона. Таким образом, более чистый способ достижения тех же результатов, что и выше, состоит в том, чтобы указать класс в первом шаблоне в качестве переменной, а затем переопределить его во втором шаблоне.

Первый шаблон (page.html.twig)

<header> 
  {{page.header}} 
</ header 
 
{# REPLACE ME #} 
{% block replaceable%} 
  <section {{attribute.addClass ('hotpink')}}> 
    {{page.content}} 
  </ section > 
{% endblock%} 
 
</ section> 
 
<footer> 
  {{page.footer}} 
</ footer>

Второй шаблон

{% extends "page.html.twig"%} 
 
{% set attribute = attribute.removeClass ('hotpink'). addClass ('ghostwhite')%}

Функция parent ()


Я думаю, что стоит упомянуть кое что еще: функцию parent () . Родительская функция позволяет нам печатать содержимое из блока в родительском шаблоне в блок дочернего шаблона.

Допустим, единственная разница между нашими двумя страницами заключалась в том, что вторая содержит заголовок над областью содержимого. Нет необходимости дублировать весь жаргон HTML и Twig из первого шаблона; пусть parent () справится с этим.

Второй шаблон (страница - two.html.twig)

{% extends "page.html"%} 
 
{# Replace content #} 
{% block replaceable%} 
  <h2> Я - Заголовок </ h2> 
  {{parent ()}} 
{% endblock%}

 

Теги

Добавить комментарий

Restricted HTML

  • Допустимые HTML-теги: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Строки и абзацы переносятся автоматически.
  • Адреса веб-страниц и email-адреса преобразовываются в ссылки автоматически.
Нажимая кнопку "Отправить комментарий", Вы автоматически соглашаетесь с политикой конфиденциальности и даете свое согласие на обработку персональных данных. Ваши данные не будут переданы третьим лицам.
Top