Usando um valor de campo como atributo Twig

Eu preciso definir um valor de campo como classe CSS em um modelo de página. Como posso fazer isso da maneira Twig?

{{attributes.addClass('class-name')}} é a maneira de definir a classe manualmente.

Eu tenho um campo de lista para permitir que o usuário defina uma cor de plano de fundo para uma parte do site. No Drupal 7 eu usei esse código.

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

No Drupal 8, posso imprimir o campo com {{ content.field_background }}, mas <div class="{{ content.field_background }}">não funciona.

Isso pode ser feito de várias maneiras, você pode fazer tudo isso no modelo de nó com o Twig ou criar uma função de pré-processo e criar uma variável para uso no modelo de nó. A chave para aprender o que está na matriz é usar Devel Kint. Sem isso, você não saberá o que está na matriz.

Primeiro instale o Kint, que acompanha o módulo Devel do Drupal 8. Em seguida, escolha o modelo do nó (mas isso pode ser feito em qualquer tipo de modelo) e examine a variável de conteúdo da mesma forma (idealmente na parte inferior do modelo).

{{ kint (content) }}

A partir disso, obtemos informações de depuração impressas na página e, se você expandir a matriz, verá uma grande quantidade de informações. Imediatamente, vejo meu valor de segundo plano e posso construir um caminho para imprimi-lo como

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

Agora você pode imprimir isso como um estilo ou classe de plano de fundo em uma div

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

Eu testei isso e ele funciona muito bem, a div renderizou a cor de fundo que eu selecionei na minha lista de campos na edição de nós.

Agora, como isso não é ideal, provavelmente queremos criar uma variável para isso em um pré-processo_node no arquivo .theme do nosso tema.

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

Agora que eu tenho um var criado, é muito mais limpo imprimi-lo:

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

Uma observação acima, você provavelmente deve agrupar isso com uma instrução if para verificar se está vazia ou não.

Isso funcionaria ou estruturaria a instrução if de onde você gosta

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

Em um modelo de nó, os campos estão {{ content }}. Em um modelo de página, não há variável de conteúdo; em vez disso, existe uma variável de página que contém regiões {{ page.region }}.

Como você perguntou sobre o modelo da página, não podemos usá-lo content.

Mas você pode usar o {{node}} nos dois modelos. O objeto de nó está sempre em um modelo de nó e no modelo de página, quando a página está exibindo um nó.

Portanto, isso deve funcionar nos dois modelos:

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