Использование значения поля в качестве атрибута Twig

Мне нужно установить значение поля как класс CSS в шаблоне страницы. Как я могу сделать это способом Twig?

{{attributes.addClass('class-name')}} это способ установить класс вручную.

У меня есть поле списка, чтобы пользователь мог установить цвет фона для части сайта. В Drupal 7 я использовал этот код.

<div class="<?php print render($content['field_background']); ?>">

В Drupal 8 я могу напечатать поле {{ content.field_background }}, но <div class="{{ content.field_background }}">не работает.

Это может быть сделано несколькими способами, вы можете сделать все это в шаблоне узла с помощью Twig или вы можете создать функцию предварительной обработки и создать переменную для использования в шаблоне узла. Ключом к изучению того, что находится в массиве, является использование Devel Kint. Без этого вы не узнаете, что находится в массиве.

Сначала установите Kint, который поставляется с модулем Devel для Drupal 8. Затем выберите шаблон вашего узла (но это можно сделать в любом типе шаблона) и изучите переменную содержимого следующим образом (в идеале внизу шаблона).

{{ kint (content) }}

Отсюда мы получаем отладочную информацию, напечатанную на странице, и если вы развернете массив, вы увидите целую кучу информации. Сразу же я вижу свое фоновое значение и могу построить путь для его распечатки как

{{ content.field_background[0]['#markup'] }}

Теперь вы можете напечатать это как фоновый стиль или класс в div

<div style="background-color: {{ '#' }}{{ content.field_background[0]['#markup'] }};" class="color-{{ content.field_background[0]['#markup'] }}">
<h2>Hello</h2>
</div>

Я проверил это, и он отлично работает, div отображает цвет фона, который я выбрал в списке полей при редактировании узла.

Теперь это не идеально, поэтому мы, вероятно, хотим создать переменную для этого в preprocess_node в файле .theme нашей темы.

function MYTHEME_preprocess_node(&$vars) {
  $vars['bgcolor'] = '#' . $vars['content']['field_background'][0]['#markup'];
}

Теперь, когда у меня есть созданная переменная, гораздо удобнее ее распечатать:

 <div style="background-color: {{ bgcolor }};" >
      <h2>Hello</h2>
    </div>

Одно замечание выше, вы, вероятно, должны заключить это в выражение if, чтобы проверить, пусто оно или нет.

Это будет работать или структурировать оператор if там, где вам это нравится

   {% if bgcolor %}
    <div style="background-color: {{ bgcolor }};" >
      <h2>Hello</h2>
    </div>
    {% endif %}

В шаблоне узла поля находятся в {{ content }}. В шаблоне страницы нет переменной содержимого, вместо этого есть переменная страницы, которая содержит регионы {{ page.region }}.

Так как вы спросили о шаблоне страницы, мы не можем использовать content.

Но вы можете использовать {{node}} в обоих шаблонах. Объект узла всегда находится в шаблоне узла и в шаблоне страницы, когда страница отображает узел.

Так что это должно работать в обоих шаблонах:

<div class="{{ node.field_background.value|clean_class }}">