Liquid语言操作指南

先判断问题出现在哪里

Liquid 不是一门真正的编程语言（如 JavaScript 或 Python），它是一种模板语言（Template Language）。

核心逻辑是：占位符替换与安全的数据渲染。

Shopify 的服务器在将 HTML 发送给用户浏览器之前，会先解析 Liquid 代码。它将数据库中的动态数据（如产品标题、价格）填入占位符中，并执行简单的逻辑判断（如“如果缺货则显示售罄”）。Liquid 运行在服务器端，因此它极其安全，无法直接操作 DOM，也无法发起网络请求。

实战步骤

核心语法 1：Objects (对象) 与输出

操作路径：使用双大括号 {{ }} 输出数据

Objects 包含了 Shopify 数据库中的所有信息。
输出产品标题：<h1>{{ product.title }}</h1>
输出产品价格：<span>{{ product.price | money }}</span>
注意：对象是有作用域（Scope）的。product 对象在产品页（product.liquid）中默认可用，但在首页（index.liquid）中直接调用会返回空值，除非你在循环中遍历了产品列表。

核心语法 2：Tags (标签) 与逻辑控制

操作路径：使用大括号加百分号 {% %} 执行逻辑

Tags 不会输出任何可见内容，它们用于控制页面的渲染逻辑。

条件判断 (If/Else)：

{% if product.available %}
  <button>加入购物车</button>
{% else %}
  <button disabled>已售罄</button>
{% endif %}

循环遍历 (For Loop)：

{% for image in product.images %}
  <img src="{{ image | image_url: width: 500 }}" alt="{{ image.alt }}">
{% endfor %}

核心语法 3：Filters (过滤器) 与数据处理

过滤器类型	Liquid 代码示例	渲染结果说明
字符串处理	`{{ 'hello world' \| upcase \| replace: 'WORLD', 'SHOPIFY' }}`	输出：HELLO SHOPIFY (支持管道式链式调用)
数学运算	`{{ product.price \| times: 1.2 \| divided_by: 100 }}`	将价格乘以 1.2 后除以 100。
数组操作	`{% assign sorted_products = collection.products \| sort: 'price' %}`	将集合中的产品按价格从低到高排序。

核心语法 4：变量赋值 (Assign 与 Capture)

操作路径：在 Liquid 中创建自定义变量

Assign：用于创建简单的字符串、数字或布尔值变量。
{% assign discount_rate = 0.8 %}

Capture：用于捕获复杂的 HTML 结构或多行字符串，将其存入一个变量中。

{% capture button_html %}
  <div class="btn-wrapper">
    <button>{{ product.title }}</button>
  </div>
{% endcapture %}
{{ button_html }}

常见误区与处理方法

误区一：在 Liquid 循环中执行复杂的数学运算导致渲染超时

规避方法：Liquid 运行在 Shopify 的服务器上，为了保证所有店铺的稳定性，Shopify 对 Liquid 的渲染时间有严格的限制。如果你在一个包含 1000 个产品的集合页中，使用 {% for %} 循环遍历每个产品，并在循环内部使用 times、divided_by 去计算复杂的阶梯折扣，极易导致页面渲染超时并报错。复杂的数学运算应该在后台通过脚本计算好并存入 Metafields，前端 Liquid 只负责直接读取和展示。

误区二：混淆了空白符控制 (Whitespace Control)

规避方法：当你在 HTML 中写了大量的 {% if %} 和 {% for %} 标签时，即使这些标签不输出内容，它们也会在最终的 HTML 源码中留下大量的空行和换行符，导致 DOM 结构臃肿。必须学会使用连字符 - 来剥离空白符。例如，写成 {%- if product.available -%} 而不是 {% if product.available %}。连字符会吃掉标签左侧或右侧的所有空白字符，让输出的 HTML 源码极其干净紧凑。

误区三：试图用 Liquid 过滤敏感数据 (如客户密码)

规避方法：新手经常问：“我怎么用 Liquid 获取当前登录客户的密码或完整信用卡号？”答案是：绝对不可能。 Liquid 的设计初衷就是为了前端展示，Shopify 在底层严格隔离了所有敏感数据。你只能通过 customer 对象获取客户的名字、邮箱、订单历史和默认地址。任何涉及支付、密码修改的逻辑，都必须跳转到 Shopify 托管的封闭页面处理。

FAQ