Menggunakan nilai bidang sebagai atribut Ranting

Saya perlu menetapkan nilai bidang sebagai kelas CSS dalam templat halaman. Bagaimana saya bisa melakukannya dengan cara Ranting?

{{attributes.addClass('class-name')}} adalah cara untuk mengatur kelas secara manual.

Saya memiliki bidang daftar untuk memungkinkan pengguna menetapkan warna latar belakang untuk bagian dari situs. Di Drupal 7 saya menggunakan kode ini.

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

Di Drupal 8, saya bisa mencetak bidang {{ content.field_background }}, tetapi <div class="{{ content.field_background }}">tidak berhasil.

Ini dapat dilakukan dengan beberapa cara, Anda dapat melakukan semuanya di templat simpul dengan Twig atau Anda dapat membuat fungsi preprocess dan membuat variabel untuk digunakan dalam templat simpul. Kunci untuk mempelajari apa yang ada dalam array adalah menggunakan Devel Kint. Tanpa itu, Anda tidak akan tahu apa yang ada di array.

Pertama instal Kint yang datang dengan modul Devel untuk Drupal 8. Selanjutnya, pilih template simpul Anda (tetapi ini dapat dilakukan dalam segala jenis template) dan periksa variabel konten seperti itu (idealnya di bagian bawah template).

{{ kint (content) }}

Dari ini, kami mendapatkan info debug yang dicetak pada halaman dan jika Anda memperluas array, Anda akan melihat banyak informasi. Segera, saya melihat nilai latar belakang saya dan saya bisa membuat jalur untuk mencetak ini sebagai

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

Sekarang Anda dapat mencetak ini sebagai gaya latar belakang atau kelas di div

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

Saya telah menguji ini dan itu bekerja dengan baik, div memberikan warna latar belakang yang telah saya pilih dalam daftar bidang saya pada node edit.

Sekarang ini tidak ideal sehingga kami mungkin ingin membuat variabel untuk ini dalam preprocess_node dalam file tema. Tema kami.

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

Sekarang saya telah membuat var, jauh lebih bersih untuk mencetak ini:

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

Satu catatan untuk di atas, Anda mungkin harus membungkus ini dengan pernyataan jika untuk memeriksa apakah itu kosong atau tidak.

Ini akan berfungsi atau struktur pernyataan if di mana Anda suka

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

Dalam templat simpul, bidang-bidangnya ada di {{ content }}. Dalam templat halaman tidak ada variabel konten, sebaliknya ada variabel halaman yang berisi wilayah {{ page.region }}.

Karena Anda bertanya tentang templat halaman, kami tidak dapat menggunakan content.

Tetapi Anda dapat menggunakan {{node}} di kedua templat. Objek simpul selalu di templat simpul dan di templat laman, saat laman menampilkan simpul.

Jadi ini harus bekerja di kedua templat:

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