跳到主要内容

1 篇博文 含有标签「liquid」

查看所有标签

Shopify Liquid

· 阅读需 6 分钟
Yana Ching
Yana Ching
Front End Engineer

组成​

object 对象​

{{ page.title }}

output: Introduction

tag 标记​

所有的逻辑都是用 {% 和 %} 包裹的可以用来 变量赋值、条件判断、循环

{% if user %}
    Hello {{ user.name }}
{% endif %}

filter 过滤器​

使用 | 过滤输出内容

{{ '/my/fancy/url' | append: '.html' }}

output: /my/fancy/url.html

多个过滤器的时候，按从左到右的顺序执行
{{ 'adam!' | capitalize | prepend: 'Hello ' }}

output: Hello Adam!

操作符​

八个基本操作符和一个 contains

  • == 相等
  • != 不相等
  • > 大于
  • < 小于
  • >= 大于或等于
  • <= 小于或等于
  • or 逻辑或
  • and 逻辑与
  • contains 只能用来搜索字符串
{% if product.title contains 'Pack' %}
    This product's title contains the word Pack
{% endif %}

真值与假值​

nil 和 false 之外都是 true

数据类型​

String、Number、Boolean、Nil、Array

数组的初始化只能要通过 split 过滤器将一个字符串分割成一个子字符串数组

控制输出的空白字符​

使用变量定义语句，如果使用 {% %} 包裹语句，这行定义语法也会渲染出来，表现是多了一个空行

要解决这个问题就是 在 {% %} 之间加上 - 变成 {%- -%} 这样就不会出现空白行了

{% assign username = "John G. Chalmers-Smith" %}
{% if username and username.size > 10 %}
  Wow, {{ username }}, you have a long name!
{% else %}
  Hello there!
{% endif %}

output:


  Wow, John G. Chalmers-Smith, you have a long name!






{%- assign username = "John G. Chalmers-Smith" -%}
{%- if username and username.size > 10 -%}
  Wow, {{ username }}, you have a long name!
{%- else -%}
  Hello there!
{%- endif -%}

output: Wow, John G. Chalmers-Smith, you have a long name!

tags​

注释​

{% comment %}
/*这是注释内容*/
{% endcomment %}

控制流​

if - 条件成立时候执行​

{% if product.title == 'Awesome Shoes' %}
  These shoes are awesome!
{% endif %}

unless - 条件不成立的时候执行​

{% unless product.title == 'Awesome Shoes' %}
  These shoes are not awesome.
{% endunless %}


{%comment 等同于 endcomment%}
{% if product.title != 'Awesome Shoes' %}
  These shoes are not awesome.
{% endif %}

elsif/else​

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

case/when​

迭代/循环​

for​

for-in-endfor

break 停止循环​

continue 跳出当前循环​

for(parameters)​

limit 限制循环次数 offset 指定循环开始索引号 range 指定循环范围 reversed 反转循环

filters​

  • abs 绝对值

  • append 拼接

  • at_least 限制最小值

  • at_most 限制最大值

  • capitalize 首字母大写

  • compact 删除数组中所有 nil

  • concat 拼接数组

  • date 时间戳格式转化（注意 now 是生成页面的时间，而不是用户浏览时的时间）

  • default 默认值（为空时候使用）

  • divided_by 除法（结果的数据类型与除数保持一致）

  • minus: a 减去 a

  • modulo: a 取模

  • plus: a 加上 a

  • times: a 乘以 a

  • downcase 转小写

  • upcase 大写

  • first 数组第一项

  • last 数组最后一项

  • floor 去小数点后位数

  • ceil 向上取整 3.1+ --> 4

  • join:'key' 用 key 连接所有子项并输出字符串

  • lstrip 删除左侧空白符

  • rstrip 删除右侧空白符

  • strip 删除两侧空白符

  • strip_html 删除所有 html 标签

  • strip_newlines 删除所有换行符号

  • map:'key' 获取对象中属性名为 key 的值

  • newline_to_br 把空行转成
    标签

  • prepend:'a' 字符串之前加上 a

  • remove:'a' 删除 a 字符

  • remove_first: 'a' 删除首次出现的 a 字符

  • replace:'a','b' 将所有 a 换成 b

  • replace_first:'a','b' 将首次出现的 a 换成 b

  • reverse 反转数组

  • round 四舍五入

  • size 字符长度或者数组长度

  • slice:start,len 一个数值的时候直接截取该索引位置，负数则从末尾开始向前计数

    正向初始索引是 0，反向初始索引是 -1

  • sort 排序，区分大小写(先大写)

  • split:',' 用, 分割字符串为数组

  • truncate:maxlen,affix 限制长度，并添加尾缀,如果长度小于 len，尾部自动补上省略号

  • truncatewords 同上，但是截断是字符个数（英文单词有区别）

  • uniq 删除重复项

  • sort_natural 排序，不分大小写

  • url_decode 解码 URL

  • url_encode 编码 URL

  • escape 字符转义（才能用于 URL）

  • escape_once 对于已转义的字符不做处理