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を使用することです。それがないと、配列の内容がわかりません。

まず、Drupal 8のDevelモジュールに付属しているKintをインストールします。次に、ノードテンプレートを選択し（ただし、これはあらゆる種類のテンプレートで実行できます）、コンテンツ変数を確認します（テンプレートの下部が理想的です）。

{{ 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は、ノード編集時にフィールドリストで選択した背景色をレンダリングしました。

これは理想的ではないので、おそらくテーマの.themeファイルのpreprocess_nodeにこのための変数を作成する必要があります。

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

これでvarが作成されたので、これを出力する方がずっと簡単です。

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

上記の注意点の1つとして、これを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 }}">