跳到主要内容

概览

Liquid 参考文档​

Liquid 是一种 template 语言。本参考文档介绍了可用于构建 Shoplazza 主题的 Liquid tags、filters 和 objects。

什么是 template 语言？​

Template 语言允许您创建一个用于承载静态内容的单一 template，并根据 template 渲染的位置动态插入相应信息。例如，您可以创建一个 product template，用于承载所有标准商品属性，例如商品图片、标题和价格。该 template 随后可以根据当前浏览的商品，动态渲染相应的内容。

Liquid 基础​

Liquid 用于动态输出 objects 及其属性。您可以通过 tags 创建逻辑来进一步修改输出，或直接使用 filter 对其进行处理。Objects 和 object 属性使用六种基本数据类型之一进行输出。Liquid 还包含基本的逻辑运算符和比较运算符，可配合 tags 使用。请参阅 Liquid 基础。

<title>{{ page_title}}</title>
<meta name="description" content="{{ page_description | truncatebytes: 320, '' }}">
<title>Geek</title>
<meta name="description" content="Full of story sense, suitable for building brand websites, designed for DTC type merchants theme.">

使用 tags 定义逻辑​

Liquid tags 用于定义告知 template 执行操作的逻辑。tag 分隔符内的文本在网页渲染时不会产生可见输出。请参阅 Tags。

📘 深入了解

{% %} 花括号百分号分隔符表示逻辑和流程控制。

{% if product.title == 'Tulip Dangles' %}
  It has an iconic silhouette.
{% endif %}
{
  "product": {
    "title": "Tulip Dangles"
  }
}
It has an iconic silhouette.

使用 filters 修改输出​

Liquid filters 用于修改变量和 objects 的输出。要对输出应用 filters，请在输出的花括号分隔符内，在管道符之后添加 filter 及其参数。请参阅 Filters。

多个 filters 可以应用于同一个输出，它们按从左到右的顺序依次解析。

📘 深入了解

{{ | }} Filters 置于输出 tag 内，以管道符标识。

{{ product.title | upcase | remove: 'TULIP' }}
{
  "product": {
    "title": "Tulip Dangles"
  }
}
DANGLES

引用 objects​

Liquid objects 代表可用于构建主题的变量。Object 类型包括但不限于：

  • 店铺资源，例如 collection 或 product 及其属性
  • 用于驱动 Shoplazza 主题的标准内容，例如 content_for_header
  • 可用于构建交互功能的元素，例如 paginate 和 search

Objects 可能表示单个数据点，也可能包含多个属性。某些 objects 可能表示关联的 object，例如 collection 中的 product。请参阅 Objects。

作用域​

某些 objects 可以在全局范围内访问，另一些则仅在特定上下文中可用。请参阅具体 object 的参考文档以了解其访问作用域。

创建变量​

您也可以使用 variable tags 创建自定义变量。变量在语法上与 objects 的处理方式相同。

📘 深入了解

{{ }} 双花括号分隔符表示一个输出。

<div class="product-detail">
  <div class="product-title">
    {{ product.title }}
  </div>
  <div class="product-price">
    {{ product.price | money }}
  </div>
</div>
{
  "product": {
    "title": "Tulip Dangles",
    "price": "12.88"
  }
}
<div class="product-detail">
  <div class="product-title">
    Tulip Dangles
  </div>
  <div class="product-price">
    $12.88
  </div>
</div>