Liquid 过滤器 | HRope Blog

type

status

date

slug

summary

数组过滤器

join

通过指定分隔符将数组所有元素拼接成一个字符串。

first

返回数组第一个元素。

通过点符号获取数组第一个元素：

last

返回数组最后一个元素。

通过点符号获取数组最后一个元素：

在字符串中使用 last 过滤器，返回字符串的最右一个字符：

concat

合并两个或多个数组。

index

返回数组中指定下标的元素，注意：并不是通过管道符的方式，而是通过中括号。

map

接受数组元素的属性作为参数，并根据每个数组元素的值创建数组。

reverse

颠倒数组中元素的位置。

size

返回数组元素个数，或字符串字符个数。

通过点符号的方式：

sort

按数组中元素的给定属性对数组中的元素进行排序。

where

对数组中的元素进行过滤筛选，类似于js的Array.prototype.filter，过滤器接收键（值为truthy），或键值，符合要求的将其过滤出来组成新的数组。

下例中过滤出类型为 kitchen 的产品：

下例中过滤出可用的产品：

uniq

数组去重。

输出：orange apple banana

颜色过滤器

详情见官网：https://shopify.dev/api/liquid/

字体过滤器

详情见官网：https://shopify.dev/api/liquid/filters/font-filters

HTML过滤器

HTML过滤器根据Liquid属性或商店资产创建HTML元素。

image_tag

生成img标签。您可以调整图像的宽高比或响应大小表现、预加载图像、添加alt文本或向标签传递其他HTML属性。

image_url

使用 image_url 过滤器必须带有宽度或高度参数

image_tag

生成一个img标签， image_tag 过滤器必须和 image_url 过滤器一起使用。

输出：

<img
  src="//cdn.shopify.com/s/files/1/0593/8623/3013/files/32.png?v=1631784870&amp;width=2000"
  alt=""
  srcset="//cdn.shopify.com/s/files/1/0593/8623/3013/files/32.png?v=1631784870&amp;width=352 352w,
    //cdn.shopify.com/s/files/1/0593/8623/3013/files/32.png?v=1631784870&amp;width=832 832w,
    //cdn.shopify.com/s/files/1/0593/8623/3013/files/32.png?v=1631784870&amp;width=1200 1200w,
    //cdn.shopify.com/s/files/1/0593/8623/3013/files/32.png?v=1631784870&amp;width=1920 1920w"
  width="2000"
  height="2000">

srcset

虽然 image_tag 会自动生成srcset，但您也可以指定自定义srcset关键字参数。srcset参数优先于宽度。但不建议设置自定义srcset，除非您希望通过将其设置为nil来完全删除该属性。

输出：

<im
  src="//cdn.shopify.com/s/files/1/0593/8623/3013/files/32.png?v=1631784870&amp;width=2000
  alt=""
  width="2000"
  height="2000">

宽高属性

根据 image_url 过滤器中指定的尺寸和图像的宽高比自动添加到标签中。如果 image_tag 指定了任意一个宽高属性，则只使用所提供的属性。

输出：

<img src="//cdn.shopify.com/s/files/1/0593/8623/3013/files/32.png?v=1631784870&amp;width=2000" alt="">
<img src="//cdn.shopify.com/s/files/1/0593/8623/3013/files/32.png?v=1631784870&amp;width=2000" alt="" width="200">

sizes

可以使用 sizes 关键字参数指定源大小。此参数与 HTML sizes 属性相同的语法。

widths

虽然 image_tag 会自动生成srcset，但您可以使用 widths 关键字参数指定自己的 srcset 属性。此参数接受逗号分隔的整数宽度字符串。

额外的属性

提供给此过滤器的任何其他HTML属性也将添加到生成的HTML标签中。

script_tag

生成一个 script 标签。

输出:

<script
  src="//cdn.shopify.com/s/files/1/0593/8623/3013/t/207/assets/shop.js?75267"
  type="text/javascript"></script>

stylesheet_tag

生成一个 link 标签。

输出：

<link
  href="//cdn.shopify.com/s/files/1/0593/8623/3013/t/207/assets/shop.css?75268"
  rel="stylesheet"
  type="text/css"
  media="all" />

time_tag

将时间戳转换为 time 标签。

输出：

<time datetime="2021-12-17T08:19:19Z">Friday, December 17, 2021 at 4:19 pm +0800</time>

time_tag 过滤器接受与 Ruby 的 strftime 方法相同的参数。你可以在 Ruby 的文档中找到一个简写格式的列表，或者使用像 strfti.me 这样的网站。这些参数不会影响 <time> 标签中设置的 datetime 属性的值。

输出：

<time datetime="2021-12-17T08:19:19Z">Fri, Dec 17, 2021</time>

您可以向 time_tag 过滤器传递一个 format 参数，以输出店面语言的日期格式。可用的格式有:

格式	输出
abbreviated_date	Dec 17, 2021
basic	12/17/2021
date	December 17, 2021
date_at_time	December 17, 2021 at 4:19 pm
default	Friday, December 17, 2021 at 4:19 pm +0800
on_date	on Dec 17, 2021

自定义 datetime 属性格式：

输出：

<time datetime="2021-12-17">Fri, Dec 17, 2021</time>

日期格式也可以在你的主题的区域设置中定义:

使用区域设置：

输出：

<time datetime="2021-12-17T08:19:19Z">Dec 17, 2021</time>

payment_button

为托管产品的动态 checkout 按钮的父容器输出HTML。此筛选器必须用于在 product form 中的 form 对象。

输出：

<form ...>
  ...
  <div data-shopify="payment-button" class="shopify-payment-button">
    ...
  </div>
  ...
</form>

注意：你不能通过AJAX请求呈现动态 checkout 按钮，包括那些通过Section Rendering API呈现的按钮。动态签出按钮本身是由JavaScript添加的，由Shopify通过content_for_header对象添加的，该对象只在初始页面加载时运行。

payment_terms

注意，此过滤器只适用于已被邀请加入商店分期付款早期访问计划的合格商家。如果你是Shopify商家，并没有被邀请提前访问，那么你可以加入候补名单。

呈现产品的Shop Pay Installments横幅。此筛选器必须用于product form 中的 form 对象。

输出：

<form ...>
  ...
  <shopify-payment-terms variant-id="..." shopify-meta="...">
    ...
  </shopify-payment-terms>
  ...
</form>

payment_type_svg_tag

为内联目的返回请求的支付类型图像的 svg 标签。与 shop.enabled_payment_types 变量一起使用。接受一个可选的 class 属性，该属性应用于 svg 标签以控制图标的样式。

preload_tag

生成带有preload rel属性的 link 标记。

输出：

<link
  href="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/mobile_font.woff?28178"
  rel="preload"
  as="font"
  media="mobile"
  type="font/woff">

数学过滤器

abs

返回数字的绝对值。

at_most

限定最大值。

at_least

限定最小值。

ceil

向上取整。

floor

向下取整。

minus

减。

plus

加。

times

乘。

divided_by

除。

round

四舍五入到指定位数小数，默认0。

输出：

5
4
4.56

modulo

取模。

money 过滤器

money

输出：

$20.00
$1.45

money_with_currency

输出：

$20.00 USD
$1.45 USD

money_without_trailing_zeros

输出：

$20
$1.45

money_without_currency

输出：

20.00
1.45

字符串过滤器

append

往一个字符串后面附加另一个字符串。

输出：

sales.jpg

prepend

往字符串前面插入另一个字符串。

base64_encode

把字符串进行 base64 编码。

输出：

b25lIHR3byB0aHJlZQ==

base64_decode

把字符串进行 base64 解码。

base64_url_safe_encode

将字符串编码为url安全的Base64。为了生成url安全的Base64，这个过滤器使用-和_来代替+和_。

输出：

PHA-b2s_PC9wPg==

base64_url_safe_decode

从url安全的Base64解码字符串。

输出：

<p>ok?</p>

camelcase

大驼峰。

capitalize

首单词首字母大写。

downcase

小写。

upcase

大写。

escape

转义HTML标签。

handle/handleize

将字符串格式化为handle。

符串被转换为小写，任何空格和特殊字符被连字符(-)替换。如果标题包含多个连续的空格或特殊字符，则用一个连字符替换它们。句柄的开头和结尾去掉空格和特殊字符。

md5

MD5加密。

sha1

sha1加密。

sha256

sha256加密。

hmac_sha1

hmac_sha1加密。

hmac_sha256

hmac_sha256加密。

newline_to_br

在字符串的每个换行符前插入<br>换行HTML标记。

pluralize

根据数字的值输出英文字符串的单数或复数版本。第一个参数是单数字符串，第二个参数是复数字符串。

输出：

3 items

remove

从字符串中删除所有出现的子字符串。

输出：

Hello, . Goodbye, .

remove_first

只从字符串中移除第一个出现的子字符串。

replace

用子字符串替换所有出现的字符串。

输出：

Hello, Jack. Goodbye, Jack.

replace_first

将第一个出现的字符串替换为子字符串。

slice

从指定下标开始截取指定长度的子字符串，如果下标为负数，则从末尾开始算起，如果不传递长度，则长度为1。

split

使用指定的分隔符将字符串分割成字符串数组。

strip

删除字符串两边的空白符（空格、制表符、换行符、换页符）

lstrip

删除字符串左边的空白符。

rstrip

删除字符串右边的空白符。

strip_html

删除字符串中所有的html标签。

strip_newlines

从字符串中删除所有换行符。

truncate

截断字符串到指定字符数并添加省略号（省略号也算在字符数里）。

可传递第二个参数替代三个点的省略号字符，甚至传递空字符串来去除省略号。

输出：

The cat ca...
Th, and so on
The cat came

truncatewords

截断字符串到指定单词数并添加省略号（省略号不算在单词数里）。

可以传递第二个参数替代三个点的省略号字符，甚至传递空字符串来去除省略号。

输出：

The cat came back...
The cat came back--
The cat came back

url_encode

将字符串中的任何url不安全字符转换为百分比编码的字符。

注意，空格会转换为+号，而不是百分比编码的字符。

url_escape

标识字符串中不允许出现在url中的所有字符，并将这些字符替换为它们的转义变体。

类似于js中的encodeURI()。

url_param_escape

用转义的变量替换url中不允许的字符串中的所有字符，包括&。

更多过滤器请查阅官网：Liquid filters (shopify.dev)