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

Как я уже говорил , я большой поклонник модульного CSS, который требует умения легко управлять классами в вашей разметке. Это часто было борьбой в предыдущих версиях Drupal. Тем не менее, Drupal 8 значительно упрощает управление благодаря ряду улучшений в интерфейсных разработчиках (DX). В этом посте мы рассмотрим, два из этих улучшений DX, язык шаблонов Twig и hook_theme_suggestions_HOOK_alter , и как они значительно упрощают управление добавлением классов в блоки.

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

block.html.twig

<div class = "block block - fancy">
  {{title_prefix}}
  {% if label%}
    <h2 class = "block__title block__title - fancy"> {{label}} </ h2>
  {% endif%}
  {{title_suffix}}
  {% block content%}
    {{content}}
  {% endblock%}
</ DIV>

Это работает во многих случаях, но может быть недостаточно гибким. Во втором подходе используется новый объект атрибутов - преемник массива атрибутов Drupal 7. Объект атрибута инкапсулирует все атрибуты для данного тега. Он также включает в себя ряд методов, которые позволяют добавлять, удалять и изменять эти атрибуты перед печатью. Сейчас мы сосредоточимся только на attributes.addClass() методе. Вы можете узнать больше о доступных методах в официальной документации Drupal 8 .

block.html.twig

{%
  set classes = [
    'block',
    'block--fancy'
  ]
%}
 
{%
  set title_classes = [
    'block__title',
    'block__title--fancy'
  ]
%}
 
<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {% if label %}
    <h2{{ title_attributes.addClass(title_classes) }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
    {{ content }}
  {% endblock %}
</div>

В качестве альтернативы, мы можем добавить наш класс непосредственно к class атрибуту с существующими классами, а attribute.class затем распечатать оставшиеся атрибуты. Чтобы атрибуты класса не печатались дважды, мы исключаем его с помощью without фильтра Twig. В любом случае работает.

<div class="block--fancy {{ attributes.class }}"{{attributes|without('class') }}>
  {{ title_prefix }}
  {% if label %}
    <h2  class="block--fancy {{ title_attributes.class }}" {{title_attributes|without('class') }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
    {{ content }}
  {% endblock %}
</div>

В любом случае, все наши блоки на сайте теперь выглядят фантастически (при условии, что мы стилизованы .block--fancy как таковой)

Шаблонные предложения
Приведенные выше примеры работают. Вот только нам нужно применять этот класс только к нашим специальным блокам, которые действительно заслуживают того, чтобы быть модными. Это вводит мое второе любимое улучшение DX в Drupal 8 - hook_theme_suggestions_HOOK_alter.

Если вы хотите сделать пользовательский шаблон доступным для использования в определенном блоке В Drupal 7 вы должны были сделать это в функции предварительной обработки. Изменение подсказок по теме (список возможных шаблонов) в Drupal 8 делегировано для его собственной функции. Концепция довольно проста. Прежде чем Drupal рендерит элемент, он просматривает массив возможных имен файлов шаблонов (также называемых предложениями) один за другим. Для каждого файла шаблона он просматривает файловую систему, чтобы узнать, существует ли этот файл в нашей теме, ее базовой теме или основных темах. Как только он находит совпадение, он прекращает поиск и отображает элемент, используя соответствующий шаблон.

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

Предположим, мы переименовали один из наших шаблонов выше block--fancy.html.twigи сохранили его в нашей теме. Затем мы добавляем следующую функцию, my_theme.theme где «my_theme» - это название нашей темы.

my_theme.theme

<?php
 
/**
 * Реализует hook_theme_suggestions_HOOK_alter () для шаблонов блоков. 
 */
function my_theme_theme_suggestions_block_alter(array &$suggestions, array $variables) {
  $block_id = $variables['elements']['#id'];
 
  / * Раскомментируйте строку ниже, чтобы увидеть переменные, которые вы можете использовать для назначения блока * / // print $ block_id. '<br/>'; / * Добавить классы на основе идентификатора блока. * /
  switch ($block_id) {
    /* Блок меню учетной записи */
    case 'account_menu':
      $suggestions[] = 'block__fancy';
      break;
  }
}

Теперь блок меню учетной записи на нашем сайте будет использовать, block--fancy.html.twig как мы видим из результатов отладки

drupal

Это только один из примеров улучшений в D8. Я очень рад за ясность, которую новые шаблоны Twig привносят в Drupal 8, и простоту управления предложениями шаблонов hook_theme_suggestions_HOOK_alter.

assistant Теги

keyboard_arrow_up