Drupal 8: Добавить классы в тег body

Drupal: 
Уровень сложности: 

Разработчики настраивают специфические css-стили html-элементов для отдельных страниц, разделов сайта с помощью дополнительных классов в теге body.

Для Главной страницы стиль логотипа, отличный от других страниц, задаёт код css: .path-frontpage .site-logo img {width:450px;}

Следующий код Twig добавляет классы в тег body для разных страниц, ролей, для различных вариантов отображения темы. Это даёт возможность настраивать отдельных страниц.

Код для вставки в themename/templates/html.html.twig (базовый шаблон доступен, например, тут: core/themes/classy/templates/layout/ ).

Код добавляет в массив body_classes специфические css-классы:

  • класс для авторизованного пользователя .user-logged-in,
  • класс главной страницы .path-frontpage или внутренней страницы .path-...
  • класс типа материала .page-node-type,
  • класс .db-offline - недоступная база данных,
  • классы боковых колонок .no-sidebars, .sidebar-first...

Другие проверки и классы добавляются с использованием переменных окружения https://api.drupal.org/api/drupal/core!modules!system!templates!html.htm...

  1. {%
  2. set body_classes = [
  3. logged_in ? 'user-logged-in',
  4. not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
  5. node_type ? 'page-node-type-' ~ node_type|clean_class,
  6. db_offline ? 'db-offline',
  7. not page.sidebar_first and not page.sidebar_second ? 'no-sidebars',
  8. page.sidebar_first and not page.sidebar_second ? 'sidebar-first',
  9. page.sidebar_second and not page.sidebar_first ? 'sidebar-second',
  10. page.sidebar_first and page.sidebar_second ? 'both-sidebars'
  11. ]
  12. %}
  13.  
  14. <body{{ attributes.addClass(body_classes) }}>

 

Редактирование шаблонов Twig требует очистки кэша и отключения кэширования шаблонов.

 

Источник:
https://stackoverflow.com/questions/34145149/add-body-class-to-node-in-d...

 

Новые переменные окружения и другие специфические проверки могут размещатьсяв хухе hook_preprocess_hook(&$variables) в файле mytheme.theme.