Shopify二次开发之三:liquid语法学习(Tags)

news/2024/11/26 6:32:30/

目录

Tags

变量声明

assign

capture

decrement

increment

条件语句

if 

else

unless

case

HTML

form表单生成

style

Iteration (遍历)

for

else

break

continue

cycle

paginate

Theme (主题)

render渲染一个snippet,可以传值

sections渲染一个sctions-group

section渲染一个sction

stylesheet & javascript:渲染css、js代码


liquid代码主要包括三部分,Tags、Filters、Objects

Tags

tags定义模板相关逻辑, 在liquid中,只有两种标记的方式,一种是{{  }}另一种是{% %}。

变量声明

liquid数据类型:String、Number、Boolean、Nil、Array、Object

assign
{% assign variable_name = value %}{% assign variable_name = value1 %}

如果对一个变量继续赋值需要重新assign

capture
{%- assign up_title = product.title("Health potion") | upcase -%}
{%- assign down_title = product.title | downcase -%}
{%- assign show_up_title = true -%}{%- capture title -%}{% if show_up_title -%}Upcase title: {{ up_title }}{%- else -%}Downcase title: {{ down_title }}{%- endif %}
{%- endcapture %}{{ title }}

输出:Upcase title: HEALTH POTION

capture能够配合liquid逻辑将开始与结束标记之间的字符串捕获之后赋值给一个变量title

decrement
  {% decrement variable %}{% decrement variable1 %}{% decrement variable %}{% decrement variable1 %}{% decrement variable1 %}

输出: -1 -1 -2 -2 -3

decrement标记会生成一个变量,初始值为-1,每次执行同样的decrement代码就会减1

increment
{% increment variable %}
{% increment variable %}
{% increment variable %}

输出: 0 1 2

increment 标记会生成一个变量,初始值为0,每次执行同样的increment 代码就会加1

条件语句

操作符

==!=><>=<=orandcontainsblank
相等不相等大于小于大于等于小于等于逻辑或逻辑与包括

condition

( a > b , 'a大于b' )

( a or b, 'a为真或b为真' )

( a and b, 'a与b都为真' )

( a contains 'str', 'a包含str字串')

( a == blank, 'a是否为空')

如果要判断一个值是否为空值可以用blank,比如对空字符串 ''、 空对象{}、空数组[]、特殊空值Nil。

在liquid判断中,只有两种情况为假值,nil和false,其他的都是真值。

expression

可以在模板中渲染任何你想渲染的东西,比如渲染一个标签也比如渲染一个样式,总之就是根据条件渲染指定的东西。

if 

{% if condition %}expression
{% endif %}
else

{% if condition %}expression1
{% else %}expression2
{% endif %}
unless
{% unless condition %}expression
{% endunless %}
case
{% case variable %}{% when first_value %}first_expression{% when second_value %}second_expression{% else %}third_expression
{% endcase %}
HTML
form表单生成
  • activate_customer_password
  • cart
  • contact
  • create_customer
  • currency
  • customer
  • customer_address
  • customer_login
  • guest_login
  • localization
  • new_comment
  • product
  • recover_customer_password
  • reset_customer_password
  • storefront_password

比如form product

{% form 'product', product %}<select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select><button type="submit">Add to cart</button>
{% endform %}

又比如form contact

{% form 'contact' %}{{ form.errors | default_errors }}<div class="email"><label for="email">Email</label><input type="email" name="contact[email]"></div><div class="email"><label for="email">Name</label><input type="text" name="contact[name]"></div><div class="message"><label for="message">Message</label><textarea name="contact[body]"></textarea></div><div class="submit"><input type="submit" value="Create"></div>
{% endform %}

发送邮件之后,商家的邮箱就会收到如下内容

style

{% style %}.h1 {color: {{ settings.colors_accent_1 }};}
{% endstyle %}
Iteration (遍历)
for
{% for product in collection.products -%}{{ product.title }}
{%- endfor %}

输出:

Draught of Immortality
Glacier ice
Health potion
Invisibility potion

else
{% for variable in array %}first_expression
{% else %}second_expression
{% endfor %}

当array长度为0的时候渲染 second_expression

break
{% for i in (1..5) -%}{%- if i == 4 -%}{% break %}{%- else -%}{{ i }}{%- endif -%}
{%- endfor %}

输出:1 2 3

1..5表示依次从1渲染到5,当条件i == 4的时候,break,结束循环。 

