# Liquid 概览

> Shoplazza Theme 中 Liquid 模板语言的总览：什么是模板语言，以及 tags、filters、objects 如何配合渲染店铺前台页面。

## Liquid 参考文档

Liquid 是一种 template 语言。本参考文档介绍了可用于构建 Shoplazza 主题的 Liquid tags、filters 和 objects。

## 什么是 template 语言？

Template 语言允许您创建一个用于承载静态内容的单一 template，并根据 template 渲染的位置动态插入相应信息。例如，您可以创建一个 product template，用于承载所有标准商品属性，例如商品图片、标题和价格。该 template 随后可以根据当前浏览的商品，动态渲染相应的内容。

## Liquid 基础

Liquid 用于动态输出 objects 及其属性。您可以通过 tags 创建逻辑来进一步修改输出，或直接使用 filter 对其进行处理。Objects 和 object 属性使用六种基本数据类型之一进行输出。Liquid 还包含基本的逻辑运算符和比较运算符，可配合 tags 使用。请参阅 [Liquid 基础](./basics/)。

```liquid title="代码"
<title>{{ page_title}}</title>
<meta name="description" content="{{ page_description | truncatebytes: 320, '' }}">
```

```html title="输出"
<title>Geek</title>
<meta name="description" content="Full of story sense, suitable for building brand websites, designed for DTC type merchants theme.">
```

## 使用 tags 定义逻辑

Liquid tags 用于定义告知 template 执行操作的逻辑。tag 分隔符内的文本在网页渲染时不会产生可见输出。请参阅 [Tags](./tags/)。

:::note[深入了解]
`{% %}` 花括号百分号分隔符表示逻辑和流程控制。
:::

```liquid title="代码"
{% if product.title == 'Tulip Dangles' %}
  It has an iconic silhouette.
{% endif %}
```
```json title="数据"
{
  "product": {
    "title": "Tulip Dangles"
  }
}
```

```html title="输出"
It has an iconic silhouette.
```

## 使用 filters 修改输出

Liquid filters 用于修改变量和 objects 的输出。要对输出应用 filters，请在输出的花括号分隔符内，在管道符之后添加 filter 及其参数。请参阅 [Filters](./filters/)。

多个 filters 可以应用于同一个输出，它们按从左到右的顺序依次解析。

:::note[深入了解]
`{{ | }}` Filters 置于输出 tag 内，以管道符标识。
:::

```liquid title="代码"
{{ product.title | upcase | remove: 'TULIP' }}
```
```json title="数据"
{
  "product": {
    "title": "Tulip Dangles"
  }
}
```

```html title="输出"
DANGLES
```

## 引用 objects

Liquid objects 代表可用于构建主题的变量。Object 类型包括但不限于：

* 店铺资源，例如 collection 或 product 及其属性
* 用于驱动 Shoplazza 主题的标准内容，例如 `content_for_header`
* 可用于构建交互功能的元素，例如 `paginate` 和 `search`

Objects 可能表示单个数据点，也可能包含多个属性。某些 objects 可能表示关联的 object，例如 collection 中的 product。请参阅 [Objects](./objects/)。

### 作用域

某些 objects 可以在全局范围内访问，另一些则仅在特定上下文中可用。请参阅具体 object 的参考文档以了解其访问作用域。

### 创建变量

您也可以使用 [variable tags](./tags/variable-tags) 创建自定义变量。变量在语法上与 objects 的处理方式相同。

:::note[深入了解]
`{{ }}` 双花括号分隔符表示一个输出。
:::

```liquid title="代码"
<div class="product-detail">
  <div class="product-title">
    {{ product.title }}
  </div>
  <div class="product-price">
    {{ product.price | money }}
  </div>
</div>
```
```json title="数据"
{
  "product": {
    "title": "Tulip Dangles",
    "price": "12.88"
  }
}
```

```html title="输出"
<div class="product-detail">
  <div class="product-title">
    Tulip Dangles
  </div>
  <div class="product-price">
    $12.88
  </div>
</div>
```