Liquid的概述:Shopify的模板语言

如果你是Shopify平台的新手，并且通读了我们的内容，你可能会想知道所有关于Liquid的引用实际上是指什么。在这篇文章中，我们将解释所有你需要知道的关于Liquid，它如何适合Shopify主题建设，以及核心概念，使你能够开始构建强大的和身临其境的电子商务模板。OB欧宝娱乐APP让我们从一点历史开始。

Liquid是由Shopify联合创始人兼首席执行官Tobias l tke开发的GitHub上的开源项目。今天，它被用于许多不同的软件项目，从内容管理系统到静态站点生成器，当然还有Shopify。

液体:语言还是引擎?

一些人将Liquid称为模板语言，而另一些人则称其为模板引擎。你用哪一种标签并不重要——在很多方面，两种标签都是正确的。就我个人而言，我喜欢称之为模板语言。它有语法(像传统编程语言一样)，有输出、逻辑和循环等概念，它与变量(数据)交互，就像您使用PHP等以web为中心的语言一样。

然而，相似之处就到此为止了。有很多你不能用液体做的设计。例如，它没有“状态”的概念，它不能让您深入到平台的掩护下，并且对于经验丰富的编码人员来说，有时可能看起来与直觉相反。然而，这是经过深思熟虑的，最初看起来像是限制的东西通常是有意的，而且有很好的理由。

液体的功能

像任何模板语言一样，Liquid在HTML文件和数据存储之间创建了一座桥梁——在我们的上下文中，数据当然是一个Shopify商店。它允许我们从模板或Liquid文件中访问变量，语法简单易读。

在Shopify中，每个Liquid文件都允许我们访问某些变量，而无需做任何繁重的工作。例如，product.liquid模板允许我们访问与当前查看的产品相关的所有详细信息。反过来，Liquid允许我们在不了解实际产品本身的情况下输出这些数据。这些变量被称为模板变量。你也可以使用Liquid来检索我们无法获得的数据。例如，您可以要求Shopify用特定集合中的所有产品填充您创建的变量。

一旦我们知道了我们可以访问或创建的变量的名称，我们就可以使用像“output”和“loops”这样的Liquid结构来显示我们的Liquid文件中的数据。

Shopify平台了解要检索哪些数据，以及如何根据主题中的Liquid代码显示这些数据。它可以是显示产品名称的简单情况，也可以是稍微复杂一些的情况，例如显示一系列产品图像。

像Liquid这样的模板语言的最大好处是，作为设计人员，您不需要了解任何关于存储数据本身的信息。因此，您的主题是100%不可知论的，可以在不了解商店内容的情况下应用于多个商店。

你可能还喜欢:面向前端开发人员的8个最佳免费Shopify资源和工具。

Liquid的文件扩展名和分隔符

液态文件的扩展名为.liquid。liquid文件是标准HTML代码和liquid结构的混合。它是一种易于阅读的语法，并且在处理Liquid文件时很容易与HTML区分开来。由于使用了两组分隔符，这变得更加容易。

双花括号分隔符{{}}表示输出，以及大括号百分比分隔符{% %}表示逻辑。你会变得非常熟悉这些，因为每个液体结构都以一个或另一个开头。

分隔符的另一种理解方式是“占位符”。占位符可以被视为一段代码，当编译后的主题发送到浏览器时，它最终将被数据取代。由于Liquid文件中的Liquid代码，该数据完全由主题设计人员确定。因此，Liquid主题，就像将PHP和HTML拼接在一起的模板一样，作为将要呈现的内容的表示形式。

输出

让我们检查一下“输出”的语法。顾名思义，Liquid中的输出将从我们的存储输出一段数据到页面。

中常见的输出占位符的快速示例product.liquid文件:

< h2 >{{产品。h2标题}}< / >

在呈现时，这将输出当前查看的产品的名称，而不是{{}}，例如:

美式餐杯

输出，除非使用过滤器(我们将很快看到)进行操作，否则只是将整个占位符替换为来自商店的文本字符串。

对象和属性

这个例子还向我们介绍了Liquid点语法。这在许多模板和服务器端语言中很常见。把我们的shop.name我们可以把它分成两部分。

