Sline 模板语言入门

Sline 解决什么问题

Sline 是 SHOPLINE 的模板语言。主题文件先写好静态结构，再通过对象和属性插入当前商品、集合、顾客或页面数据。它还提供标签处理条件与循环，并通过过滤器改变输出格式。

一个商品标题的最小输出是：

<h1>{{ product.title }}</h1>

这里的 product 是对象，title 是属性。实际渲染时，SHOPLINE 会把当前商品的数据填入模板。

先建立边界： Sline 服务于 SHOPLINE 主题渲染。SHOPLINE 明确说明开发者不能自行定义新的 Sline 标签和过滤器，应从官方参考中选择平台提供的能力。

输出与 HTML 安全

默认转义

双花括号会输出数据并转义其中的 HTML 特殊字符：

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

这是处理标题、文本设置或顾客输入时更安全的默认方式。

明确输出 HTML

三花括号会把内容作为未转义 HTML 输出：

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

只有在字段本身由 SHOPLINE 以富文本或可信 HTML 形式提供，并且官方对象说明允许这样使用时，才应选择三花括号。不要为了“让标签生效”就把普通输入改成未转义输出。

对象、属性与作用域

Sline 对象分为两类：

全局对象可在多种主题模板中访问，例如页面标题一类的全局数据。
局部对象只在创建它的标签或当前模板范围内有效，例如循环中的 forloop。

访问属性通常使用点号：

{{ product.title }}
{{ product.featured_image }}

当 key 来自变量，或者名称不适合点号访问时，可以使用方括号：

{{ products[index].title }}
{{ linklists["footer"].links }}

资源 handle 是 SHOPLINE 中商品、集合、博客等资源的稳定标识。不要把显示标题当成 handle；如果 handle 改变，依赖旧 handle 的主题引用也需要一起检查。

标签：让模板产生结构

标签负责条件、循环、变量或平台提供的专用输出。普通标签有开始与结束，自闭合标签以 /}} 结束。

条件

{{#if customer != nil}}
  <p>欢迎回来，{{ customer.name }}</p>
{{#else/}}
  <a href="/account/login">登录</a>
{{/if}}

Sline 支持 ==、!=、>、<、>=、<=，以及 &&、||。复杂条件可以使用括号明确优先级。

循环

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

循环内部优先使用当前项目对象，不要假设可以像 Handlebars 一样通过 ../ 回到父级作用域。跨层数据访问是后续迁移时最容易遗漏的差异之一。

过滤器：改变输出

过滤器写在管道符 | 后，并从左到右依次执行：

<span class="price">
  {{ product.price | money() }}
</span>

多个过滤器可以串联：

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

过滤器应该用于轻量的数据格式化。商品选择、权限判断或复杂业务规则仍应由平台数据或应用层处理，而不是塞进主题模板。

数据类型与真假值

Sline 支持字符串、数字、布尔值、nil 和数组等类型。初学时需要特别注意两点：

空字符串和空数组在 Sline 中可能仍被视为真。
不能直接初始化数组，但可以使用 split() 把分隔字符串转换为数组。

因此，检查数组是否有内容时应判断长度：

{{#if collection.products | size() > 0}}
  <p>找到商品</p>
{{#else/}}
  <p>当前集合没有商品</p>
{{/if}}

一个完整的商品摘要

下面的示例把对象、条件、过滤器和默认转义放在一起：

<article class="product-card">
  {{#if product.featured_image}}
    {{#image_tag product.featured_image | image_url(width=720) /}}
  {{/if}}

  <h2>{{ product.title }}</h2>

  <p class="product-card__price">
    {{ product.price | money() }}
  </p>

  {{#if product.available}}
    <a href="{{ product.url }}">查看商品</a>
  {{#else/}}
    <span>暂时售罄</span>
  {{/if}}
</article>

真实项目中，应再次对照当前对象、过滤器和标签参考，确认属性名与参数适用于目标页面。

练习这些表达式时，可把片段粘贴到 Sline AST Explorer 查看语法树；工具只检查语法结构，实际数据输出仍需在主题预览中验证。

开始编码前的检查清单

确认当前文件能访问哪些全局和局部对象。
普通文本使用双花括号，只有可信 HTML 才使用三花括号。
数组是否为空用 size() 判断。
过滤器按从左到右的顺序阅读与调试。
不依赖自定义标签或过滤器。
资源引用使用正确 handle，不使用可能变化的显示名称。
每次新增模板逻辑后，同时检查有数据、无数据和未登录状态。

下一阶段Sline、Handlebars 与 Liquid 语法对照

把已经掌握的 Sline 基础放进三种模板语言中比较。