thiết kế giao diện với liquid
TRANSCRIPT
![Page 1: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/1.jpg)
Thiết kế giao diện với Liquid
Bizweb - 20/12/2015
![Page 2: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/2.jpg)
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.
![Page 3: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/3.jpg)
![Page 4: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/4.jpg)
Ư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.
![Page 5: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/5.jpg)
Các hệ thống đang sử dụng
![Page 6: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/6.jpg)
Liquid cho nhà phát triển giao diện
![Page 7: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/7.jpg)
Liquid cơ bản• Các toán tử• Kiểu dữ liệu• Thẻ• Đối tượng• Bộ lọc
![Page 8: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/8.jpg)
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
![Page 9: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/9.jpg)
{% 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 %}
![Page 10: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/10.jpg)
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ả
![Page 11: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/11.jpg)
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
![Page 12: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/12.jpg)
<!-- 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 %}
![Page 13: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/13.jpg)
Đố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• …
![Page 14: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/14.jpg)
Đố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• ...
![Page 15: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/15.jpg)
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 |
![Page 16: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/16.jpg)
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,…
![Page 17: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/17.jpg)
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
![Page 18: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/18.jpg)
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
![Page 19: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/19.jpg)
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.
![Page 20: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/20.jpg)
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
![Page 21: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/21.jpg)
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• …
![Page 22: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/22.jpg)
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• …
![Page 23: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/23.jpg)
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• …
![Page 24: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/24.jpg)
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 25: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/25.jpg)
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• …
![Page 26: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/26.jpg)
Thiết lập giao diện
![Page 27: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/27.jpg)
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,…
![Page 28: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/28.jpg)
End.
![Page 29: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/29.jpg)
![Page 30: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/30.jpg)
![Page 31: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/31.jpg)
![Page 32: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/32.jpg)
![Page 33: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/33.jpg)
Tạo trang index cơ bản với Bizweb
![Page 34: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/34.jpg)
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ụ
![Page 35: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/35.jpg)
theme.bwt
Phần đầu trang: • logo• menu điều hướng
Phần chân trang:• Menu điều hướng phụ
![Page 36: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/36.jpg)
<!doctype html><html><head> <meta charset="utf-8"> {{ content_for_header }}</head><body> {{ content_for_layout }}</body></html>
![Page 37: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/37.jpg)
<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>
![Page 38: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/38.jpg)
<body> <div class="container"> <div class="content"> {{ content_for_layout }} </div> </div></body>
<body>
![Page 39: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/39.jpg)
<body>
<div class="container">
<h1 class="logo"><a href="/">{{ store.name }}</a></h1>
<div class="content">
{{ content_for_layout }}
</div>
</div>
</body>
<body>
![Page 40: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/40.jpg)
<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
![Page 41: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/41.jpg)
…<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
![Page 42: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/42.jpg)
![Page 43: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/43.jpg)
index.bwt
• Đoạn văn bản ngắn giới thiệu • Danh sách các sản phẩm
![Page 44: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/44.jpg)
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”
![Page 45: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/45.jpg)
![Page 46: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/46.jpg)
<div class="rte index-page"> <h2>{{ pages.gioi-thieu.title }}</h2> {{ pages.gioi-thieu.content }}</div>
![Page 47: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/47.jpg)
![Page 48: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/48.jpg)
Hiển thị danh sách sản phẩm
![Page 49: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/49.jpg)
Sử dụng snippet
• Ảnh sản phẩm• Tên sản phẩm• Giá bán
![Page 50: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/50.jpg)
![Page 51: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/51.jpg)
<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>
![Page 52: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/52.jpg)
<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>
![Page 53: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/53.jpg)
![Page 54: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/54.jpg)
<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>
![Page 55: Thiết kế giao diện với Liquid](https://reader035.vdocuments.net/reader035/viewer/2022081514/58ee4e361a28abb7698b4595/html5/thumbnails/55.jpg)