[Thủ Thuật Drupal] Hiển thị Block vào Twig template trong Drupal

Hướng dẫn thêm Block bất kì vào Twig template trong Drupal 8 và Drupal 9 là ví dụ đơn giản giúp bạn lấy một block bất kỳ để hiển thị trên template dễ dàng mà không cần sử dụng module nào.

Xem ví dụ dưới đây, hiển thị một block Google Ad giữa trang view template

Bước 1: Tạo một block tên là "google-ad" với đoạn mã quảng cáo của Google

Bước 2: Tìm view bạn muốn hiển thị block

Ta tìm template với định dạng như view-view-unformatted - <view machine name> .html.twig. để thực hiện hiển thị block Google Ad

Bước 3: Trong themename.theme thêm đoạn khai báo biến block như sau

function <themename>_preprocess_views_view_unformatted(&$variables) {
   $block = \Drupal\block\Entity\Block::load('google-ad');
   $variables['google-ad-block'] = \Drupal::entityTypeManager()
   ->getViewBuilder('block')
   ->view($block);

}

Với đoạn code trên chúng ta tạo một biến chứ khối block {{ google-ad-block }} trong .theme, biến sẽ lưu và hiển thị trên Twig template.

Bước 4: Hiển thị block bằng cách đặt nó vào trong Twig template 

Vào file views-view-unformatted--<view machine name>.html.twig bất kỳ để bỏ thử như sau

{#
/**
 * @file
 * Default theme implementation to display a view of unformatted rows.
 *
 * Available variables:
 * - title: The title of this group of rows. May be empty.
 * - rows: A list of the view's row items.
 *   - attributes: The row's HTML attributes.
 *   - content: The row's content.
 * - view: The view object.
 * - default_row_class: A flag indicating whether default classes should be
 *   used on rows.
 *
 * @see template_preprocess_views_view_unformatted()
 *
 * @ingroup themeable
 */
#}
{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
{% for row in rows %}
{%
set row_classes = [
  default_row_class ? 'views-row',]
cycle(['grid', ' small-12 medium-12 custom-full-grid'], (loop.index == 1) ),
%}

    {% if loop.index == 1 %}
    <div{{ row.attributes.addClass(row_classes) }}>
      <div>
        {{ row.content }}
        </div>
    </div>
    {% endif %}
    {% if (loop.index == 2) or (loop.index == 3) or (loop.index == 4) %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
    {% endif %}
    {% if loop.index == 5 %}
    <div{{ row.attributes.addClass(row_classes) }}>
    {{ row.content }}
  </div>
        <div class="small-12 columns bottom-40 show-for-medium">{{ google-ad-block }} </div>
    {% endif %}
    {% if loop.index == 6 or loop.index == 7 or loop.index == 8 or loop.index == 9 or loop.index == 10  %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
    {% endif %}
    {% if loop.index == 11 %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
        <div class="small-12 columns bottom-40 show-for-medium">{{ google-ad-block }} </div>
    {% endif %}
    {% if loop.index == 12 or loop.index == 13 or loop.index == 14 or loop.index == 15 or loop.index == 16  %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
    {% endif %}
    {% if loop.index == 17 %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
        <div class="small-12 columns bottom-40 show-for-medium">{{ google-ad-block }} </div>
    {% endif %}
    {% if loop.index == 18 or loop.index == 19 or loop.index == 20 or loop.index == 21 %}
    <div{{ row.attributes.addClass(row_classes) }}>
        {{ row.content }}
    </div>
    {% endif %}

{% endfor %}

Như vậy bạn đã thành công hiển thị một block bất kỳ vào trong Twig rồi.