continue
{% for i in (1..5) %}{% if i == 4 %}{% continue %}{% else %}{{ i }}{% endif %}
{% endfor %}

输出:1 2 3 5

1..5表示依次从1渲染到5,当条件i == 4的时候,continue ,跳到下次循环。 

cycle
{% cycle 'one', 'two', 'three' %}
{% cycle '11', '22', '33' %}
{% cycle 'one', 'two', 'three' %}
{% cycle '11', '22', '33' %}

输出:

one 11 two 22

paginate
{% paginate collection.products by 4 %}{% for product in collection.products %}{% render 'product-item', product: product %}{% endfor %}{{ paginate | default_pagination }}
{% endpaginate %}

by 4 表示一组4个,  {{ paginate | default_pagination }} 模板渲染默认分页导航

Theme (主题)
render渲染一个snippet,可以传值

{% render 'product-item', product: product %}
sections渲染一个sctions-group

{% sections 'xxx-group' %}
section渲染一个sction

{% section 'xxx-section' %}
stylesheet & javascript:渲染css、js代码
{% stylesheet %}css_styles
{% endstylesheet %}{% javascript %}javascript_code
{% endjavascript %}

注意: Liquid 不会在stylesheet & javascript里渲染,只能渲染寻常css和JavaScript代码


http://www.ppmy.cn/news/1255315.html

相关文章

Kubernetes实战(六)-多系统架构容器镜像构建实战

1 背景 最近在一个国产化项目中遇到了这样一个场景&#xff0c;在同一个 Kubernetes 集群中的节点是混合架构的&#xff0c;即其中某些节点的 CPU 架构是 x86 的&#xff0c;而另一些节点是 ARM 的。为了让镜像在这样的环境下运行&#xff0c;一种最简单的做法是根据节点类型为…

Flyway 数据库版本管理 | 专业解决方案

前言 目前很多公司都是通过人工去维护、同步数据库脚本&#xff0c;但经常会遇到疏忽而遗漏的情况&#xff0c;同时也是非常费力耗时 比如说我们在开发环境对某个表新增了一个字段&#xff0c;而提交测试时却忘了提交该 SQL 脚本&#xff0c;导致出现 bug 而测试中断&#xf…

基础组件总结(以Element UI组件库为例)

一般对一个组件的使用方式&#xff1a; 每一个组件都有被绑定的数据&#xff0c; &#xff08;1&#xff09;首先会对组件的数据初始化&#xff08;a.data中赋初值 b. 在生命周期函数created或mounted中为变量赋予初值&#xff09; &#xff08;2&#xff09;由于不同组件的…

深度学习——第03章 Python程序设计语言(3.1 Python语言基础)

无论是在机器学习还是深度学习中&#xff0c;Python已经成为主导性的编程语言。而且&#xff0c;现在许多主流的深度学习框架&#xff0c;例如PyTorch、TensorFlow也都是基于Python。本课程主要是围绕“理论实战”同时进行&#xff0c;所以本章将重点介绍深度学习中Python的必备…

算法通关村第三关—数组基本操作(青铜)

数组基本操作 一、数组的创建和初始化 创建 int[] arr new int[10];初始化 int[] arr new int[]{0,1,2,3} int[] arr {0,1,2,3}二、增加一个元素 将给定的元素插入到有序数组的对应位置中&#xff0c;我们可以先找位置&#xff0c;再将其后元素整体右移&#xff0c;最后…

一天一个设计模式---责任链模式

责任链模式 简介 将不同职责的步骤进行串联&#xff0c;前一个执行完成之后才可以执行下一个&#xff0c;即前一个的责任完成之后会将这个责任给到下一个。 组成结构 一共有两个主要的类 抽象的处理类&#xff08;Handle&#xff09;&#xff0c;封装了每一个职责处理请求…

QT 中 QTimer 类 备查

基础 // 指定了父对象, 创建的堆内存可以自动析构 QTimer::QTimer(QObject *parent nullptr);// 根据指定的时间间隔启动或者重启定时器, 需要调用 setInterval() 设置时间间隔 void QTimer::start();// 启动或重新启动定时器&#xff0c;超时间隔为msec毫秒。 void QTimer::…

PHP常见错误

初学者在编程时&#xff0c;经常会遇到各种错误&#xff0c;那么如何 正确的处理错误则是可以提高开发效率。 一&#xff1a;错误&#xff08;Error&#xff09; 1.1 什么是错误及错误的级别 错误是指在开发阶段中由一些失误引起的程序问题&#xff0c;根据其出现在编程过程…