Liquid 是什么？零基础也能看懂的解释

你有没有打开过 Shopify 主题的代码文件，看到 {{ product.title }} 或者 {% if product.available %} 这样的符号，完全不知道是什么意思？

别担心。这篇文章从零开始，用最直白的方式带你搞懂 Liquid——Shopify 主题背后那门「看起来像代码、但其实不难」的模板语言。

---

Liquid 到底是什么？

一句话：Liquid 是 Shopify 的模板语言，由 Shopify 团队开发，专门用来让网页「活起来」。

你可以把它理解成一个填空题模板：

三者组合，就能生成一个动态的、随数据变化的网页。

数据 + 模板指令 = 动态网页

即使你完全不懂编程，只要理解这个公式，你就能读懂、甚至修改 Shopify 主题的大部分逻辑。

---

为什么需要模板语言？

举个例子：你的店里有 200 件商品。

如果没有 Liquid，你需要手写 200 个 HTML 页面，每个页面单独写商品名、价格、图片……改一个样式，要改 200 次。

有了 Liquid，你只需要写一个模板，让系统自动把 200 件商品的数据填进去，生成 200 个页面。改样式只改一处，全部同步。

这就是模板语言的核心价值：一次编写，处处复用。

---

Liquid 的三种核心语法

Liquid 只有三种符号，记住这三种，你就掌握了 80% 的用法。

1. {{ }} 输出标签——显示数据

双花括号用来把变量的值输出到页面上。

{{ product.title }}
{{ product.price | money }}
{{ shop.name }}

类比：就像 Word 里的「合并域」，把数据库里的值插入到文档指定位置。

渲染结果示例：

经典白色T恤
¥199.00
我的潮流小店

2. {% %} 逻辑标签——控制逻辑

百分号花括号用来写条件判断、循环、赋值等逻辑，本身不会直接输出任何内容。

{% if product.available %}
  <p>有货，立即购买</p>
{% endif %}

{% for product in collection.products %}
  <div>{{ product.title }}</div>
{% endfor %}

类比：就像在 Excel 里用 IF 函数——满足条件显示这个，不满足显示那个。

3. {# #} 注释标签——写备注

注释标签的内容不会出现在页面上，仅供开发者阅读。

{# 这段代码负责展示首页推荐商品 #}

---

一段完整的代码示例

光看概念不够直观，来看一段真实的 Liquid 代码：

<!-- 商品详情页模板示例 -->

{% if product.available %}
  <h1>{{ product.title }}</h1>
  <p class="price">{{ product.price | money }}</p>
  <button>加入购物车</button>
{% else %}
  <h1>{{ product.title }}</h1>
  <p class="sold-out">⏳ 该商品暂时缺货</p>
{% endif %}

代码解读：

• {% if product.available %} — 检查商品是否有货
• {{ product.title }} — 输出商品名称
• {{ product.price | money }} — 输出格式化后的价格（| money 是过滤器，下文介绍）
• {% else %} — 如果没货，执行这里
• {% endif %} — 结束 if 判断（必须有！）

---

过滤器（Filter）：数据格式化神器

过滤器用竖线 | 连接，紧跟在变量后面，用来改变数据的输出形式。

格式：{{ 数据 | 过滤器 }}

多个过滤器还可以链式叠加：{{ 数据 | 过滤器1 | 过滤器2 }}

常用过滤器速查表

过滤器是 Liquid 最实用的特性之一，让原始数据变得「好看好用」，省去大量手动格式化的麻烦。

---

if / elsif / else 条件判断

条件判断让页面能够根据数据的不同状态，智能显示不同内容。

逻辑流程

检查条件（商品有货？）
    ↓
  是 → 显示价格和购买按钮
  否 → 显示缺货提示

完整语法

{% if product.available %}
  <p>价格：{{ product.price | money }}</p>

{% elsif product.price == 0 %}
  <p>🎁 免费领取</p>

{% else %}
  <p>⏳ 补货中，敬请期待</p>

{% endif %}

三个关键点：

• elsif：注意拼写！Liquid 里是 elsif，不是 else if
• endif：每个 if 都必须有对应的 endif 来关闭，否则报错
• and / or：可以组合多个条件，如 {% if A and B %} 或 {% if A or B %}

---

for 循环：批量生成的魔法

有了 for 循环，你只需写一次商品卡片的 HTML 结构，系统会自动把集合里的每一件商品都套进去，生成完整的商品列表。

工作原理

集合数据（运动鞋、手提包、手表……）
          ↓ for 循环自动处理每一个
<div>运动鞋 - ¥299</div>
<div>手提包 - ¥599</div>
<div>手表 - ¥1299</div>

基础用法

{% for product in collection.products %}
  <div class="product-card">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

进阶用法

<!-- 循环数字范围 -->
{% for i in (1..5) %}
  <span>第 {{ i }} 页</span>
{% endfor %}

<!-- 中断循环 -->
{% for product in collection.products %}
  {% if forloop.index > 3 %}
    {% break %}
  {% endif %}
  {{ product.title }}
{% endfor %}

实用变量：

• forloop.index — 当前是第几次循环（从 1 开始）
• forloop.first — 是否是第一次循环
• forloop.last — 是否是最后一次循环
• {% break %} — 中断循环

---

学习总结：5 个核心知识点

学完这篇文章，你已经掌握了 Liquid 最核心的 5 个知识点：

---

下一步

掌握了这些基础，你已经可以：

• 读懂 Shopify 主题里大部分的 .liquid 文件
• 修改 简单的显示逻辑，比如有货/缺货的提示文字
• 定制 商品列表的展示样式

如果想继续深入，建议下一步了解：

• Liquid 对象模型：product、collection、cart、shop 等常用对象的属性
• include 与 render 标签：如何拆分和复用代码片段
• assign 与 capture：在 Liquid 里声明和存储变量

💡 记住那个公式：数据 + 模板指令 = 动态网页。理解了这个逻辑，Shopify 主题开发就不再神秘。