Tìm hiểu liquid, mã nguồn mở dựa trên nền tảng [Phần 1]

Liquid là một mã nguồn mở, Ngôn ngữ mẫu được sáng tạo bởi Shopify dựa trên nền tảng ngôn ngữ Ruby. Nó là thành phần chính của các theme trong Shopify và được sử dụng để tải các nội dung động lên giao diện các cửa hàng. Liquid sử dụng sự kết hợp các tag (nhãn), object (đối tượng) và filter (bộ lọc) để tải những nội dung động. Chúng được sử dụng bên trong các tài liệu mẫu của Liquid, nhóm các tệp tin này tạo thành một theme.

1.Tag

Liquid tags là những logic của chương trình để điều khiển những gì các template thực hiện. Tags nằm trong khối:{% %}.

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

2.Object

Các đối tượng Liquid bao gồm nhiều thuộc tính để xuất nội dung động lên một trang. Ví dụ, đối tượng product chứa 1 thuộc tính được gọi là title, thuộc tính này được sử dụng để xuất ra tên của một sảm phẩm.

{{ product.title }}  

2.1.Global Objects

Những đối tượng dưới đây có thể được sử dụng và truy cập từ bất cứ tập tin nào trong theme của bạn, và được xác định như đối tượng toàn cục hoặc biến toàn cục.

2.2.blogs

Đối tượng Liquid blogs dẫn tới đường link các bài viết trên giao diện cửa hàng của bạn

<ul>
  {% for article in blogs.myblog.articles  %}
   <li>{{ article.title | link_to: article.url }}</li>
  {% endfor %}
</ul>

2.3.cart

Đối tượng Liquid cart dẫn tới giỏ hàng trong cửa hàng của bạn

2.4.collections

Đối tượng liquid collections bao gồm một danh sách tất cả các bộ sưu tập trong cửa hàng

{% for product in collections.frontpage.products %}
  {{ product.title }}
{% endfor %}

2.5.current_page

Đối tượng current_page trả về số trang bạn đang duyệt thông qua thông tin về phân trang

{% if current_page != 1 %} Page {{ current_page }}{% endif %}

2.6.current_tags

Đối tượng current_tags sẽ bao gồm những danh sách các tag khác nhau dựa trên loại template mà nó đưa ra

{% if current_tags %}
  <h1>{{ blog.title | link_to: blog.url }} › {{ current_tags.first }}</h1>
{% else %}
  <h1>{{ blog.title }}</h1>
{% endif %}

2.7.customer

Đối tượng customer chỉ được định nghĩa khi một khách hàng đăng nhập vào cửa hàng.

{% if shop.customer_accounts_enabled %}
  {% if customer %}
    <a href="/account">My Account</a>
    {{ 'Log out' | customer_logout_link }}
  {% else %}
    {{ 'Log in' | customer_login_link }}
    {% if shop.customer_accounts_optional %}
      {{ 'Create an account' | customer_register_link }}
    {% endif %}
  {% endif %}
{% endif %}

2.8.linklists

Đối tượng linklists bao gồm một bộ sư tập tất cả các liên kết trong cửa hàng của bạn. Bạn có thể truy cập một linklist bằng cách gọi handle của nó trên linklists.

<ul>
 {% for link in linklists.categories.links %}
    <li>{{ link.title | link_to: link.url }}</li>
  {% endfor %}
</ul>

2.9.pages

Đối tượng pages tham chiếu đến tất cả các trang trong cửa hàng của bạn.

<h1>{{ pages.about.title }}</h1>
<p>{{ pages.about.author }} says...</p>
<div>{{ pages.about.content }}</div>

2.10.page_description

Người bán có thể định rõ một page_description. Trường này sẽ tự động được gắn với sản phẩm/ bộ sưu tập/ mô tả khoản mục

{% if page_description %}
  <meta name="description" content="{{ page_description }}" />
{% endif %}

2.11.page_title

Đối tượng page_title trả vè tên của trang hiện tại.

{{ page_title }}

2.12.shop

Đối tượng shop trả về thông tin về cửa hàng (website) của bạn.

2.13.template

Đối tượng template trả về tên của template được sử dụng để hiển thị trang hiện tại, bỏ qua phần mở rộng .liquid. Đây là cách tốt nhất để bạn sử dụng đối tượng template trong một lớp

{% if template contains 'product' %}
  WE ARE ON A PRODUCT PAGE.
{% endif %}

2.14.settings

Đối tượng settings giúp bạn truy cập tới tất cả các cài đặt của theme.

{% if settings.use_logo %}
{{ 'logo.png' | asset_url | img_tag: shop.name }}
{% else %}
<span class="no-logo">{{ shop.name }}</span>
{% endif %}
{% if settings.featured_collection and settings.featured_collection != ' and collections[settings.featured_collection].handle == settings.featured_collection and collections[settings.featured_collection].products_count > 0 %}
{% for product in collections[settings.featured_collection].products %}
  {% include 'product-loop' %}
{% endfor %}
{% endif %}

2.15.theme

Đối tượng theme miêu tả theme hiện đang sử dụng/.

Go to your <a href="/admin/themes/{{ theme.id }}/settings">Customize theme page</a>.

2.16.themes

Đối tượng themes cung cấp quyền truy cập tới các theme công khai của các cửa hàng.

We have a beautiful mobile theme, it's called {{ themes.mobile.name | link_to_theme: "mobile" }}

To be continued

Nguồn: https://docs.shopify.com/themes/liquid