HTML filters
Bộ lọc HTML bọc nội dung trong thẻ HTML
Danh sách bộ lọc html
img_tag
Tạo ra một thẻ img.
Input
{{ 'logo.png' | asset_url | img_tag }}
Output
<img src="//hstatic.net/434/1000006434/1000083751/logo.png" alt="">
img_tag chấp nhận tham số để kết quả đầu ra một thẻ alt và tên class. Tham số đầu tiên là đầu ra của thẻ alt, và bất kỳ tham số khác là đầu ra của class CSS.
Input
{{ 'logo.png' | asset_url | img_tag: 'Đây là mô tả', 'class1 class2' }}
Output
<img src="//hstatic.net/434/1000006434/1000083751/logo.png" alt="Đây là mô tả" class="class1 class2">
Bộ lọc img_tag có thể dùng cho các đối tượng sau:
Input
{{ product | img_tag }}
{{ variant | img_tag: 'alternate text' }}
{{ line_item | img_tag: 'alternate text', 'css-class' }}
{{ image | img_tag: 'alternate text', 'css-class', 'small' }}
{{ collection | img_tag: 'alternate text', 'css-class', 'large' }}
Output
<img src="//hstatic.net/434/1000006434/1000083751/default.jpg" alt="Default" />
<img src="//hstatic.net/434/1000006434/1000083751/default.jpg" alt="alternate text" />
<img src="//hstatic.net/434/1000006434/1000083751/default.jpg" alt="alternate text" class="css-class" />
<img src="//hstatic.net/434/1000006434/1000083751/default_small.jpg" alt="alternate text" class="css-class" />
<img src="//hstatic.net/434/1000006434/1000083751/default_large.jpg" alt="alternate text" class="css-class" />
script_tag
Tạo ra một thẻ script.
Input
{{ 'shop.js' | asset_url | script_tag }}
Output
<script src="//hstatic.net/434/1000006434/1000083751/shop.js" type="text/javascript"></script>
stylesheet_tag
Tạo ra một thẻ stylesheet.
Input
{{ 'shop.css' | asset_url | stylesheet_tag }}
Output
<link href="//hstatic.net/434/1000006434/1000083751/shop.css" rel="stylesheet" type="text/css" media="all" />