<!-- Generated by vite-plugin-geo; source: liquid-handlebars-sline/index.html -->

[跳到正文](#main-content)

[![](/sline-logo.png)Sline](/)

Sline

[Sline 概览](/zh-cn/)[主题 Sections](/section/)[AST 浏览器](/sline-ast-explorer/)

指南

[Sline 模板入门](/sline-template/)[语法对比](/sline-vs-handlebars-vs-liquid/)[迁移实战](/liquid-handlebars-sline/)[Dawn 与 Bottle 对比](/Shopify-Dawn-vs-Shopline-Bottle/)[OS 3.0 迁移](/shopline-transformation/)[主题 CLI](/sline-theme-cli/)

MCP

[SHOPLINE Dev MCP](/mcp/)[Storefront MCP](/storefront-mcp/)[Shopline MCP](/shopline-mcp/)

工具

[SkuSync](/skusync/)[SHOPLINE 转 Shopify](/convert-shopline-csv-to-shopify-format/)[Shopify 转 SHOPLINE](/convert-shopify-csv-to-shopline-xlsx/)[AI 就绪检查器](/ai-checker/)[SkuSync 文档](/docs/)[Shopline Checker](/shopline-checker/)[Shopline Helper](/shopline-helper/)[ImgSEO](/imgseo/)[ImgSEO 指南](/imgseo-doc/)

菜单

## Sline

[Sline 概览](/zh-cn/)[主题 Sections](/section/)[AST 浏览器](/sline-ast-explorer/)

## 指南

[Sline 模板入门](/sline-template/)[语法对比](/sline-vs-handlebars-vs-liquid/)[迁移实战](/liquid-handlebars-sline/)[Dawn 与 Bottle 对比](/Shopify-Dawn-vs-Shopline-Bottle/)[OS 3.0 迁移](/shopline-transformation/)[主题 CLI](/sline-theme-cli/)

## MCP

[SHOPLINE Dev MCP](/mcp/)[Storefront MCP](/storefront-mcp/)[Shopline MCP](/shopline-mcp/)

## 工具

[SkuSync](/skusync/)[SHOPLINE 转 Shopify](/convert-shopline-csv-to-shopify-format/)[Shopify 转 SHOPLINE](/convert-shopify-csv-to-shopline-xlsx/)[AI 就绪检查器](/ai-checker/)[SkuSync 文档](/docs/)[Shopline Checker](/shopline-checker/)[Shopline Helper](/shopline-helper/)[ImgSEO](/imgseo/)[ImgSEO 指南](/imgseo-doc/)

[首页](/)/[Guides](/sline-template/)/迁移实战

# 从 Liquid 与 Handlebars 迁移到 Sline

用任务清单和代码对照迁移输出、条件、循环、作用域、复用单元与数据格式化，并识别不能机械转换的边界。

学习路径 3 / 6适合初级主题开发者最后核验：2026-07-28

本页目录

[先定义迁移边界](#先定义迁移边界)[第一步：盘点旧模板](#第一步盘点旧模板)[Handlebars 输出迁移](#handlebars-输出迁移)[条件与 else 迁移](#条件与-else-迁移)[循环与父级作用域](#循环与父级作用域)[Helper 与 filter 迁移](#helper-与-filter-迁移)[Liquid 写法的概念迁移](#liquid-写法的概念迁移)[复用单元不能只改文件名](#复用单元不能只改文件名)[每批迁移的验证方法](#每批迁移的验证方法)[迁移完成清单](#迁移完成清单)

本页目录

[先定义迁移边界](#先定义迁移边界)[第一步：盘点旧模板](#第一步盘点旧模板)[Handlebars 输出迁移](#handlebars-输出迁移)[条件与 else 迁移](#条件与-else-迁移)[循环与父级作用域](#循环与父级作用域)[Helper 与 filter 迁移](#helper-与-filter-迁移)[Liquid 写法的概念迁移](#liquid-写法的概念迁移)[复用单元不能只改文件名](#复用单元不能只改文件名)[每批迁移的验证方法](#每批迁移的验证方法)[迁移完成清单](#迁移完成清单)

## 先定义迁移边界

SHOPLINE OS 2.1 自定义主题使用 Handlebars，OS 3.0 使用 Sline。SHOPLINE Help Center 明确要求 Handlebars 代码需要重写，并提醒同时检查应用兼容、多语言内容和 UGC 数据。

Liquid → Sline 不属于 SHOPLINE 官方迁移路径。本页中的 Liquid 对照，是依据 Liquid 与 Sline 各自官方语法整理的**概念映射**，用于帮助有 Shopify 经验的开发者理解，不代表存在自动兼容层。

## 第一步：盘点旧模板

不要从全局搜索花括号开始。先按责任建立清单：

责任

需要记录的内容

迁移目标

数据输出

对象、属性、默认值

对应的 Sline 对象和属性

控制流

条件、循环、空状态

Sline 标签与真假值规则

格式化

helper、filter、日期、金额、图片

官方 Sline 过滤器或专用标签

复用

partial、snippet、include

OS 3.0 component、section 或 block

作用域

`this`、`../`、循环变量

明确的局部对象和数据传递

应用内容

app block、自定义注入、UGC

OS 3.0 兼容方案或重建计划

输出清单后，再决定哪些可以逐行改写，哪些必须重构数据或模块。

## Handlebars 输出迁移

简单属性输出通常最接近：

```
<!-- Handlebars -->
<h1>{{product.title}}</h1>
```

```
<!-- Sline -->
<h1>{{ product.title }}</h1>
```

未转义 HTML 在两者中都使用三花括号，但仍必须重新确认目标字段是否可信：

```
<div class="rte">{{{ product.description }}}</div>
```

不要把“语法相同”误解为“对象模型相同”。对象名、属性名和可用页面范围都要以 SHOPLINE 对象参考为准。

## 条件与 else 迁移

```
<!-- Handlebars -->
{{#if product.available}}
  <button>Add to cart</button>
{{else}}
  <span>Sold out</span>
{{/if}}
```

```
<!-- Sline -->
{{#if product.available}}
  <button>加入购物车</button>
{{#else/}}
  <span>暂时售罄</span>
{{/if}}
```

Sline 的 `else` 是自闭合标签。条件中若包含空数组或空字符串，还要按 Sline 的真假值规则重新测试。

## 循环与父级作用域

Handlebars 常见写法：

```
{{#each products}}
  <p>{{../collectionTitle}} — {{title}}</p>
{{/each}}
```

Sline 不支持 `../`。不能只把 `each` 改成 `for`，还需要改变数据访问方式：

1. 确认循环内部是否真的需要父级值。
2. 如果是固定文案，把它放到循环外的标题中。
3. 如果是每项都需要的数据，让当前项或组件参数明确携带它。
4. 如果数据模型无法提供，回到应用层准备数据。

```
<h2>{{ collection.title }}</h2>
<ul>
  {{#for product in collection.products}}
    <li>{{ product.title }}</li>
  {{/for}}
</ul>
```

本节依据[

SHOPLINE 官方差异：Sline 无法通过 `../` 访问父级变量

](https://developer.shopline.com/docs/sline/syntax-differences-sline-vs-handlebars/)

## Helper 与 filter 迁移

Handlebars 项目可能注册自定义 helper：

```
{{uppercase product.title}}
```

迁移前先分类：

- 官方 Sline 已提供相同格式化：改用对应过滤器。
- 属于主题结构：改为 component、section 或 block。
- 属于业务规则：移到应用或数据层。
- 没有官方等价能力：改变需求，不创建“看起来像 Sline”的私有语法。

管道式写法示例：

```
{{ product.title | truncate(40) }}
```

过滤器名称、参数和可接受类型必须逐项查阅 Sline 官方参考。

## Liquid 写法的概念迁移

Liquid 条件：

```
{% if product.available %}
  {{ product.title | escape }}
{% endif %}
```

Sline 的对应任务由标签与过滤器完成：

```
{{#if product.available}}
  {{ product.title | escape() }}
{{/if}}
```

Liquid 循环：

```
{% for product in collection.products %}
  {{ product.title }}
{% endfor %}
```

Sline 循环：

```
{{#for product in collection.products}}
  {{ product.title }}
{{/for}}
```

这些示例只映射控制流。Shopify Liquid 与 SHOPLINE Sline 的商品对象、URL、图片、金额和表单能力不能根据名字相似直接替换。

## 复用单元不能只改文件名

OS 3.0 把主题组织为 layout、template、section、block 和 component。迁移 partial 或 snippet 时，先判断它的职责：

- 商家需要在编辑器中添加、删除或排序：优先考虑 section 或 block。
- 只是重复使用的展示片段：考虑 component。
- 负责页面整体骨架：属于 layout 或 template。

同一段代码如果既负责商家配置、业务逻辑又负责展示，应先拆开职责，再落入 OS 3.0 目录。

拆分商家可配置模块时，可参考 [OS 3.0 Sections 概述](/section/)；改写后的 Sline 片段可用 [AST Explorer](/sline-ast-explorer/) 辅助检查语法结构。

## 每批迁移的验证方法

每次只迁移一个页面类型或一个模块，并准备下列状态：

- 正常商品与完整图片。
- 缺少可选图片或描述。
- 空集合与只有一个商品的集合。
- 已登录与未登录顾客。
- 不同语言和较长文本。
- 应用已安装、未安装和不兼容状态。
- 桌面与手机主题编辑器预览。

## 迁移完成清单

- 所有 `this`、`./`、`../` 和 Handlebars helper 已清点。
- Liquid tag/filter 只按概念映射，没有直接复制平台对象。
- 未转义输出已经逐项确认数据可信。
- 循环和条件覆盖空值边界。
- 复用代码已按 layout/template/section/block/component 重新归类。
- 第三方应用有明确的 OS 3.0 兼容结论。
- 多语言与 UGC 有备份和恢复方案。
- 新主题在测试环境通过关键页面与交易流程验证。

[下一阶段**Shopify Dawn 与 SHOPLINE Bottle 主题架构对照**

从单段模板迁移，进入完整主题目录与模块边界的比较。

](https://sline.dev/Shopify-Dawn-vs-Shopline-Bottle/)

官方来源

1. 01[OS 2.1 to 3.0 Migration Guide for Custom Themes](https://help.shopline.com/hc/en-001/articles/48014335271193-OS-2-1-to-3-0-Migration-Guide-for-Custom-Themes)SHOPLINE Help Center

    OS 2.1 Handlebars 到 OS 3.0 Sline 的迁移范围、风险与注意事项。

2. 02[Syntax differences — Sline vs Handlebars](https://developer.shopline.com/docs/sline/syntax-differences-sline-vs-handlebars/)SHOPLINE Developer Center

    可直接核验的字符串、作用域、索引、标签与过滤器差异。

3. 03[Expressions](https://handlebarsjs.com/guide/expressions.html)Handlebars

    Handlebars 路径、上下文、helper 与转义。

4. 04[Liquid introduction](https://shopify.github.io/liquid/basics/introduction/)Liquid

    Liquid object、tag 与 filter 的官方语义。

5. 05[Sline overview](https://developer.shopline.com/docs/sline/sline-overview/)SHOPLINE Developer Center

    Sline 对象、标签、过滤器和作用域边界。

## 从语法认识到主题交付

完整路线

1. [01**认识 Sline**

    理解对象、标签、过滤器与作用域。

    ](https://sline.dev/sline-template/)
2. [02**语法对照**

    比较 Sline、Handlebars 与 Liquid。

    ](https://sline.dev/sline-vs-handlebars-vs-liquid/)
3. [03**迁移实战**

    将常见模板写法迁移到 Sline。

    ](https://sline.dev/liquid-handlebars-sline/)
4. [04**主题架构**

    对照 Dawn 与 Bottle 的组织方式。

    ](https://sline.dev/Shopify-Dawn-vs-Shopline-Bottle/)
5. [05**升级 OS 3.0**

    规划主题、应用和内容迁移。

    ](https://sline.dev/shopline-transformation/)
6. [06**CLI 工作流**

    完成本地开发、检查与交付。

    ](https://sline.dev/sline-theme-cli/)

[![](/sline-logo.png)Sline](/zh-cn/)

面向 SHOPLINE 主题、店面和商品数据的开发者资源与浏览器工具。

## Sline

- [Sline 概览](/zh-cn/)
- [主题 Sections](/section/)
- [AST 浏览器](/sline-ast-explorer/)

## 指南

- [Sline 模板入门](/sline-template/)
- [语法对比](/sline-vs-handlebars-vs-liquid/)
- [迁移实战](/liquid-handlebars-sline/)
- [Dawn 与 Bottle 对比](/Shopify-Dawn-vs-Shopline-Bottle/)
- [OS 3.0 迁移](/shopline-transformation/)
- [主题 CLI](/sline-theme-cli/)

## MCP

- [SHOPLINE Dev MCP](/mcp/)
- [Storefront MCP](/storefront-mcp/)
- [Shopline MCP](/shopline-mcp/)

## 工具

- [SkuSync](/skusync/)
- [SHOPLINE 转 Shopify](/convert-shopline-csv-to-shopify-format/)
- [Shopify 转 SHOPLINE](/convert-shopify-csv-to-shopline-xlsx/)
- [AI 就绪检查器](/ai-checker/)
- [SkuSync 文档](/docs/)
- [Shopline Checker](/shopline-checker/)
- [Shopline Helper](/shopline-helper/)
- [ImgSEO](/imgseo/)
- [ImgSEO 指南](/imgseo-doc/)

## 社区与支持

- [SHOPLINE 开发文档](https://developer.shopline.com/docs/sline/)
- [GitHub](https://github.com/shoplineos/)
- [报告问题](https://github.com/shoplineos/Bottle/issues)
- [联系我们](mailto:hi@sline.dev)
- [SKU.md](https://sku.md)
- [免责声明](/disclaimer/)

## 语言

[English](/)[简体中文](/zh-cn/)[繁體中文](/zh-tw/)[日本語](/ja/)

© 2026 Sline.dev。保留所有权利。