表达式条码
表达式条码用以建立两个 liquid 表达式。
assign
建立两个重新命名表达式。
{% assign favorite_food = apples %}
My favorite food is {{ favorite_food }}.
capture
捕捉已经开始和完结记号内的数组,并将其表达式给两个表达式。 采用capture建立的表达式储存为数组。
采用capture,您能混和采用 assign 建立的其它表达式来建立繁杂数组。
{% assign favorite_food = pizza %}
{% assign age = 35 %}
{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}.
{% endcapture %}
{{ about_me }}
输入:
I am 35 and my favorite food is pizza.
increment
建立两个捷伊位数表达式,并在每天初始化该表达式的存量时将其值减少1。 计时器的常量为0。
{% increment counter %}
{% increment counter %}
{% increment counter %}
输入:
0
1
2
采用 increment 建立的表达式与采用 assign 或 capture 建立的表达式是合二为一的。
{% assign my_number = 10 %}
{% increment my_number %}
{% increment my_number %}
{% increment my_number %}
{{ my_number }}
输入:
0
1
2
10
decrement
建立两个捷伊位数表达式,并在每天对该表达式展开递增初始化时将其值减少1。 计时器的常量为-1。
{% decrement variable %}
{% decrement variable %}
{% decrement variable %}
输入:
-1
-2
-3
同increment,采用 decrement 建立的表达式与采用 assign 或 capture 建立的表达式是合二为一的。
业务流程掌控条码
if
{% if product.title == Awesome Shoes %}
You are buying some awesome shoes!
{% endif %}
unless
{% unless product.title == Awesome Shoes %}
You are not buying awesome shoes.
{% endunless %}
else / elsif
{% if shipping_method.title == International Shipping %}
Youre shipping internationally. Your order should arrive in 2–3 weeks.
{% elsif shipping_method.title == Domestic Shipping %}
Your order should arrive in 3–4 days.
{% else %}
Thank you for your order!
{% endif %}
case / when
case/when 近似于 switch 句子,default 前提改成 else 。
{% case shipping_method.title %}
{% when International Shipping %}
Youre shipping internationally. Your order should arrive in 2–3 weeks.
{% when Domestic Shipping %}
Your order should arrive in 3–4 days.
{% when Local Pick-Up %}
Your order will be ready for pick-up tomorrow.
{% else %}
Thank you for your order!
{% endcase %}
for
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
for/else
当循环对象的长度为0时,执行 else 句子。
{% for product in collection.products %}
{{ product.title }}
{% else %}
The collection is empty.
{% endfor %}
break
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
continue
{% for i in (1..5) %}
{% if i == 4 %}
{% continue %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
for循环参数
采用 offset 定义偏移个数:
<!-- numbers = [1,2,3,4,5] -->
{% for item in numbers offset:2 %}
{{ item }}
{% endfor %}
<!-- 输入 3 4 5 -->
采用 limit 定义限制个数:
<!-- numbers = [1,2,3,4,5] -->
{% for item in numbers limit:2 %}
{{ item }}
{% endfor %}
<!-- 输入 1 2 -->
组合采用 offset 和 limit:
<!-- numbers = [1,2,3,4,5] -->
{% for item in numbers offset:1 limit:2 %}
{{ item }}
{% endfor %}
<!-- 输入 2 3 -->
定义循环的位数范围,能采用字面量或表达式:
{% for i in (3..5) %}
{{ i }}
{% endfor %}
<!-- 输入 3 4 5 -->
{% assign my_limit = 4 %}
{% for i in (1..my_limit) %}
{{ i }}
{% endfor %}
<!-- 输入 1 2 3 4 -->
采用 reversed 倒序遍历数组:
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
{{ item }}
{% endfor %}
<!-- 输入 6 5 4 3 2 1 -->
reversed 和 offset, limit共用(reversed需要放在前面;结果为先获取数组元素再翻转):
{% assign numbers = 1,2,3,4,5,6,7 | split: , %}
{% for item in numbers reversed offset:3 limit:3 %}
{{ item }}
{% endfor %}
<!-- 输入 6 5 4 -->
cycle
循环遍历一组数组,并按照它们作为参数传递的顺序输入它们。每天初始化 cycle 时,都会输入作为参数传递的下两个数组。
cycle 必须在for循环块中采用。
{% for i in (1..4) %}
{% cycle one, two, three %}
{% endfor %}
输入:
one
two
three
one
cycle常用于:
- 对表中的行应用奇数/偶数类 - 对一行中的最后两个产品缩略图应用惟一类
cycle 接受两个 cycle 组参数,用于在两个模板中需要多个cycle块。 如果没有为循环组提供名称,则假定具有相同参数的多个初始化为两个组。例如:
{% for i in (1..2) %}
{% cycle one, two, three %}
{% endfor %}
{% for i in (1..3) %}
{% cycle one, two, three %}
{% endfor %}
上面代码会输入:
one
two
three
one
two
如果要想每两个for循环都重新已经开始迭 cycle ,需要给每个 cycle 起个组名:
{% for i in (1..2) %}
{% cycle one group: one, two, three %}
{% endfor %}
{% for i in (1..3) %}
{% cycle another group: one, two, three %}
{% endfor %}
上面代码会输入:
one
two
one
two
three
tablerow
用于生成 tr 和 td 条码,详情查看官网 https://shopify.dev/api/liquid/tags/iteration-tags#tablerow。
主轴相关条码
comment 注释
已经开始和完结条码内的任何文本和Liquid代码都不会执行。
My name is Wilson Abercrombie{% comment %}, esquire {% endcomment %}
输入:
My name is Wilson Abercrombie.
echo 输入
echo和 {{ }} 的功能一样,主要用于 liquid 条码内。
{% liquid
if product.featured_image
echo product.featured_image | image_url: width: 500 |image_tag: srcset: nil, width: 500
else
echo product-1 | placeholder_svg_tag
endif
%}
输入:
<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt.jpg?v=1398706734" alt="Red Shirt Small" width="500" />
form 表单
form条码会建立 form 元素和必要的 input 元素,你再补上其它的表单元素就构成了两个完成的表单。form 条码有众多的类型和参数。
下面举个登录表单的例子,其它表单类似:
{% form customer_login %}
...
{% endform %}
生成:
<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account/login" id="customer_login" method="post">
<input name="form_type" type="hidden" value="customer_login" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
官网完整表单条码:https://shopify.dev/api/liquid/tags/theme-tags#form
layout 布局
在模板文件的顶部定义模板的布局文件,如果没有定义,默认的布局文件为 theme.liquid。如果模板文件为json文件,则采用 layout 属性定义布局文件:
{% layout full-width %}
近似于json类型的模板文件能通过设置 layout 属性为 false 而不采用布局文件,在 liquid 类型的模板文件中,能也能通过指定 none 而不采用布局文件:
{% layout none %}
liquid
liquid 条码能让你在一组分隔符写多个条码。在liquid条码内能采用 echo 输入内容
{% liquid
case section.blocks.size
when 1
assign column_size =
when 2
assign column_size = one-half
when 3
assign column_size = one-third
else
assign column_size = one-quarter
endcase
%}
paginate 分页
paginate 用以实现分页效果,paginate 和 for 循环一起能将内容分割为多个页面。
paginate 条码并不会自动生成页码,需要通过 paginate 条码内部的 paginate 对象来自定义页码。
{% paginate collection.products by 5 %}
{% for product in collection.products %}
<!--show product details here -->
{% endfor %}
{% if paginate.previous %}
<a href="{{ paginate.previous.url }}">上一页</a>
{% endif %}
{% for part in paginate.parts %}
{% if part.is_link %}
<a href="{{ part.url }}">{{ part.title }}</a>
{% else %}
<span class="page{% if part.title == paginate.current_page %} current{% endif %}">{{ part.title }}</span>
{% endif %}
{% endfor %}
{% if paginate.next %}
<a href="{{ paginate.next.url }}">下一页</a>
{% endif %}
{% endpaginate %}
上面案例中,paginate 的参数 by 用以定义每页显示多少条数据。
raw 原生的
raw 条码内的代码不会被 liquid 解析,而是直接输入来。
{% raw %}{{ 5 | plus: 6 }}{% endraw %} equals 11.
输入:
{{ 5 | plus: 6 }} equals 11.
render
渲染 snippet 文件夹下的代码段,近似于 php 的 include 和 require。
{% render snippet-name %}
代码段作用域和父模板代码作用域是隔离的,如果代码段需要访问父模板作用域表达式,需要从父模板传递进去。
{% assign my_variable = apples %}
{% render snippet-name, my_variable: my_variable, my_other_variable: oranges %}
with...as... 参数,如果只传递两个表达式,能采用 with...as... 参数:
{%- assign str = hello world -%}
{% render snippet-name with str as str2 %}
接着就能在"snippet-name.liquid"文件中采用"str2"表达式。
for...as... 参数,如果要循环渲染多个代码段,除了在for循环中嵌套 render 条码,还能采用 render 条码的for...as参数:
{% assign variants = product.variants %}
{% render variant for variants as variant %}
如上,产品的每两个 variant 都会渲染一次"variant"代码段。
注意:有两个和 render 类似的条码 include,不过已被废弃,不建议采用,因为 include 进来的代码段和父模板作用域是不隔离的,效率低下且不好理解。
section
渲染两个 sections 文件夹中的分区。
{% section header %}
生成:
<div id="shopify-section-header" class="shopify-section">
<!-- content of sections/header.liquid -->
</div>
模板的分区并不一定要在 JSON 类型的模板文件中定义,通过 section 条码也能定义。
style 样式条码
Liquid style 条码渲染两个带有 data-shopify 属性的 HTML <style>条码。 将颜色设置放置在 style 条码中,允许您在不刷新整个页面的情况下从主轴编辑器展开实时颜色更新。
{% style %}
.hero__background-color-container {
background-color: {{ section.settings.background_color }}
}
{% endstyle %}
schema 条码
schema 条码放置在 section 文件任意位置中用以定义 section 的各种属性。两个 section 文件只能有两个 schema 条码,且不能嵌套。
schema 条码内容是两个json对象,json对象各个属性参考官网:Section schema (shopify.dev)