Giới thiệu

Liquid là một mã nguồn mở dự trên ngôn ngữ nền tảng là Ruby. Đây là bộ khung để các giao diện của Sapo Web có thể lấy được nội dung từ cơ sở dữ liệu và đưa ra phía giao diện.

Liquid kết hợp giữa các thẻ tags, đối tượng objects, và bộ lọc filters để tải các nội dung động. Liquid được sử dụng trong các file template, layout, snippet trong giao diện của Sapo Web. Ngoài ra còn được sử dụng trong các mẫu email thông báo phía trang quản trị.

Một ví dụ sử liquid phía giao diện là bạn có thể tạo ra template sản phẩm dùng để hiển thị các thuộc tính như tên, ảnh, giá của sản phẩm. Mẫu template đó sẽ tự động hiển thị ra các thuộc tính đó theo cách mà bạn muốn cho sản phẩm đang được xem.

Liquid cơ bản

Bạn có thể sử dụng liquid để hiện thị các nội dung động về đối tượng và thuộc tính của nó. Hơn nữa bạn có thể chỉnh sửa đầu ra bằng cách tạo logic với thẻ hoặc thay đổi nó với bộ lọc.

Ví dụ:

<title>
  {{ page_title }}
</title>
{% if page_description -%}
  <meta name="description" content="{{ page_description | escape }}">
{%- endif %}

Output:
<title>
  Bánh quy socola dừa hạnh nhân
</title>
<meta name="description" content="Thử làm món Bánh quy socola dừa hạnh nhân mới lạ, hấp dẫn">

Định nghĩa logic với thẻ

Thẻ Liquid là các logic lập trình dùng để thông báo cho hệ thống cần làm gì để đưa ra ngoài giao diện. Các thẻ được bao bởi: {% %}

{% if user.name == 'Nguyễn Văn A' %}
  Xin chào Nguyễn Văn A
{% endif %}

Chỉnh sửa đầu ra với bộ lọc

Bộ lọc được sử dụng để sửa đổi đầu ra của các biến và đối tượng. Để sử dụng bộ lọc, thêm bộ lọc và cái tham số tương ứng đặt trong cú pháp {{ }} và được phân cách bởi dấu |

Ví dụ:

{{ 'khuyenmai' | append: '.jpg' }}

Output:
khuyenmai.jpg 

Đối tượng - Object

Đối tượng liquid biểu diễn biến mà bạn có thể sử dụng để xây dựng giao diện. Đối tượng có thể chia thành các nhóm sau:

• Tài nguyên của cửa hàng, ví dụ như sản phẩm hoặc danh mục sản phẩm và các thuộc tính của nó
• Các đối tượng mà Sapo Web đưa vào để bổ trợ cho việc xây dựng giao diện ví dụ như content_for_header
• Các đối tượng hướng chức năng là các đối tượng khi sử dụng chức năng đặc biệt nào đó ví dụ như search hay paginate

Đối tượng có thể dùng để hiển thị trực tiếp hoặc dùng gián tiếp thông qua thuộc tính của nó. Một số đối tượng tham chiếu đến đối tượng khác thông qua thuộc tính ví dụ như sản phẩm trong danh mục sản phẩm.

Ví dụ:

{{ product.name }}

Output:
Váy em bé hồng chấm bi trắng

Scope của đối tượng

Một số đối tượng có thể truy cập bất kì đâu (global), một số chỉ xuất hiện trong ngữ cảnh cụ thể. Ngoài ra có thể tham chiếu tới đối tượng một cách gián tiếp thông qua thuộc tính của đối tượng khác

Tạo đối tượng

Bạn cũng có thể tạo biến bằng việc sử dụng các thẻ biến. Các biến này được sử dụng như một đối tượng bình thường