Liquid 模板引擎预览器 - 在线测试 Shopify 模板语法

Liquid 是由 Shopify 开发的轻量级模板引擎，使用 Ruby 编写，现已被移植到多种语言。它主要用于 Shopify 主题开发，也广泛应用于 Jekyll 静态站点生成器、Zendesk、Salesforce 等平台。Liquid 采用安全的沙盒模式，模板无法访问底层系统，非常适合用户可编辑模板的场景。语法分为三类：{{ 对象输出 }}、{% 逻辑标签 %}、和 | 过滤器。

本工具基于 liquidjs（JavaScript 实现的 Liquid 引擎），支持标准 Liquid 语法，包括 {% if %}、{% for %}、{% assign %}、{% capture %}、{% include %} 等核心标签，以及大部分过滤器。对于 Shopify 特有标签（如 {% section %}、{% layout %}、{% schema %}、{% stylesheet %}、{% javascript %}），本工具会尝试友好处理，但完整测试建议使用 Shopify 官方开发环境或 Theme Kit。

JSON 数据作为模板的根上下文，所有顶级键都是模板中的变量名。例如 {"product": {...}} 对应模板中的 {{ product.title }}。常用的 Shopify 对象包括：
• product — 产品信息（title、price、description、images、variants 等）
• collection — 集合信息（title、products 数组）
• cart — 购物车（items 数组、total_price 等）
• customer — 客户信息（name、email、addresses 等）
• shop — 商店信息（name、description、currency 等）
可使用预设示例快速了解数据结构。

Shopify 主题完全基于 Liquid 模板引擎构建。每个 Shopify 主题都是 Liquid 模板文件的集合，配合 HTML、CSS、JavaScript 和 Shopify 的对象系统。开发者使用 Liquid 来动态呈现产品信息、集合列表、购物车内容等。Shopify 还扩展了 Liquid，添加了主题特有的标签如 {% schema %}（定义区块设置）、{% stylesheet %}（区块级 CSS）、{% javascript %}（区块级 JS）等，使主题更加模块化和可配置。

常见错误原因：
1. JSON 格式错误 — 检查逗号、引号、括号是否匹配，可点击"格式化"按钮辅助排查。
2. 变量未定义 — 模板中引用的变量在 JSON 数据中不存在，Liquid 会静默返回空字符串。
3. 标签语法错误 — 检查 {% %} 标签是否正确闭合，如 {% endif %}、{% endfor %} 是否遗漏。
4. 过滤器拼写错误 — 确认过滤器名称正确，如 | uppercase 而非 | upercase。
5. 不支持的特性 — 某些 Shopify 特有标签在本工具中可能不被完整支持。

Liquid 提供丰富的过滤器用于数据转换：
• | upcase / | downcase — 大小写转换
• | strip_html — 去除 HTML 标签
• | truncate: N — 截断文本到 N 个字符
• | date: "格式" — 日期格式化
• | money / | money_with_currency — 金额格式化（Shopify）
• | default: "值" — 变量为空时的默认值
• | size — 数组或字符串长度
• | join: ", " — 数组元素连接
• | split: "," — 字符串分割为数组
• | replace: "旧", "新" — 字符串替换
• | prepend: "文本" / | append: "文本" — 前后追加