在Shopify商店中,静态元素以HTML编写,动态元素以Liquid编写。
→ 官方 Liquid 代码实例
→ 官方 Liquid 学习资料
Liquid 代码实质上是一个占位符。它用于编译代码并将其发送到浏览器时,从 Shopify 商店中检索特定的引用数据,例如您的商店名称、产品详细信息、图片等。然后,浏览器会抓取
Javascript 和 CSS 文件等资产来显示您的自定义主题。
这使得 Shopify 主题是不可知的,这意味着相同的代码无需调整即可适用于许多商店。
作为输出的对象由双大括号表示:
{{ ... }}
创建逻辑和控制流的标记由大括号和每侧的百分号表示:{% ... %}
可以在双大括号中使用过滤器来更改对象的输出。
Liquid 的特点是有三个关键部分:对象、标签和过滤器。
对象Objects(也称为变量)表示一个或多个值。它们可以代替任何内容,从标题到数字,从计算结果到数据库查询结果。
在 Liquid 中,对象(用双大括号括起来)将数据片段输出到页面上。
单个对象可以支持许多不同的属性,并且点语法系统将对象与其属性分开。例如,在对象{{ page.title }}
中,点之前的术语是对象,点之后的术语是属性。因此,这将输出 page 对象的 title 属性。
对象是 Liquid 的基础,它们决定商店的访客实际可以看到什么的功能:
Content objects 内容对象:输出模板和分区文件内容,创建的任何样式表或脚本。
Global objects 全局对象,全局变量,可以从模板中的任何 Liquid 文件访问。比如各种列表:产品、文章、博客、产品分类系列、标签、所有页面、当前主题的设置。
其他对象。
所有对象都有很多属性,每个属性都有自己的功能。
标签Tags(用大括号和百分号括起来)用于为模板创建逻辑。
标签或者说标记,比对象更活跃,可以创建循环、运行条件 if/then 语句以及更改显示方式。
四种类型的标签:
1 - 主题标签。输出特定于模板的 html 标签,告诉主题使用哪些布局和代码片段,并将数组(变量列表)分解成多个页面。
例如,{%form%}
标签用于将表单添加到页面。
2 - 变量标签。创建新变量。
例如,{%assign%}
标记允许创建和命名新变量。
3 - 迭代标签。重复代码块。例如,{% for %}
标签重复执行一段代码。可以在页面上显示产品集合和分页。
4 - 控制流标签。根据情况确定是否执行代码块。{% if %}
过滤器Filters用于修改输出,由 | 竖线符号指示,过滤器可以执行许多操作来更改对象在页面上的显示方式。
过滤器位于对象的大括号内,根据许多不同的操作来增强其输出。不同的类型过滤器包括:
Color 颜色
Font 字体
HTML 元素,如付款按钮,时间戳
Math 数学,方程式合并到对象中,特定交易,百分比折扣
Money 货币,制定货币格式
Date 日期筛选器:确定对象中使用的日期格式
Highlight 高亮显示文本
String 字符串,大小写,预制字符,附加字符,删除单词,截断字符串等。
Array 数组筛选器,输入的数组更改为特定方式如,倒车,连接,排序等等。