thiết kế giao diện với liquid
TRANSCRIPT
Thiết kế giao diện với Liquid
Bizweb - 20/12/2015
Liquid là gì?
• Ngôn ngữ lập trình giao diện
• Mã nguồn mở, phát triển từ năm 2006
• Sử dụng để frontend có thể truy cập và lấy dữ liệu từ backend một cách an toàn và dễ dàng.
Ưu điểm của Liquid
• Cấu trúc đơn giản, dễ nhớ, dễ sử dụng.• Kết hợp dễ dàng với cấu trúc HTML có sẵn.• Người dùng có thể tự tùy biến giao diện hiển thị mà không
cần liên quan đến backend.
Các hệ thống đang sử dụng
Liquid cho nhà phát triển giao diện
Liquid cơ bản• Các toán tử• Kiểu dữ liệu• Thẻ• Đối tượng• Bộ lọc
Các toán tử
Liquid hỗ trợ các toán tử logic, so sánh và toán tử bao hàm.
== bằng!= không bằng> lớn hơn< nhỏ hơn
>= lớn hơn hoặc bằng<= nhỏ hơn hoặc bằngor điều kiện A hoặc điều kiện B
and điều kiện A và điều kiện B
contains kiểm tra xem có sự xuất hiện của một chuỗi
{% if product.name == "Giày Converse" %} Đây là đôi giày Converse{% endif %}
{% if product.name contains 'Converse' %} Đây là một sản phẩm của Converse{% endif %}
Kiểu dữ liệu
Liquid hỗ trợ các kiểu dữ liệu cơ bản như:• Chuỗi• Số• Boolean• Mảng
Và ‘nil’ một giá trị rỗng được trả về khi thực thi một đoạn mã Liquid mà không thể cho ra kết quả
Thẻ
Liquid sử dụng các thẻ logic để thông báo cho hệ thống cần trả về dữ liệu là gì, các thẻ được bao bởi {% và %}
Thẻ điều khiểnluồng Thẻ lặp Thẻ giao diện Thẻ liên quan
đến biếnif for comment assign
elsif / else cycle include capturecase/when form increment
unless layout decrementpaginate
raw
<!-- Nếu customer.name = 'guest' -->{% if customer.name == 'Gyo' %} Chào bạn Gyo!{% elsif customer.name == 'guest' %} Xin chào quý khách!{% else %} Chào bạn!{% endif %}
Đối tượngCác đối tượng trong Liquid bao gồm các thuộc tính để xuất ra nội dung động tương ứng, khi gọi các thuộc tính theo đối tượng tương ứng, sử dụng {{ và }} để bao ngoài (ví dụ: {{ product.name }} ).
Các đối tượng tiêu biểu:• collection• product• cart• blog• article• page• customer• …
Đối tượng product
• product.available• product.collections• product.description• product.featured_image• product.alias• product.id• product.tags• product.name• product.type• product.url• product.vendor• ...
Bộ lọc
• Bộ lọc dùng để sửa đổi kết quả được xuất ra của một số, chuỗi, biến hoặc đối tượng.
• Chúng được đặt trong {{ }}, có thể dùng nhiều bộ lọc cùng lúc, khi đó chúng được phân cách bởi |
Các loại bộ lọc• Bộ lọc mảng:
join, first, last, index, map, size, sort• Bộ lọc HTML
img_tag, script_tag, stylesheet_tag• Bộ lọc toán học
ceil, divided_by, floor, minus,…• Bộ lọc tiền tệ
money, money_with_currency, money_without_currency,…• Bộ lọc chuỗi
append, camelcase, capitalize, downcase,…• Bộ lọc ULR
asset_url, img_url, link_to_tag,…• Các bộ lọc khác
date, hightlight,…
Cấu trúc giao diện Bizweb
• assets: bao gồm các file thư viện sẽ được sử dụng cho giao diện như ảnh, file css, và các file js
• configs: gồm 2 tập tin settings_schema.json và settings_data.json
• layouts: bao gồm các file khung giao diện, mặc định sẽ có theme.bwt
• snippets: gồm các đoạn mã ngắn (snippet) mà giao diện có thể dùng lại nhiều lần khi cần
• templates: bao gồm các template của giao diện
Hệ thống giao diện Bizweb
• Khung giao diện (layout)
• Các template cơ bản
• Thiết lập giao diện
Khung giao diện là gì?• Khung giao diện là một thành phần rất quan trọng của giao diện.• Các thành phần của website sẽ hiển thị thông qua khung giao
diện đang được kích hoạt.• Chỉ có một khung giao diện được sử dụng mỗi khi hiển thị trang
web.
theme.bwt• Khung giao diện chính, mặc định cho
mỗi giao diện.
• Các template sẽ được hiển thị thông qua khung giao diện này.
• Các thành phần xuất hiện lặp đi lặp lại ở tất cả các trang nên được đặt trong theme.bwt. Ví dụ: logo, menu đầu trang, phần chân trang
Template• Hệ thống giao diện Bizweb được tạo
nên bởi các file template Liquid.
• Mỗi file template có cách sử dụng khác nhau tùy vào nội dung nó được quy định để hiển thị.
• Các file template:• index.bwt• collection.bwt• product.bwt• blog.bwt• …
index.bwt
Hiển thị nội dung trang chủ của website.
Nội dung có thể gồm:• Giới thiệu website• Một danh sách sản phẩm• Sản phẩm tiêu biểu• …
collection.bwt
Hiển thị nội dung trang danh mục sản phẩm của website.
Nội dung có thể gồm:• Mô tả về danh mục sản phẩm• Danh sách các sản phẩm trong
danh mục• Một danh sách sản phẩm tiêu biểu• …
product.bwt
Hiển thị nội dung chi tiết của sản phẩm trên website.
Nội dung có thể gồm:• Tên sản phẩm• Ảnh sản phẩm• Mô tả chi tiết của sản phẩm• …
page.bwt
Hiển thị nội dung của một trang.
Nội dung có thể gồm:• Tiêu đề trang• Nội dung của trang• Banner quảng cáo• …
Thiết lập giao diện
Thiết lập giao diện• Người phát triển giao diện có thể dễ dàng thêm vào các tuỳ
chọn để người sử dụng có thể tuỳ biến các thành phần của giao diện mà không cần biết hay tìm hiểu về Liquid.
• Khả năng tuỳ biến đem lại sự tiện lợi cho người dùng, cũng như tạo nên điểm nổi trội của giao diện.
• Thông qua thiết lập giao diện, người sử dụng giao diện có thể:
• Kích hoạt ẩn/hiện một khu vực, đối tượng trên giao diện như banner, slideshow, hiển thị danh sách sản phẩm,…
• Thay đổi nội dung của một đối tượng như thay đổi ảnh banner, thay đổi danh mục sản phẩm sẽ hiển thị tại một khu vực,…
End.
Tạo trang index cơ bản với Bizweb
Giao diện trang chủ cơ bản
Phần đầu trang: • logo• menu điều hướng
Phần nội dung chính: • đoạn văn bản ngắn giới thiệu • một danh sách các sản phẩm tiêu
biểu
Phần chân trang:• Menu điều hướng phụ
theme.bwt
Phần đầu trang: • logo• menu điều hướng
Phần chân trang:• Menu điều hướng phụ
<!doctype html><html><head> <meta charset="utf-8"> {{ content_for_header }}</head><body> {{ content_for_layout }}</body></html>
<head>
<meta charset=“utf-8">
<title>{{ page_title }} - {{ store.name }}</title>
{{ content_for_header }}
{{ "normalize.css" | asset_url | stylesheet_tag }}
{{ "style.css" | asset_url | stylesheet_tag }}
{{ "common.js" | bizweb_asset_url | script_tag }}
{{ "customer.js" | bizweb_asset_url | script_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js' | script_tag }}
</head>
<head>
<body> <div class="container"> <div class="content"> {{ content_for_layout }} </div> </div></body>
<body>
<body>
<div class="container">
<h1 class="logo"><a href="/">{{ store.name }}</a></h1>
<div class="content">
{{ content_for_layout }}
</div>
</div>
</body>
<body>
<div class="container"> <h1 class="logo"><a href="/">{{ store.name }}</a></h1> <nav class="main-menu"> <ul> {% for link in linklists.main-menu.links %} <li {% if link.active %}class="current"{% endif %}>
<a href="{{ link.url }}">{{ link.title }}</a> </li>
{% endfor %} </ul> </nav>
<div class="content"> {{ content_for_layout }} </div> </div>
Header menu
…<div class="content">
{{ content_for_layout }} </div> <footer> <ul> {% for link in linklists.footer.links %} <li><a href="{{ link.url }}">{{ link.title }}</a></li> {% endfor %} </ul>
</footer> …
Footer menu
index.bwt
• Đoạn văn bản ngắn giới thiệu • Danh sách các sản phẩm
Hiển thị nội dung có sẵn từ trang nội dung
Lấy dữ liệu từ trang “Giới thiệu”
<div class="rte index-page"> <h2>{{ pages.gioi-thieu.title }}</h2> {{ pages.gioi-thieu.content }}</div>
Hiển thị danh sách sản phẩm
Sử dụng snippet
• Ảnh sản phẩm• Tên sản phẩm• Giá bán
<div class="product left {% cycle '','','','last' %}"> <div class="product-thumb"> <a href="{{ product.url }}"> <img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" /> </a> </div> <div class="product-title"> <a href="{{ product.url }}"> {{ product.name }} </a> </div> <div class="product-price"> {% if product.price_varies %}Giá từ{% endif %} {{ product.price | money }} </div></div>
<div class="clearfix">
<h2>Sản phẩm mới</h2>
<div class="collection-desc rte">
{{ collections.trang-chu.description }}
</div>
{% for product in collections.trang-chu.products %}
{% include 'product-loop' %}
{% endfor %}
</div>
<div class="clearfix">
<h2>Sản phẩm mới</h2>
<div class="collection-desc rte">
{{ collections.trang-chu.description }}
</div>
{% for product in collections.trang-chu.products limit:8 %}
{% include 'product-loop' %}
{% endfor %}
</div>