前面的第一个元素。在这个例子中，它是商店对象。这是一个变量，表示我们在Shopify管理中定义的与商店相关的所有数据。这些数据项目包括:

• shop.address
• shop.address.city
• shop.address.country
• shop.address.country_upper
• shop.address.province
• shop.address.province_code
• shop.address.street
• shop.address.summary
• shop.address.zip
• shop.collections_count
• shop.currency
• shop.description
• shop.domain
• shop.email
• shop.enabled_currencies
• shop.enabled_payment_types
• shop.metafields
• shop.money_format
• shop.money_with_currency_format
• shop.name
• shop.password_message
• shop.permanent_domain
• shop.phone
• shop.policies
• shop.privacy_policy
• shop.products_count
• shop.published_locales
• shop.refund_policy
• shop.shipping_policy
• shop.terms_of_service
• shop.secure_url
• shop.taxes_included
• shop.types
• shop.url
• shop.vendors

后的项目。表示商店对象的属性。属性可以像商店名称一样简单(如上面的例子所示)，也可以是一个项目列表，例如商店中启用的支付类型的种类。

你可能还喜欢:Shopify主题开发的基本资源列表。

属性集合

从上面的列表中，你会注意到许多属性都是复数形式，例如:

• shop.enabled_payment_types
• shop.metafields
• shop.types

这些属性代表液体集合。它们将返回一个数据数组，而不是返回像商店名称这样的数据字符串——换句话说，是一个我们可以通过Liquid循环访问的项目列表。

当第一次使用Shopify和Liquid时，很容易被集合弄糊涂——我当然是这样。因此，我将提到“产品系列”和“液体系列”。前者是在Shopify管理中定义的产品的逻辑分组，后者是我们可以在Liquid代码中访问的项目列表。

最后，值得一提的是，Liquid集合中的每个列表项也可以具有属性。一个很好的例子是product.images。这表示已添加到特定产品的所有图像的列表。

列表中的每个图像都有多个与之相关的属性:

• image.alt
• image.aspect_ratio
• image.attached_to_variant吗?
• image.height
• image.id
• image.media_type
• image.position
• image.preview_image
• image.product_id
• image.src
• image.variants
• image.width

为了访问这些属性，我们必须使用Liquid循环。

液体循环

循环在Shopify主题中广泛使用，并且非常容易理解。如果您做过任何形式的基础编程，那么您可能对循环的概念非常熟悉。

使用循环，通常称为for循环，允许我们在Liquid文件中输出同一段代码已知次数。如上所述，一个典型的例子是输出与产品相关的所有图像。

让我们看一个使用product.images我之前讨论过的液体收集。

我们使用这个循环的目的是输出特定产品的所有图像。下面是一个非常简单的循环，它将内联输出每个图像:

{%表示产品中的图像。图像%}

{% endfor %}

让我们把它分成几个步骤来完全理解它。

步骤1

{%表示产品中的图像。图像%}

第一行向我们介绍了第二种类型的分隔符，即大括号百分比语法{% %}。这里，我们用的是液体为循环。循环适用于Liquid集合，并允许我们依次迭代列表中的每个项目。如果我们当前查看的产品有6个与之相关的图像，我们的为循环将循环6次，如果它有10次，那么它将循环10次，以此类推。只有在查看了每个列表项之后(除非我们另有指示)，才会考虑页面的下一部分。

值得注意的是，除非我们明确询问我们的循环有多大，否则我们不知道将会发生多少次循环——只知道Liquid将依次遍历列表中的每个项目。循环将在最后一次迭代后结束，此时页面将继续其处理。

为了访问每个列表项的属性，我们指定一个变量来表示循环中的当前项。在上面的例子中是图像。虽然这是一个显而易见的选择，并将帮助其他设计师在未来理解你的逻辑，但它实际上可以是任何东西。例如，我们可以用alltheimagesintheworld，在这种情况下，它看起来如下:

{%表示产品中世界上所有的图像。图像%}

这当然是一个愚蠢的例子——图像更有意义，但我只是想强调一个事实，即这个变量与液体集合没有关系。

步骤2

