Liquid模板语言参考文档

Liquid是由Shopify创建并使用Ruby编写的模板语言。现在，它可以作为GitHub上的开源项目使用，并被许多不同的软件项目和公司使用。 Liquid是所有Shopify主题的骨干，用于将动态内容加载到在线商店的页面上。

什么是模板语言？
网站设计人员和开发人员可以使用模板语言来构建将多个页面上相同的静态内容与一个页面之间变化的动态内容相结合的网页。模板语言可以重新使用定义网页布局的静态元素，同时使用Shopify商店中的数据动态填充页面。静态元素用HTML编写，动态元素用Liquid编写。文件中的Liquid元素充当占位符：当文件中的代码被编译并发送到浏览器时，Liquid替换为安装主题的Shopify商店中的数据。

Liquid语法
与传统的编程语言一样，Liquid具有语法，与变量交互以及包括输出和逻辑之类的构造。由于其可读性良好的语法，Liquid构造易于识别，并且可以通过两组定界符与HTML进行区分：双大括号定界符{{}}（表示输出）和大括号百分比定界符{％％}，表示逻辑和控制流程。

Liquid代码具有三个主要功能：

• Objects
• Tags
• Filters

 

　　Objects对象
Liquid对象从Shopify管理员输出数据。 在主题模板中，对象用双花括号定界符{{}}包裹起来，如下所示：

?

1	{{ product.title }}

　　在上面的示例中，product是对象，而title是该对象的属性。 每个对象都有一个关联的属性列表。 要了解有关product对象属性的更多信息，请参见liquid产品参考。

可以在Shopify主题的产品模板中找到{{product.title}} Liquid对象。 当文件中的代码被编译并呈现在Shopify商店的产品页面上时，Liquid对象的输出将是产品的标题。 例如，在服装店中，结果可能是：

?

1	Awesome T-Shirt

　　即使Shopify商店中的每个产品都使用相同的模板，模板中的Liquid对象也会根据您正在查看的产品页面输出不同的数据。

要了解有关可在主题模板中使用的不同Liquid对象的更多信息，请参见Liquid objects页面。

 

　　Tags标签
Liquid标签用于创建逻辑和控制模板的流程。 呈现网页时，大括号百分比定界符{％％}及其周围的文本不会产生任何可见输出。 这使您可以分配变量并创建条件或循环，而无需在页面上显示任何Liquid逻辑。

例如，您可以使用Liquid标签根据产品是否可用来在产品页面上显示不同的内容：

?

1 2 3 4 5

{% if product.available %} <h2>Price: $99.99</h2> {% else %} <h2 class="sold-out">Sorry, this product is sold out.</h2> {% endif %}

　　如果有该产品，则输出将是：

?

1	Price: $99.99

　　如果该产品不可用，则输出将是：

?

1	Sorry, this product is sold out.

　　上面的例子中使用了if 和 else 的Liquid tags标签，这是控制流标签。

Liquid标签分为以下几种类型：

• Control flow tags
• Iteration tags
• Theme tags
• Variable tags
• Deprecated tags

 

Filters筛选器

liquid过滤器用于修改数字，字符串，对象和变量的输出。 它们放置在输出标签{{}}中，并用竖线字符|表示。

一个简单的例子是大写字符串过滤器：

?

1	{{ 'hello, world!' | capitalize }}

　　这个过滤器通过大写修改字符串。 输出将是：

?

1	Hello, world!

　　一个输出可以使用多个过滤器，并且从左到右应用它们：

?

1	{{ 'hello, world!' | capitalize | remove: "world" }}

　　首先将字符串大写，然后删除单词world。 输出将是：

?

1

Hello, !

　　您可以使用Liquid过滤器进行多种有用的数据处理。 它们分为8种类型：

• Array filters
• Color filters
• HTML filters
• Math filters
• Money filters
• String filters
• URL filters
• Additional filters

访问主题模板

您可以从Shopify管理员的“主题”部分访问主题的Liquid文件：

1. 进入站点后台，找到Online Store > Themes.

2. 找到要编辑的主题，点击 Actions > Edit code.

1. 编辑修改相应的文件

2. 点击保存 Save.

3. 访问前端页面看看是否有Liquid 输出.

其他资源

Liquid代码示例

Shopify Liquid代码示例是一个可搜索的代码示例库，它基于主题组件，可帮助您更快，更可靠地构建主题并牢记可访问性。