Thumbnail

Emulsify - the Drupal Theme style guide

Thumbnail

Feb Dao

|

Những bài trước, mình đã giới thiệu tới các bạn khái niệm về Style Guide và tầm quan trọng cũng như ý nghĩa của nó đối với việc lập trình web trong giai đoạn hiện nay. Ở bài viết này, mình sẽ giới thiệu 1 ứng dụng cụ thể của nó với Drupal, một CMS rất thông dụng để tạo một website từ cơ bản đến phức tạp.

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.

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Comments

  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word