Sử dụng giá trị trường làm thuộc tính Twig

Tôi cần đặt một giá trị trường là lớp CSS trong một mẫu trang. Làm thế nào tôi có thể làm điều đó theo cách Twig?

{{attributes.addClass('class-name')}} là cách để thiết lập lớp bằng tay.

Tôi có một trường danh sách để cho phép người dùng đặt màu nền cho một phần của trang web. Trong Drupal 7 tôi đã sử dụng mã này.

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

Trong Drupal 8, tôi có thể in trường với {{ content.field_background }}nhưng <div class="{{ content.field_background }}">không hoạt động.

Điều này có thể được thực hiện theo một số cách, bạn có thể thực hiện tất cả trong mẫu nút bằng Twig hoặc bạn có thể tạo chức năng tiền xử lý và tạo một biến để sử dụng trong mẫu nút. Chìa khóa để học những gì trong mảng là sử dụng Devel Kint. Không có điều đó, bạn sẽ không biết những gì trong mảng.

Trước tiên hãy cài đặt Kint đi kèm với mô-đun Devel cho Drupal 8. Tiếp theo, chọn mẫu nút của bạn (nhưng điều này có thể được thực hiện trong bất kỳ loại mẫu nào) và kiểm tra biến nội dung như vậy (lý tưởng là ở dưới cùng của mẫu).

{{ kint (content) }}

Từ đó, chúng tôi nhận được thông tin gỡ lỗi được in trên trang và nếu bạn mở rộng mảng, bạn sẽ thấy một loạt thông tin. Ngay lập tức, tôi thấy giá trị nền của mình và tôi có thể tạo một đường dẫn để in nó ra dưới dạng

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

Bây giờ bạn có thể in kiểu này dưới dạng nền hoặc lớp trong div

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

Tôi đã thử nghiệm điều này và nó hoạt động rất tốt, div hiển thị màu nền mà tôi đã chọn trong danh sách trường của mình khi chỉnh sửa nút.

Bây giờ điều này không lý tưởng nên có lẽ chúng tôi muốn tạo một biến cho điều này trong một pre process_node trong tệp .theme của chủ đề.

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

Bây giờ tôi đã tạo một var, việc in nó ra sẽ dễ dàng hơn nhiều:

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

Một lưu ý ở trên, có lẽ bạn nên bọc nó bằng câu lệnh if để kiểm tra xem nó có trống hay không.

Điều này sẽ làm việc hoặc cấu trúc câu lệnh if nơi bạn thích nó

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

Trong một mẫu nút, các trường nằm trong {{ content }}. Trong một mẫu trang không có biến nội dung, thay vào đó là một biến trang chứa các vùng {{ page.region }}.

Vì bạn đã hỏi về mẫu trang, chúng tôi không thể sử dụng content.

Nhưng bạn có thể sử dụng {{node}} trong cả hai mẫu. Đối tượng nút luôn ở trong một mẫu nút và trong mẫu trang, khi trang đang hiển thị một nút.

Vì vậy, điều này sẽ làm việc trong cả hai mẫu:

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