shopify123.cn--一个shopify自学开店、赚美金的网站!
当前位置:shopify > shopify开店教程 > 正文

shopify主题入门(3.liquid:标签)

表达式条码

表达式条码用以建立两个 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)

版权保护: 本文由 shopify 原创,转载请保留链接: http://www.shopify123.cn/shopify/4017.html