我们的代码示例的第二行由部分HTML和部分Liquid组成。你还会注意到src属性使用Liquid输出标记填充。

这向我们介绍了过滤器的概念，用|(pipe)字符—稍后将详细介绍这些字符。在我们的示例中，过滤器接受图像变量(循环中的当前项)，并指定应该显示的图像的尺寸(以像素为单位)。

接下来，我们将查看由|字符表示的过滤器，但只需说明我们定义的参数将填充src属性，使用完全限定的URL指向列表中的当前图像。的所有工作都由过滤器完成src属性。

步骤3

{% endfor %}

示例的最后一行是结束语endfor声明。这告诉模板在执行完所有循环后继续执行。

如果我们有三个图像product.images对象，最终输出看起来像这样:

循环非常有用，是你在主题开发中每天都会遇到的东西。输出图像和产品变体是两个常见的例子。

你可能还喜欢:如何使用Shopify主题设置来创建移动特定的徽标。

液体过滤器

Liquid的另一个非常强大的特性是输出过滤器，我在上面的代码示例中使用了它。过滤器有三个主要用途:

• 它们以某种方式操作输出数据
• 它们允许我们的主题是不可知论的
• 它们通过减少我们需要编写的代码量来节省主题设计师的时间

过滤器总是与液体输出一起使用。让我们来看一些过滤器，从OB欧宝娱乐APP日期过滤器。

当输出一篇博客文章时，你可能想让读者知道它是什么时候发布的:

{{文章。published_at|日期: '%d %B %Y' }}

和之前一样，你会注意到|输出标记中间的字符(通常称为管道)。在管道的左边，我们有文章对象及其关联的published_at财产，在右边我们有日期使用参数表示日期格式的过滤器(在本例中)'%d %B %Y'。

如果没有过滤器，Shopify只会以存储在数据库中的格式输出博客文章的发布日期——这种格式可能不是人类可读的。然而，通过添加|包括日期过滤器，我们可以操纵格式，使其以我们想要的格式输出。

简单地说，过滤器允许我们从存储中取出一段数据并对其进行更改。我们从左边开始的OB欧宝娱乐APP内容通过我们的过滤器“管道”，并在右边出现大小改变的内容。这是最后的操纵数据，然后输出在前端的主题。

下面是另一个例子:

{{'style.css' | asset_url | stylesheet_tag}}

这里我们使用两个过滤器，最终目的是在布局文件中创建一个完全形成的样式元素。

我们从OB欧宝娱乐APP左侧的CSS文件的名称开始，它位于assets文件夹中。接下来我们应用第一个过滤器——在本例中是asset_url过滤器。这是一个非常有用的过滤器，你会经常使用。

我之前提到过，多亏了Liquid, Shopify的主题是不可知的。他们不需要对他们所针对的商店有任何了解，并且相同的主题可以应用于多个商店。然而，当我们试图引用资源时，这可能会导致问题，因为我们需要一种方法来知道某个资源(图像、JS文件、CSS文件)在网络上的位置。

值得庆幸的是,asset_url来拯救我们。通过使用这个过滤器，Shopify将返回主题的资产文件夹的完全限定路径，并在最后附加我们的资产名称。请记住，它实际上不会检查文件是否存在—在我们的示例中，由我们来确保标记的第一部分存在style.css在assets文件夹中。

下面是输出时的样子:

/ / cdn.shopify.com/s/files/1/0222/9076/assets/style.css

链条中的最后一个过滤器，stylesheet_tag，获取URL并将其包装在样式元素中，然后将其输出到布局文件中。这是最终结果:

有很多非常有用的过滤器，这里只是你会发现自己使用的一些:

• asset_url
• stylesheet_tag
• script_tag
• 日期
• 兼职
• 取代
• 处理
• 钱
• money_with_currency
• img_url
• link_to

液体的逻辑

《液体》的最后一个方面是逻辑。这里有一个例子:

{%如果产品。可用%}
< h2 >价格:£99.99 < / h2 >
{% else %}
抱歉-售罄

{% endif %}

在这个代码片段中，我们使用一个简单的如果，其他的，endif声明。在很多方面，如果陈述就像问题。根据问题的答案，将输出不同的标记，或者在某些情况下根本不输出标记。

