看这！快速理解Liquid！基础篇

1.Liquid简介

• Liquid是一种模板语言，最初由Shopify开发用于电子商务平台。Liquid主要用于动态内容创建，允许用户在网站模板中嵌入变量、条件语句、循环和过滤器等功能，以便根据特定条件或数据生成动态页面内容。
• Liquid代码可分为对象、标记、过滤器

对象告诉Liquid在页面的哪个位置展示内容。
标记创造了模板的逻辑和控制流。
过滤器改变 Liquid 对象的输出。他们被用在输出上，通过一个 | 符号分隔。

2.Liquid的基本语法元素

1. 变量：用**{{variable}}**表示，用于显示动态数据
2. 标记：用**{%tag%}**包裹，用于控制逻辑，如条件判断、循环等
3. 注释：用**{# comment #}**表示，用于添加注释
4. 过滤器：用**|**符号表示，可以对变量进行修改或处理
5. 对象：代表数据对象，如产品、订单等
6. 操作符：支持常见的操作符、比较符等操作符

Liquid示例

{# 创建一个变量，表示产品列表 #}
{% assign products = "Apple, Orange, Banana" | split: ", " %}

{# 如果产品列表不为空，则显示产品列表标题 #}
{% if products.size > 0 %}
  <h2>Product List</h2>
  <ul>
    {# 遍历产品列表，显示每个产品的名称 #}
    {% for product in products %}
      <li>{{ product }}</li>
    {% endfor %}
  </ul>
{% else %}
  {# 如果产品列表为空，则显示没有产品的消息 #}
  <p>No products available.</p>
{% endif %}

下面通过对象、标记、过滤器的顺序说明每一个需要注意的特点

3. 对象

3.1 控制输出的空白符

• 在 Liquid 模版中，你可以将连字符放在标记（tag）中，例如 {{-、-}}、{%- 和 -%}，用于将标记（tag）渲染之后的输出内容的左侧或右侧的空拍符剔除。

通常，即使不输出文本，模版中的任何 Liquid 表达式仍然会在渲染之后输出的 HTML 中包含一个空行
示例：

{% assign my_variable = "tomato" %}
{{ my_variable }}

输出结果：

通过为 assign 标记（tag）添加连字符，可以将渲染之后所输出的空拍符删除
示例：

{%- assign my_variable = "tomato" -%}
{{ my_variable }}

输出结果：

4. 标记

4.1 控制流

• case/when
  创建一个开关表达式，用于将一个变量和多个不同值进行比较。case 用于初始化一个开关表达式，when 用于比较他们的值。
  示例：

{% assign handle = 'cake' %}
{% case handle %}
  {% when 'cake' %}
     This is a cake
  {% when 'cookie' %}
     This is a cookie
  {% else %}
     This is not a cake nor a cookie
{% endcase %}

输出结果：

4.2 迭代/循环

1. limit 限定循环执行的次数
   示例

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
  {{ item }}
{% endfor %}

2. offset 从指定索引号开始执行循环
   示例

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %}
  {{ item }}
{% endfor %}

3. range 定义循环执行的范围，可利用数字或变量来定义此执行范围
示例

{% for i in (3..5) %}
  {{ i }}
{% endfor %}

{% assign num = 4 %}
{% for i in (1..num) %}
  {{ i }}
{% endfor %}

4. reversed 反转循环的执行顺序

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
  {{ item }}
{% endfor %}

5. cycle：循环一组字符串并按照它们传入的顺序将其输出。每次调用 cycle 时，传入的参数中的下一个字符串将被输出。
示例

{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}

6. cycle(parameters)
cycle 能够接受一个叫做 cycle group 的参数，以便满足你在模版中需要使用多个 cycle 代码块的情况。如果没有为 cycle group 命名，那么将会假定带有相同参数的 cycle 调用属于同一个组（group）。
示例

{%- comment -%}
  # cycle 示例：使用cycle在模板中轮流显示不同颜色的文本
  # 定义两个不同的cycle group：colors 和 styles
  # 在每个group中交替应用不同的参数
{%- endcomment -%}

{%- assign colors = 'red', 'blue', 'green' -%}
{%- assign styles = 'bold', 'italic', 'underline' -%}

{%- comment -%}
  # 使用cycle分别在colors和styles group中交替应用参数
{%- endcomment -%}

{% for i in (1..6) %}
  <p style="color: {{ cycle(colors) }}; font-weight: {{ cycle(styles) }}">{{ i }}</p>
{% endfor %}

7. tablerow
   生成一个HTML表格，必须要< table >和< /table>这两个标签将其包裹起来
   示例

<table>
{% tablerow product in collection.products %}
  {{ product.title }}
{% endtablerow %}
</table>

输出

8.tablerow (parameters)

• 语法结构

{% tablerow variable in collection cols:x%}
行内内容
{% endtablerow %}

• 参数说明

variable: 每次迭代时的变量名，表示当前元素
collection：用于迭代的集合或数组
cols:x：表示每行包含x列数据

• 示例

{% assign products = "Cool Shirt, Alien Poster, Batman Poster, Bullseye Shirt, Another Classic Vinyl, Awesome Jeans" | split: ", " %}

<table>
  {% tablerow product in products cols:2 %}
    <tr class="row{{ tablerowloop.index }}">
      <td class="col1">{{ product }}</td>
      <td class="col2">{{ products[tablerowloop.index] }}</td>
    </tr>
  {% endtablerow %}
</table>

4.3 原始内容

raw标记临时禁止处理其所包围的代码。
示例

{% raw %}
  In Handlebars, {{ this }} will be HTML-escaped, but
  {{{ that }}} will not.
{% endraw %}

4.4 变量操作

assign：创建一个新变量
capture：将 capture 开始与结束标记之间的字符串捕获之后赋值给一个变量。通过 {% capture %} 创建的变量都是字符串。

• capture示例：

{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}

• 综合应用

{% assign favorite_food = 'pizza' %}
{% assign age = 35 %}

{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}.
{% endcapture %}

{{ about_me }}

increment：创建一个全新的数值变量。并且在后续每次调用时将此变量的值加1。初始值是 0。
decrement
创建一个全新的数值变量，并且在后续每次调用时将此变量的值减 1。初始值是 -1。

• 示例

{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}

通过 in/decrement 标记（tag）创建的变量与通过 assign 或 capture 创建的变量是相互独立的。

5.过滤器

1. abs 返回一个数字的绝对值
   示例

{{-17|abs}}

输出

2. capitalize：将字符串首字母转为大写
示例

{{ "title" | capitalize }}

3. ceil：将一个浮点数向上取整并返回一个最接近的整数。在ceil过滤器执行之前Liquid会尝试将输入转换为数字格式
   示例

{{ "3.5" | ceil }}

4. compact：删除数组中的所有nil值

nil值介绍

例如，假定整个网站所有内容页面作为一个数组保存在 site.pages 变量中，其中某些页面被设置了 category 属性用于指定该页面的内容分类。如果我们利用 map 过滤器将所有页面的 category 属性保存到一个数组中，就会出现如果某个页面没有 category 属性，其在数组中的值就会是 nil。

{% assign site_categories = site.pages | map: 'category' %}
{% for category in site_categories %}
    {{ category }}
{% endfor %}

更多详细的方法大家可以参考Liquid中文文档！