Bạn có thể tải và sử dụng Emulsify tại đây: https://github.com/fourkitchens/emulsify

Emulsify = Pattern Lab + Drupal 8

Công thức trên đã phần nào thể hiện được Emulsify là gì. Nó là một Drupal theme tích hợp sẵn Pattern Lab, chúng ta có thể dễ dàng tạo ra một live style guide cho website được xây dựng bởi Drupal 8. Với các tính năng nổi bật cụ thể như sau:

Gọi Component trong Drupal

Từ Drupal Twig templates trong  thư mục templates/, bạn có thể sử dụng hàm {% include %}, {%extend %} và {% embed %} của Twig để gọi một Twig template file từ Pattern Lab, ví dụ:

{% include "@organisms/duong/dan/den/file.twig %}

Cấu trúc Atomic Design

Đây là một điều thực sự hữu ích khi mà ta có thể sử cấu trúc atomic design (đọc lại bài viết trước của mình về khái niệm này): atoms, molecules, organisms... Nói chung, field tương đương với atoms, nodes tương đương với molecules và views, paragraphs thì tương đương với organisms.

Truyền biến

Một trong những giá trị lớn nhất của việc sử dụng Emulsify đó là ta có thể sử dụng lại template từ Pattern Lab kết hợp với truyền biến - là các dữ liệu được lấy từ cơ sở dữ liệu của Drupal để có thể dễ dàng hiển thị trên website, ví dụ:

{% include "@atoms/02-text/00-headings/_heading.twig" with {
    "heading_level": 1,
    "heading": title,
  } %}

Hoặc phức tạp hơn, giống như:

{% include "@molecules/info-box/info-box.twig"
  with {
    "infobox_title": content.field_paragraph_info_box_label,
    "infobox_text": content.field_paragraph_info_box_text,
    "infobox_link": content.field_paragraph_info_box_link.0['#url']
  }
%}

Hoặc

{% embed "@molecules/card/01-card.twig"
  with {
    "card_title": label,
    "card_body": body,
    "card_link_text": content.field_link.0['#title'],
    "card_link_url": content.field_link.0['#url'],
  }
%}
  {% block card_img %}
    {{ content.field_image }}
  {% endblock %}
{% endembed %}

Những hàm đặc biệt dùng riêng trong Drupal, bộ lọc và tags

Drupal có những hàm đặc biệt, bộ lọc và tags... Pattern Lab có một cách dễ dàng để thêm những điều này bên trong thư mục components/_twig-components/, Có một số bộ lọc và hàm đã được thêm sẵn bên trong nó, ví dụ t(), without(), kint()... Chúng ta có thể tìm hiểu cách thêm các hàm, bộ lọc đặc biệt vào Pattern Lab tại link sau: https://github.com/pattern-lab/patternengine-php-twig#extending-twig-further

Tóm lại

Emulsify là một cách dễ dàng, đơn giản và nhanh chóng nhất để chúng ta có thể sử dụng Pattern Lab với Drupal 8, nó hỗ trợ tối đa và giảm thời gian tối thiểu cho một người Front-end dev bắt tay vào việc tạo theme và Style Guide.