在上面的例子中，如果我们的答案如果命题问题为真(product.available返回真或假)，则呈现“此产品可用”字样。如果它为假，我们的Liquid文件继续并输出我们的{% else %}在这种情况下，“对不起，这个产品已经卖完了。”

另一种看待逻辑的方式是，它允许我们控制页面的流程，并最终决定显示哪些数据。值得注意的是，与输出标记不同，在Liquid文件中包含逻辑标记不会导致直接呈现任何内容—相反，它们允许我们精确地控制呈现的内容。

你会发现自己在使用如果在Shopify主题开发中有很多声明。下面是另一个例子:

{%如果购物车。Item_count > 0 %}
您有{{购物车。Item_count}}购物车中的商品

{% else %}
你的购物车里什么也没有:(为什么不看看我们的产品范围

{% endif %}

这个代码片段演示了如何显示访问者购物车中的商品数量或输出指向您的产品的链接。

运营商

您会注意到，在本例中我们使用了大于>操作符。随着cart.item_count变量返回当前用户购物车中的商品数量，我们可以检查它是否大于零，即其中有商品。

如果返回真正的我们可以输出带有当前商品数量的消息，如果没有，我们可以输出:

你的购物车里什么也没有:(为什么不看看我们的产品范围
呢?

我们实际上可以用过滤器重构我们的例子。通过使用复数过滤器，我们可以根据购物车中的商品数量输出“item”或“items”。这里的好处是，我们不必知道计数，以便Shopify输出正确的名称:

{%如果购物车。Item_count > 0 %}
您有{{购物车。Item_count}}{{购物车。Item_count | pluralize: 'item'， 'items'}} in your cart

{% else %}
你的购物车里什么也没有:(为什么不看看我们的产品范围

{% endif %}

您将注意到重构后的示例现在包含兼职过滤器，它接受两个参数。第一个是单数，第二个是复数。

当我们使用>在上面的例子中，操作符的范围很广比较运算符液体中包括:

• = =等于
• ! =不等于
• >大于
• <不到
• ＞＝大于等于
• < =小于等于
• 或这个或那个
• 和一定是这个和那个
• 包含如果在字符串上使用，则包含子字符串，如果在数组上使用，则包含元素

默认情况下，即使你的Liquid代码没有输出，模板中的Liquid仍然会在最终的HTML中呈现空行。Liquid中的空白控件使您可以删除此控件。通过在标记语法中使用连字符，{{-，-}}，{% -,- - - - - - %}，您可以从呈现的标记的左侧或右侧删除空白。

液体小抄

如果您像我一样，将所有这些Liquid过滤器、操作符和结构提交到内存中会很困难。值得庆幸的是,Shopify液体小抄表可以搜索所有的Liquid对象、标签和过滤器，查看简单的示例，并访问参考文档。这是一个不可或缺的资源，我强烈建议您收藏并熟悉它。

液体代码示例

我们经常通过示例来学习，所以了解如何实现流行的主题组件是了解Shopify主题如何工作的好方法。的Shopify液态代码示例是一个主题组件库，帮助告知各种Liquid对象、属性和过滤器如何作为存储中元素的一部分一起工作。

总结

我们在这篇文章中介绍了很多内容，但希望它能让你对Liquid有一个扎实的介绍。以下是对我们所涵盖内容的回顾:

• Liquid是一种模板语言，它允许我们在模板中显示数据
• Liquid具有输出、逻辑、循环和处理变量等结构
• Liquid文件是HTML和Liquid代码的混合体，并且具有.liquid文件扩展名
• Shopify主题中使用的液体文件是不可知的，并且没有当前使用它们的商店的概念
• 在Liquid中使用的两种分隔符
• 如何输出数据从存储在一个液体文件
• 如何使用过滤器操作数据
• 如何循环在液体收集输出多个项目
• 在Liquid文件中使用逻辑
• 用于比较的不同类型的操作符
• 如何控制空白在液体

想了解更多关于为Shopify或您的客户构建主题的信息吗?您可以了解有关Liquid概念的更多信息以及如何在您自己的主题开发中使用它Shopify文档。