mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-15 04:10:40 -07:00
docs: revamp homepage and switch to custom GitHub buttons
- Make the docs English-only by removing all zh-cn content, the language switcher UI, and related JS/config - Rework homepage feature cards (Safe & Typed, Pure JavaScript, Shopify & Jekyll, Streaming) and refresh section colors/layout - Replace buttons.github.io with custom Star/Sponsor buttons featuring a live star count and dark-mode support - Drop the buttons.js script and tidy banner, header, footer, and share partials Co-authored-by: Cursor <[email protected]>
This commit is contained in:
Yang Jun
+3
-5
@@ -1,10 +1,8 @@
|
||||
title: LiquidJS
|
||||
subtitle: "A simple, expressive and safe template engine."
|
||||
description: "LiquidJS is a simple, expressive and safe Shopify / GitHub Pages compatible template engine in pure JavaScript."
|
||||
subtitle: "A simple, expressive, and safe template engine for JavaScript."
|
||||
description: "LiquidJS is a simple, expressive, and safe template engine for JavaScript, compatible with Shopify and GitHub Pages."
|
||||
author: Harttle
|
||||
language:
|
||||
- en
|
||||
- zh-cn
|
||||
language: en
|
||||
timezone: UTC
|
||||
|
||||
url: https://liquidjs.com
|
||||
|
||||
@@ -1,3 +1 @@
|
||||
en: English
|
||||
zh-cn:
|
||||
name: 简体中文
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
-
|
||||
url: https://opencollective.com/liquidjs/#section-contribute
|
||||
date: '2020-02-26'
|
||||
title:
|
||||
zh-cn: '赞助人：第一个 backer 通过 Open Collective 贡献于 LiquidJS。'
|
||||
en: 'Backers: the first backer contributed to LiquidJS via Open Collective.'
|
||||
-
|
||||
url: https://github.com/harttle/liquidjs/pull/202
|
||||
date: '2020-03-11'
|
||||
title:
|
||||
zh-cn: '内存优化：用更精细的手法重写了解析器，来避免临时字符串的生成，内存占用降低 57.7% 以上。'
|
||||
en: 'Memory Optimization: a more elaborate parser reducing the memory footprint by 57.7%.'
|
||||
-
|
||||
url: https://github.com/harttle/liquidjs/pull/205
|
||||
date: '2020-03-15'
|
||||
title:
|
||||
zh-cn: '性能提升：引入 AST 并重新设计 Token 类型系统，使渲染性能平均提升 100.3%。'
|
||||
en: 'Performance Boost: a simple AST to improve render performance by 100.3%.'
|
||||
-
|
||||
url: https://github.com/harttle/liquidjs/milestone/3?closed=1
|
||||
date: '2021-09-30'
|
||||
title:
|
||||
zh-cn: '流式渲染：4 倍渲染速度，并增加了对流式渲染的支持。'
|
||||
en: 'Streamed Rendering: now render is 4x faster and support streamed rendering.'
|
||||
@@ -7,23 +7,23 @@ ul#intro-feature-list
|
||||
.intro-feature
|
||||
.intro-feature-icon
|
||||
i.icon-shield
|
||||
h3.intro-feature-title Safe Rendering
|
||||
p.intro-feature-desc Liquid templates are highly readable and fault-tolerant thus suitable for designers and customers. Operators and expressions are parsed to AST and no #[code eval] or #[code new Function] are used.
|
||||
h3.intro-feature-title Safe & Typed
|
||||
p.intro-feature-desc Templates are readable and fault-tolerant, parsed to an AST with no #[code eval] or #[code new Function]. The whole repo is written in TypeScript strict mode, so types stay precise and docs accurate.
|
||||
li.intro-feature-wrap
|
||||
.intro-feature
|
||||
.intro-feature-icon
|
||||
i.icon-rocket
|
||||
h3.intro-feature-title Pure JavaScript
|
||||
p.intro-feature-desc Written with pure JavaScript with no native bindings, available in both Node.js and browsers. All of the CMD, ESM and CJS bundles are available on CDN.
|
||||
p.intro-feature-desc Written in pure JavaScript with no native bindings, running in both Node.js and the browser. The CMD, ESM and CJS bundles are all available on CDN.
|
||||
li.intro-feature-wrap
|
||||
.intro-feature
|
||||
.intro-feature-icon
|
||||
i.icon-shopify
|
||||
h3.intro-feature-title Shopify Compatible
|
||||
p.intro-feature-desc All filters and tags from Ruby #[a(href="https://github.com/shopify/liquid") shopify/liquid] are supported by LiquidJS. #[a(href="https://jekyllrb.com/") Jekyll sites], #[a(href="https://pages.github.com/") GitHub Pages] and #[a(href="https://themes.shopify.com/") Shopify templates] can be ported to Node.js without pain.
|
||||
h3.intro-feature-title Shopify & Jekyll
|
||||
p.intro-feature-desc All filters and tags from Ruby #[a(href="https://github.com/shopify/liquid") shopify/liquid] are supported, so #[a(href="https://themes.shopify.com/") Shopify templates] work out of the box — as do #[a(href="https://jekyllrb.com/") Jekyll] sites and #[a(href="https://pages.github.com/") GitHub Pages].
|
||||
li.intro-feature-wrap
|
||||
.intro-feature
|
||||
.intro-feature-icon
|
||||
i.icon-typescript
|
||||
h3.intro-feature-title TypeScript Strict
|
||||
p.intro-feature-desc The whole repo is re-written in TypeScript strict mode to ensure a smooth experience using this lib and the document is precise and always up to date.
|
||||
i.icon-network
|
||||
h3.intro-feature-title Streaming
|
||||
p.intro-feature-desc Render directly to a Node.js stream with #[code renderToNodeStream], emitting output as it's produced — for a faster time to first byte and low memory usage on large pages.
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
title: abs
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
返回数字的绝对值。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ -17 | abs }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
17
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 4 | abs }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
4
|
||||
```
|
||||
|
||||
对于只包含数字的字符串也好使：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "-19.86" | abs }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
19.86
|
||||
```
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
title: append
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
连接两个字符串并返回结果。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "/my/fancy/url" | append: ".html" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
/my/fancy/url.html
|
||||
```
|
||||
|
||||
也可以用于变量。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign filename = "/index.html" %}
|
||||
{{ "website.com" | append: filename }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
website.com/index.html
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: array_to_sentence_string
|
||||
---
|
||||
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
把数组转化为句子，用于做标签列表。有一个可选的连接词参数。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "foo,bar,baz" | split: "," | array_to_sentence_string }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
foo, bar, and baz
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "foo,bar,baz" | split: "," | array_to_sentence_string: "or" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
foo, bar, or baz
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: at_least
|
||||
---
|
||||
|
||||
{% since %}v8.4.0{% endsince %}
|
||||
|
||||
限制数字到某个最小值。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 4 | at_least: 5 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
5
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 4 | at_least: 3 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
4
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: at_most
|
||||
---
|
||||
|
||||
{% since %}v8.4.0{% endsince %}
|
||||
|
||||
限制数字到某个最大值。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 4 | at_most: 5 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
4
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 4 | at_most: 3 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
3
|
||||
```
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
title: capitalize
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把字符串首字母改为大写。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "title" | capitalize }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Title
|
||||
```
|
||||
|
||||
`capitalize` 只会大写首字母，因此后续单词的不会受影响：
|
||||
|
||||
Input
|
||||
```liquid
|
||||
{{ "my great title" | capitalize }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
My great title
|
||||
```
|
||||
@@ -1,49 +0,0 @@
|
||||
---
|
||||
title: ceil
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
向上取整，取整前 LiquidJS 会首先把输入转换为数字。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 1.2 | ceil }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
2
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 2.0 | ceil }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
2
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 183.357 | ceil }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
184
|
||||
```
|
||||
|
||||
下面的例子中输入是字符串：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "3.5" | ceil }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
4
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: cgi_escape
|
||||
---
|
||||
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
把字符串 CGI 转义，用于 URL。用对应的 `%XX` 替换特殊字符，空格会被转义为 `+` 号。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "foo, bar; baz?" | cgi_escape }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
foo%2C+bar%3B+baz%3F
|
||||
```
|
||||
@@ -1,49 +0,0 @@
|
||||
---
|
||||
title: compact
|
||||
---
|
||||
|
||||
{% since %}v9.22.0{% endsince %}
|
||||
|
||||
从数组里移除任何 `null` 和 `undefined` 值。
|
||||
|
||||
假设 `site.pages` 是网页列表，有些网页包含 `category` 属性用来标明类别。如果把它们 `map` 到数组里，那么对于没有 `category` 属性的元素就会是 `undefined`。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign site_categories = site.pages | map: "category" %}
|
||||
|
||||
{% for category in site_categories %}
|
||||
- {{ category }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
- business
|
||||
- celebrities
|
||||
-
|
||||
- lifestyle
|
||||
- sports
|
||||
-
|
||||
- technology
|
||||
```
|
||||
|
||||
使用 `compact` 创建 `site_categories` 数组，可以移除所有 `null` 和 `undefined` 值。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign site_categories = site.pages | map: "category" | compact %}
|
||||
|
||||
{% for category in site_categories %}
|
||||
- {{ category }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
- business
|
||||
- celebrities
|
||||
- lifestyle
|
||||
- sports
|
||||
- technology
|
||||
```
|
||||
@@ -1,55 +0,0 @@
|
||||
---
|
||||
title: concat
|
||||
---
|
||||
|
||||
{% since %}v2.0.0{% endsince %}
|
||||
|
||||
连接多个数组，返回的数组包含所有传入数组的元素。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign fruits = "apples, oranges, peaches" | split: ", " %}
|
||||
{% assign vegetables = "carrots, turnips, potatoes" | split: ", " %}
|
||||
|
||||
{% assign everything = fruits | concat: vegetables %}
|
||||
|
||||
{% for item in everything %}
|
||||
- {{ item }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
- apples
|
||||
- oranges
|
||||
- peaches
|
||||
- carrots
|
||||
- turnips
|
||||
- potatoes
|
||||
```
|
||||
|
||||
可以链式地使用 `concat` 过滤器来连接多个数组：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign furniture = "chairs, tables, shelves" | split: ", " %}
|
||||
|
||||
{% assign everything = fruits | concat: vegetables | concat: furniture %}
|
||||
|
||||
{% for item in everything %}
|
||||
- {{ item }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
- apples
|
||||
- oranges
|
||||
- peaches
|
||||
- carrots
|
||||
- turnips
|
||||
- potatoes
|
||||
- chairs
|
||||
- tables
|
||||
- shelves
|
||||
```
|
||||
@@ -1,86 +0,0 @@
|
||||
---
|
||||
title: date
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把时间戳转换为字符串。LiquidJS 尝试跟 Shopify/Liquid 保持一致，它用的是 Ruby 核心的 [Time#strftime(string)](http://www.ruby-doc.org/core/Time.html#method-i-strftime)。此外 LiquidJS 会先通过 [new Date()][newDate] 尝试把输入转换为 Date 对象。
|
||||
|
||||
但 LiquidJS 支持的格式与 [Ruby 的 flag](https://ruby-doc.org/core/strftime_formatting_rdoc.html) 有些不同：
|
||||
* `%Z`（自 v10.11.1 起支持）只有在传入了时区时才起作用（可以通过 `LiquidOption` 传入，也可以在创建日期时单独传入，见下文）。如果传入的时区是个数字，那么它的表现将会与 `%z` 相同。如果没有传入时区，将会返回 [运行时默认时区](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions#timezone)。
|
||||
* LiquidJS 提供额外的 `%q` 用来处理序数：`{{ '2023/02/02' | date: '%d%q of %b'}}` => `02nd of Feb`
|
||||
* 日期字面量会通过 [new Date()][jsDate] 转化为 `Date` 对象，这意味着字面量默认使用运行时默认时区。
|
||||
* 格式字参数是可选的：
|
||||
* 如果不传，默认为 `%A, %B %-e, %Y at %-l:%M %P %z`。
|
||||
* 上述默认值可以通过 [`dateFormat`](/api/interfaces/LiquidOptions.html#dateFormat) 参数覆盖。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ article.published_at | date: "%a, %b %d, %y" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Fri, Jul 17, 15
|
||||
```
|
||||
|
||||
{% note info 时区 %}
|
||||
日期在输出时会转换为当地时区，设置 `timezoneOffset` LiquidJS 参数可以指定一个不同的时区。或者设置 `preserveTimezones` 为 `true` 来保持字面量时间戳的时区，数据中的日期对象不受此参数的影响。
|
||||
{% endnote %}
|
||||
|
||||
你也可以在使用 `date` 时再设置时区：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "1990-12-31T23:00:00Z" | date: "%Y-%m-%dT%H:%M:%S", 360}} // 等价于设置 `options.timezoneOffset` to `360`.
|
||||
{{ "1990-12-31T23:00:00Z" | date: "%Y-%m-%dT%H:%M:%S", "Asia/Colombo" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```liquid
|
||||
1990-12-31T17:00:00
|
||||
1991-01-01T04:30:00
|
||||
```
|
||||
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ article.published_at | date: "%Y" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
2015
|
||||
```
|
||||
|
||||
输入也可以是符合 JavaScript `Date` 格式的字符串：：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "March 14, 2016" | date: "%b %d, %y" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Mar 14, 16
|
||||
```
|
||||
|
||||
{% note info 时间戳字符串 %}
|
||||
LiquidJS 使用 JavaScript [Date][newDate] 来解析输入字符串，意味着支持 [IETF-compliant RFC 2822 时间戳](https://datatracker.ietf.org/doc/html/rfc2822#page-14) 和 [特定版本的 ISO8601](https://www.ecma-international.org/ecma-262/11.0/#sec-date.parse)。
|
||||
{% endnote %}
|
||||
|
||||
可以用特殊值 `"now"`（或`"today"`）来获取当前时间：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
This page was last updated at 2020-03-25 15:57.
|
||||
```
|
||||
|
||||
{% note info 当前时间 %}注意得到的当前时间是模板渲染时的时间，如果你在用静态站点生成器或者模板有被缓存这一时间可能与用户看到的时间不同。{% endnote %}
|
||||
|
||||
[newDate]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
title: date_to_long_string
|
||||
---
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
把日期转换为长格式（只支持 US/UK 两种），与 Jekyll 的 `date_to_long_string` 过滤器一样。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ site.time | date_to_long_string }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
07 November 2008
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ site.time | date_to_long_string: "ordinal" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
7th November 2008
|
||||
```
|
||||
|
||||
|
||||
注意 JavaScript `Date` 没有时区信息，详情请参考 [date][date] 过滤器。
|
||||
|
||||
[date]: ./date.html
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
title: date_to_rfc822
|
||||
---
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
把日期转换为 RFC-822 格式用于 RSS feed，与 Jekyll 的 `date_to_rfc822` 过滤器一样。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ site.time | date_to_rfc822 }}
|
||||
```
|
||||
|
||||
输入
|
||||
```text
|
||||
Mon, 07 Nov 2008 13:07:54 -0800
|
||||
```
|
||||
|
||||
注意 JavaScript `Date` 没有时区信息，详情请参考 [date][date] 过滤器。
|
||||
|
||||
[date]: ./date.html
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
title: date_to_string
|
||||
---
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
把日期转换为短格式（只支持 US/UK 两种），与 Jekyll 的 `date_to_string` 过滤器一样。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ site.time | date_to_string }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
07 Nov 2008
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ site.time | date_to_string: "ordinal", "US" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Nov 7th, 2008
|
||||
```
|
||||
|
||||
注意 JavaScript `Date` 没有时区信息，详情请参考 [date][date] 过滤器。
|
||||
|
||||
[date]: ./date.html
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
title: date_to_xmlschema
|
||||
---
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
把日期转换为 XML Schema (ISO 8601) 格式，与 Jekyll 的 `date_to_xmlschema` 过滤器一样。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ site.time | date_to_xmlschema }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
2008-11-07T13:07:54-08:00
|
||||
```
|
||||
|
||||
注意 JavaScript `Date` 没有时区信息，详情请参考 [date][date] 过滤器。
|
||||
|
||||
[date]: ./date.html
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
title: default
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
在值不存在时给一个默认值，如果左侧是 [falsy][falsy] 或空（`string` 或 `Array`）就会使用这个默认值。下面的例子中 `product_price` 没有定义，因此使用了默认值。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ product_price | default: 2.99 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
2.99
|
||||
```
|
||||
|
||||
下面的例子中定义了 `product_price` 所以没有使用默认值。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign product_price = 4.99 %}
|
||||
{{ product_price | default: 2.99 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
4.99
|
||||
```
|
||||
|
||||
下面例子中 `product_price` 为空，所以使用了默认值。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign product_price = "" %}
|
||||
{{ product_price | default: 2.99 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
2.99
|
||||
```
|
||||
|
||||
## 允许 `false`
|
||||
|
||||
{% since %}v9.32.0{% endsince %}
|
||||
|
||||
为了允许让 `false` 直接输出而不是用默认值，可以用 `allow_false` 参数。
|
||||
|
||||
输入
|
||||
|
||||
```liquid
|
||||
{% assign display_price = false %}
|
||||
{{ display_price | default: true, allow_false: true }}
|
||||
```
|
||||
|
||||
输出
|
||||
|
||||
```text
|
||||
false
|
||||
```
|
||||
|
||||
[falsy]: ../tutorials/truthy-and-falsy.html
|
||||
@@ -1,48 +0,0 @@
|
||||
---
|
||||
title: divided_by
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
两数相除返回商，返回结果数字在 JavaScript 中 `.toString()` 得到的字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 16 | divided_by: 4 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
4
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 5 | divided_by: 3 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
1.6666666666666667
|
||||
```
|
||||
|
||||
在 JavaScript 里数字没有浮点和整数的区分，它们的类型都是 `number`：
|
||||
|
||||
```javascript
|
||||
// always true
|
||||
5.0 === 5
|
||||
```
|
||||
|
||||
因此如果需要做整数运算，需要传入额外的 `integerArithmetic` 参数：
|
||||
|
||||
Input
|
||||
```liquid
|
||||
{{ 5 | divided_by: 3, true }}
|
||||
```
|
||||
|
||||
Output
|
||||
```text
|
||||
1
|
||||
```
|
||||
|
||||
[floor]: ./floor.html
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: downcase
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
字符串中每个字符都转为小写，对已经是小写的字符没有影响。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Parker Moore" | downcase }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
parker moore
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "apple" | downcase }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
apple
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: escape
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把字符串中的 HTML 特殊字符转义，对不需要转义的字符串不会产生影响。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Have you read 'James & the Giant Peach'?" | escape }}
|
||||
```
|
||||
|
||||
输出
|
||||
<pre class="highlight">
|
||||
{{"Have you read 'James & the Giant Peach'?" | escape}}
|
||||
</pre>
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Tetsuro Takara" | escape }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Tetsuro Takara
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: escape_once
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把字符串中的特殊字符转义得到可用在 URL 里的字符串，对已经转义过的字符串和不需要转义的字符串不会产生影响。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "1 < 2 & 3" | escape_once }}
|
||||
```
|
||||
|
||||
输出
|
||||
<pre class="highlight">
|
||||
{{"1 < 2 & 3" | escape}}
|
||||
</pre>
|
||||
|
||||
输入
|
||||
<pre class="highlight">
|
||||
{{ "{{"1 < 2 & 3" | escape}}" | escape_once }}
|
||||
</pre>
|
||||
|
||||
输出
|
||||
<pre class="highlight">
|
||||
{{"1 < 2 & 3" | escape}}
|
||||
</pre>
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
title: find
|
||||
---
|
||||
|
||||
{% since %}v10.11.0{% endsince %}
|
||||
|
||||
在数组中找到给定的属性为给定的值的第一个元素并返回；如果没有这样的元素则返回 `nil`。对于 `members` 数组：
|
||||
|
||||
```javascript
|
||||
const members = [
|
||||
{ graduation_year: 2013, name: 'Jay' },
|
||||
{ graduation_year: 2014, name: 'John' },
|
||||
{ graduation_year: 2014, name: 'Jack' }
|
||||
]
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ members | find: "graduation_year", 2014 | json }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
{"graduation_year":2014,"name":"John"}
|
||||
```
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
title: find_exp
|
||||
---
|
||||
|
||||
{% since %}v10.11.0{% endsince %}
|
||||
|
||||
找到数组中给定的表达式值为 `true` 的第一个元素，如果没有这样的元素则返回 `nil`。对于下面的 `members` 数组：
|
||||
|
||||
```javascript
|
||||
const members = [
|
||||
{ graduation_year: 2013, name: 'Jay' },
|
||||
{ graduation_year: 2014, name: 'John' },
|
||||
{ graduation_year: 2014, name: 'Jack' }
|
||||
]
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ members | find_exp: "item", "item.graduation_year == 2014" | json }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
{"graduation_year":2014,"name":"John"}
|
||||
```
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: first
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
返回数组的第一个元素。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Ground control to Major Tom." | split: " " | first }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Ground
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
|
||||
{{ my_array.first }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
zebra
|
||||
```
|
||||
|
||||
需要在标签中使用的时候，可以用点来计算 `first`：
|
||||
|
||||
```liquid
|
||||
{% if my_array.first == "zebra" %}
|
||||
Here comes a zebra!
|
||||
{% endif %}
|
||||
```
|
||||
@@ -1,49 +0,0 @@
|
||||
---
|
||||
title: floor
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
数字下取整，LiquidJS 会尝试把输入转换为数字再做下取整操作。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 1.2 | floor }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
1
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 2.0 | floor }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
2
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 183.357 | floor }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
183
|
||||
```
|
||||
|
||||
下面的例子中输入是个数字：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "3.5" | floor }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
3
|
||||
```
|
||||
@@ -1,48 +0,0 @@
|
||||
---
|
||||
title: group_by
|
||||
---
|
||||
|
||||
{% since %}v10.11.0{% endsince %}
|
||||
|
||||
把数组元素按照给定的属性的值分组。对于 `members` 数组：
|
||||
|
||||
```javascript
|
||||
const members = [
|
||||
{ graduation_year: 2003, name: 'Jay' },
|
||||
{ graduation_year: 2003, name: 'John' },
|
||||
{ graduation_year: 2004, name: 'Jack' }
|
||||
]
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ members | group_by: "graduation_year" | json: 2 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
[
|
||||
{
|
||||
"name": 2003,
|
||||
"items": [
|
||||
{
|
||||
"graduation_year": 2003,
|
||||
"name": "Jay"
|
||||
},
|
||||
{
|
||||
"graduation_year": 2003,
|
||||
"name": "John"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": 2004,
|
||||
"items": [
|
||||
{
|
||||
"graduation_year": 2004,
|
||||
"name": "Jack"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@@ -1,48 +0,0 @@
|
||||
---
|
||||
title: group_by_exp
|
||||
---
|
||||
|
||||
{% since %}v10.11.0{% endsince %}
|
||||
|
||||
把数组元素按照给定的 Liquid 表达式的值分组。对于 `members` 数组：
|
||||
|
||||
```javascript
|
||||
const members = [
|
||||
{ graduation_year: 2013, name: 'Jay' },
|
||||
{ graduation_year: 2014, name: 'John' },
|
||||
{ graduation_year: 2009, name: 'Jack' }
|
||||
]
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ members | group_by_exp: "item", "item.graduation_year | truncate: 3, ''" | json: 2 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
[
|
||||
{
|
||||
"name": "201",
|
||||
"items": [
|
||||
{
|
||||
"graduation_year": 2013,
|
||||
"name": "Jay"
|
||||
},
|
||||
{
|
||||
"graduation_year": 2014,
|
||||
"name": "John"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "200",
|
||||
"items": [
|
||||
{
|
||||
"graduation_year": 2009,
|
||||
"name": "Jack"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
title: inspect
|
||||
---
|
||||
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
类似于 `json`，但可以处理循环引用的情况。例如对于上下文：
|
||||
|
||||
```
|
||||
const foo = {
|
||||
bar: 'BAR'
|
||||
}
|
||||
foo.foo = foo
|
||||
const scope = { foo }
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% foo | inspect %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
{"bar":"BAR","foo":"[Circular]"}
|
||||
```
|
||||
|
||||
## 格式化
|
||||
|
||||
可以指定一个 `space` 参数来缩进长度。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ foo | inspect: 4 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
{
|
||||
"bar": "BAR",
|
||||
"foo": "[Circular]"
|
||||
}
|
||||
```
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
title: join
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把数组中的元素连接成为一个字符串，以传入的参数作为分隔符。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
|
||||
{{ beatles | join: " and " }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
John and Paul and George and Ringo
|
||||
```
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
title: json
|
||||
---
|
||||
|
||||
{% since %}v9.10.0{% endsince %}
|
||||
|
||||
通过 `JSON.stringify()` 把值转换为字符串，多用于调试用途。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign arr = "foo bar coo" | split: " " %}
|
||||
{{ arr | json }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
["foo","bar","coo"]
|
||||
```
|
||||
|
||||
## 格式化
|
||||
|
||||
{% since %}v10.11.0{% endsince %}
|
||||
|
||||
可以指定一个 `space` 参数来格式化 JSON。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign arr = "foo bar coo" | split: " " %}
|
||||
{{ arr | json: 4 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
[
|
||||
"foo",
|
||||
"bar",
|
||||
"coo"
|
||||
]
|
||||
```
|
||||
@@ -1,9 +0,0 @@
|
||||
---
|
||||
title: jsonify
|
||||
---
|
||||
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
见 [json][json]。
|
||||
|
||||
[json]: ./json.html
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: last
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
返回数组的最后一个元素。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Ground control to Major Tom." | split: " " | last }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Tom.
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
|
||||
{{ my_array.last }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
tiger
|
||||
```
|
||||
|
||||
需要在标签中使用的时候，可以用点来计算 `last`：
|
||||
|
||||
```liquid
|
||||
{% if my_array.last == "tiger" %}
|
||||
There goes a tiger!
|
||||
{% endif %}
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: lstrip
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
移除字符串左侧的空白字符（制表符、空格、换行），不影响词之间的空格。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
BEGIN{{ " So much room for activities! " | lstrip }}END
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
BEGINSo much room for activities! END
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: map
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
按照属性名提取对象的属性形成另一个数组并返回。
|
||||
|
||||
下面的例子中假设 `site.pages` 包含了站点的所有网页元信息。使用 `assign` 加 `map` 过滤器创建了一个 `site.pages` 中所有对象的 `category` 属性的值构成的数组。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign all_categories = site.pages | map: "category" %}
|
||||
|
||||
{% for item in all_categories %}
|
||||
- {{ item }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
- business
|
||||
- celebrities
|
||||
- lifestyle
|
||||
- sports
|
||||
- technology
|
||||
```
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: minus
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
两数相减。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 4 | minus: 2 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
2
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 16 | minus: 4 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
12
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 183.357 | minus: 12 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
171.357
|
||||
```
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: modulo
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
返回两数相除的余数。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 3 | modulo: 2 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
1
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 24 | modulo: 7 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
3
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 183.357 | modulo: 12 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
3.3569999999999993
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
title: newline_to_br
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把字符串里的所有换行符（`\n`）替换为 HTML 换行（`<br />`）。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% capture string_with_newlines %}
|
||||
Hello
|
||||
there
|
||||
{% endcapture %}
|
||||
|
||||
{{ string_with_newlines | newline_to_br }}
|
||||
```
|
||||
|
||||
输出
|
||||
```html
|
||||
|
||||
<br/>Hello<br/>there<br/>
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: normalize_whitespace
|
||||
---
|
||||
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
把连续的空白字符替换为单个空格。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "a \n b" | normalize_whitespace }}
|
||||
```
|
||||
|
||||
输出
|
||||
```html
|
||||
a b
|
||||
```
|
||||
@@ -1,49 +0,0 @@
|
||||
---
|
||||
title: number_of_words
|
||||
---
|
||||
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
计算文本中的单词数。此过滤器接受一个可选参数，用于控制输入字符串中汉字-日语-韩语（CJK）字符的处理方式：
|
||||
- `'cjk'`：将每个检测到的 CJK 字符计为一个单词，无论是否由空格分隔。
|
||||
- `'auto'`：与 `'cjk'` 类似，但如果过滤器用于可能包含或不包含 CJK 字符的字符串，则性能更好。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Hello world!" | number_of_words }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
2
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "你好hello世界world" | number_of_words }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
1
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "你好hello世界world" | number_of_words: "cjk" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
6
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "你好hello世界world" | number_of_words: "auto" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
6
|
||||
```
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
title: 过滤器
|
||||
description: 每个 Liquid 过滤器的描述和示例
|
||||
---
|
||||
|
||||
LiquidJS 支持 Liquid 语法中具体业务无关的过滤器，基本上 [shopify/liquid 核心][shopify/liquid] 支持的 LiquidJS 都支持。这部分包含了所有 LiquidJS 支持的过滤器的文档和使用示例。
|
||||
|
||||
LiquidJS 共支持 40+ 个过滤器，可以分为如下几类：
|
||||
|
||||
类别 | 过滤器
|
||||
--- | ---
|
||||
数学 | plus, minus, modulo, times, floor, ceil, round, divided_by, abs, at_least, at_most
|
||||
字符串 | append, prepend, capitalize, upcase, downcase, strip, lstrip, rstrip, strip_newlines, split, replace, replace_first, replace_last, remove, remove_first, remove_last, truncate, truncatewords, normalize_whitespace, number_of_words, array_to_sentence_string
|
||||
HTML/URI | escape, escape_once, url_encode, url_decode, strip_html, newline_to_br, xml_escape, cgi_escape, uri_escape, slugify
|
||||
数组 | slice, map, sort, sort_natural, uniq, where, where_exp, group_by, group_by_exp, find, find_exp, first, last, join, reverse, concat, compact, size, push, pop, shift, unshift
|
||||
日期 | date, date_to_xmlschema, date_to_rfc822, date_to_string, date_to_long_string
|
||||
其他 | default, json, jsonify, inspect, raw, to_integer
|
||||
|
||||
[shopify/liquid]: https://github.com/Shopify/liquid
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: plus
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
两数相加。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 4 | plus: 2 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
6
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 16 | plus: 4 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
20
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 183.357 | plus: 12 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
195.357
|
||||
```
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
title: pop
|
||||
---
|
||||
|
||||
{% since %}v10.11.0{% endsince %}
|
||||
|
||||
从数组末尾弹出一个元素。注意该操作不会改变原数组，而是在一份拷贝上操作。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign fruits = "apples, oranges, peaches" | split: ", " %}
|
||||
|
||||
{% assign everything = fruits | pop %}
|
||||
|
||||
{% for item in everything %}
|
||||
- {{ item }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
- apples
|
||||
- oranges
|
||||
```
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
title: prepend
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
在字符串开头添加另一个字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Some fruit: apples, oranges, and bananas
|
||||
```
|
||||
|
||||
`prepend` 也可以用于变量。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign url = "example.com" %}
|
||||
{{ "/index.html" | prepend: url }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
example.com/index.html
|
||||
```
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
title: push
|
||||
---
|
||||
|
||||
{% since %}v10.8.0{% endsince %}
|
||||
|
||||
在数组中添加一个元素。注意该操作不会改变原数组，而是在一份拷贝上操作。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign fruits = "apples, oranges" | split: ", " %}
|
||||
|
||||
{% assign everything = fruits | push: "peaches" %}
|
||||
|
||||
{% for item in everything %}
|
||||
- {{ item }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
- apples
|
||||
- oranges
|
||||
- peaches
|
||||
```
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
title: raw
|
||||
---
|
||||
|
||||
{% since %}v9.37.0{% endsince %}
|
||||
|
||||
直接返回变量的值。配合 [outputEscape](/api/interfaces/LiquidOptions.html#outputEscape) 参数使用。
|
||||
|
||||
{% note info 自动转义 %}
|
||||
默认情况下 `outputEscape` 为 `undefined`，这意味着 LiquidJS 输出不会默认转义，因此这时使用 `raw` 没有意义。
|
||||
{% endnote %}
|
||||
|
||||
输入（未设置 `outputEscape`）
|
||||
```liquid
|
||||
{{ "<" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
<
|
||||
```
|
||||
|
||||
输入（`outputEscape="escape"`）
|
||||
```liquid
|
||||
{{ "<" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
<
|
||||
```
|
||||
|
||||
输入（`outputEscape="json"`）
|
||||
```liquid
|
||||
{{ "<" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
"<"
|
||||
```
|
||||
|
||||
输入（`outputEscape="escape"`）
|
||||
```liquid
|
||||
{{ "<" | raw }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
<
|
||||
```
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: remove
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
移除字符串中出现的所有指定子字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "I strained to see the train through the rain" | remove: "rain" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
I strained to see the t through the
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: remove_first
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
移除字符串中出现的第一个指定子字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "I strained to see the train through the rain" | remove_first: "rain" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
I strained to see the t through the rain
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: remove_last
|
||||
---
|
||||
|
||||
{% since %}v10.2.0{% endsince %}
|
||||
|
||||
移除字符串中出现的最后一个指定子字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "I strained to see the train through the rain" | remove_last: "rain" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
I strained to see the train through the
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: replace
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把字符串中出现的每一个指定子字符串替换为另一个字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Take your protein pills and put your helmet on
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: replace_first
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把字符串中出现的第一个指定子字符串替换为另一个字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Take my protein pills and put my helmet on" | replace_first: "my", "your" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Take your protein pills and put my helmet on
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: replace_last
|
||||
---
|
||||
|
||||
{% since %}v10.2.0{% endsince %}
|
||||
|
||||
把字符串中出现的最后一个指定子字符串替换为另一个字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Take my protein pills and put my helmet on" | replace_last: "my", "your" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Take my protein pills and put your helmet on
|
||||
```
|
||||
@@ -1,33 +0,0 @@
|
||||
---
|
||||
title: reverse
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
反转数组的所有元素，不可用于字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
|
||||
|
||||
{{ my_array | reverse | join: ", " }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
|
||||
plums, peaches, oranges, apples
|
||||
```
|
||||
|
||||
尽管 `reverse` 不能直接用于字符串，可以把字符串分割成数组，反转后再连接成字符串：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
.moT rojaM ot lortnoc dnuorG
|
||||
```
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: round
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
数字四舍五入取整，如果传入小数位数作为参数。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 1.2 | round }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
1
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 2.7 | round }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
3
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 183.357 | round: 2 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
183.36
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: rstrip
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
移除字符串右侧的空白字符（制表符、空格、换行），不影响词之间的空格。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
BEGIN{{ " So much room for activities! " | rstrip }}END
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
BEGIN So much room for activities!END
|
||||
```
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
title: shift
|
||||
---
|
||||
|
||||
{% since %}v10.11.0{% endsince %}
|
||||
|
||||
从数组头部弹出一个元素。注意该操作不会改变原数组，而是在一份拷贝上操作。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign fruits = "apples, oranges, peaches" | split: ", " %}
|
||||
|
||||
{% assign everything = fruits | shift %}
|
||||
|
||||
{% for item in everything %}
|
||||
- {{ item }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
- oranges
|
||||
- peaches
|
||||
```
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
title: size
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
返回字符串的字符个数或者数组的元素个数。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Ground control to Major Tom." | size }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
28
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
|
||||
|
||||
{{ my_array.size }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
|
||||
4
|
||||
```
|
||||
|
||||
在标签里可以用点来计算 `size`：
|
||||
|
||||
```liquid
|
||||
{% if site.pages.size > 10 %}
|
||||
This is a big website!
|
||||
{% endif %}
|
||||
```
|
||||
@@ -1,49 +0,0 @@
|
||||
---
|
||||
title: slice
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
返回第一个参数为下标位置的一个字符，如果指定了第二个参数会被解释为子字符串的长度。字符串下标从零开始。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Liquid" | slice: 0 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
L
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Liquid" | slice: 2 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
q
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Liquid" | slice: 2, 5 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
quid
|
||||
```
|
||||
|
||||
If the first argument is a negative number, the indices are counted from the end of the string:
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Liquid" | slice: -3, 2 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
ui
|
||||
```
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
title: slugify
|
||||
---
|
||||
|
||||
将字符串转换为小写的 URL “slug”。`slugify` 过滤器接受两个选项：
|
||||
|
||||
1. `mode: string`。默认为`"default"`，它可选的值如下：
|
||||
- `"none"`：没有字符
|
||||
- `"raw"`：空格
|
||||
- `"default"`：空格和非字母数字字符
|
||||
- `"pretty"`：空格和非字母数字字符，但排除 `._~!$&'()+,;=@`
|
||||
- `"ascii"`：空格、非字母数字和非 ASCII 字符
|
||||
- `"latin"`：与默认相同，但拉丁字符首先进行音译（例如，àèïòü 转换为 aeiou）。
|
||||
2. `case: boolean`。默认为 `false`。如果为 `true`，则保留 `slug` 原本的大小写。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "The _config.yml file" | slugify }}
|
||||
```
|
||||
输出
|
||||
```
|
||||
the-config-yml-file
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "The _config.yml file" | slugify: "pretty" }}
|
||||
```
|
||||
输出
|
||||
```
|
||||
the-_config.yml-file
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "The _cönfig.yml file" | slugify: "ascii" }}
|
||||
```
|
||||
输出
|
||||
```
|
||||
the-c-nfig-yml-file
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "The cönfig.yml file" | slugify: "latin" }}
|
||||
```
|
||||
输出
|
||||
```
|
||||
the-config-yml-file
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "The cönfig.yml file" | slugify: "latin", true }}
|
||||
```
|
||||
输出
|
||||
```
|
||||
The-config-yml-file
|
||||
```
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
title: sort
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
对数组中的元素排序，排序方式为 JavaScript `Array.prototype.sort()`。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
|
||||
|
||||
{{ my_array | sort | join: ", " }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
|
||||
Sally Snake, giraffe, octopus, zebra
|
||||
```
|
||||
|
||||
有一个参数来指定用元素的哪个属性排序。
|
||||
|
||||
```liquid
|
||||
{% assign products_by_price = collection.products | sort: "price" %}
|
||||
{% for product in products_by_price %}
|
||||
<h4>{{ product.title }}</h4>
|
||||
{% endfor %}
|
||||
```
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
title: sort_natural
|
||||
---
|
||||
|
||||
{% since %}v8.4.0{% endsince %}
|
||||
|
||||
大小写不敏感地对数组元素排序。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
|
||||
|
||||
{{ my_array | sort_natural | join: ", " }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
|
||||
giraffe, octopus, Sally Snake, zebra
|
||||
```
|
||||
|
||||
有一个参数来指定用元素的哪个属性排序。
|
||||
|
||||
```liquid
|
||||
{% assign products_by_company = collection.products | sort_natural: "company" %}
|
||||
{% for product in products_by_company %}
|
||||
<h4>{{ product.title }}</h4>
|
||||
{% endfor %}
|
||||
```
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
title: split
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把字符串按照指定的分隔符进行分割，`split` 通常用于把逗号分隔的字符串转换为数组。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
|
||||
|
||||
{% for member in beatles %}
|
||||
{{ member }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
|
||||
|
||||
|
||||
John
|
||||
|
||||
Paul
|
||||
|
||||
George
|
||||
|
||||
Ringo
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: strip
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
移除字符串两侧的空白字符（制表符、空格、换行），不影响词之间的空格。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
BEGIN{{ " So much room for activities! " | strip }}END
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
BEGINSo much room for activities!END
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: strip_html
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
移除字符串中的 HTML 标签。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Have you read Ulysses?
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
title: strip_newlines
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
移除字符串中的换行符。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% capture string_with_newlines %}
|
||||
Hello
|
||||
there
|
||||
{% endcapture %}
|
||||
|
||||
{{ string_with_newlines | strip_newlines }}
|
||||
```
|
||||
|
||||
输出
|
||||
```html
|
||||
|
||||
Hellothere
|
||||
```
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: times
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
两数相乘。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 3 | times: 2 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
6
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 24 | times: 7 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
168
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ 183.357 | times: 12 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
2200.284
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: to_integer
|
||||
---
|
||||
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
转换为数字类型。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "123" | to_integer | json }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
123
|
||||
```
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
title: truncate
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把字符串截断为指定长度，可以指定一个数字表示截断到多少长度。最后会添加一个省略号（...）且记在长度里。
|
||||
|
||||
## 基本使用
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Ground control to Major Tom." | truncate: 20 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Ground control to...
|
||||
```
|
||||
|
||||
## 自定义省略号
|
||||
|
||||
`truncate` 的第二个可选参数用来指定后面追加的字符串，默认为省略号（...）。这个参数的长度会计算在第一个参数的长度里。例如，如果要把字符串截断到 10 个字符，并使用了一个 3 字符长度的省略号，那么第一个参数的值要设置到 **13**。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Ground control to Major Tom." | truncate: 25, ", and so on" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Ground control, and so on
|
||||
```
|
||||
|
||||
## 不要省略号
|
||||
|
||||
如果需要把字符串截断到特定长度且不要添加省略号，则把第二个参数设置为空字符串：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Ground control to Major Tom." | truncate: 20, "" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Ground control to Ma
|
||||
```
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
title: truncatewords
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把字符串截断为指定个数的单词，可以指定一个数字表示截断到多少个单词。最后会添加一个省略号（...）。
|
||||
|
||||
## 基本使用
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Ground control to Major Tom." | truncatewords: 3 }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Ground control to...
|
||||
```
|
||||
|
||||
## 自定义省略号
|
||||
|
||||
`truncate` 的第二个可选参数用来指定后面追加的字符串，默认为省略号（...）。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Ground control to Major Tom." | truncatewords: 3, "--" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Ground control to--
|
||||
```
|
||||
|
||||
## 不要省略号
|
||||
|
||||
如果不希望添加省略号，把第二个参数设置为空字符串即可：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Ground control to Major Tom." | truncatewords: 3, "" }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Ground control to
|
||||
```
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
title: uniq
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
移除数组中的重复元素。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}
|
||||
{{ my_array | uniq | join: ", " }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
|
||||
ants, bugs, bees```
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
title: unshift
|
||||
---
|
||||
|
||||
{% since %}v10.11.0{% endsince %}
|
||||
|
||||
往数组头部添加一个元素。注意该操作不会改变原数组，而是在一份拷贝上操作。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign fruits = "oranges, peaches" | split: ", " %}
|
||||
|
||||
{% assign everything = fruits | unshift: "apples" %}
|
||||
|
||||
{% for item in everything %}
|
||||
- {{ item }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
- apples
|
||||
- oranges
|
||||
- peaches
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: upcase
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
字符串中每个字符都转为大写，对已经是大写的字符没有影响。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Parker Moore" | upcase }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
PARKER MOORE
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "APPLE" | upcase }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
APPLE
|
||||
```
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
title: uri_escape
|
||||
---
|
||||
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
把 URI 中的特殊字符做百分号编码，空格会变成 `%20`。[保留字][reserved] 不会被转义。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "https://example.com/?q=foo, \bar?" | uri_escape }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
https://example.com/?q=foo,%20%5Cbar?
|
||||
```
|
||||
|
||||
[reserved]: https://en.wikipedia.org/wiki/Percent-encoding#Types_of_URI_characters
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: url_decode
|
||||
---
|
||||
|
||||
{% since %}v6.1.0{% endsince %}
|
||||
|
||||
把 URL 编码的字符串解码。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "%27Stop%21%27+said+Fred" | url_decode }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
'Stop!' said Fred
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: url_encode
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把字符串中 URL 不安全的字符转义为百分号编码。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "john@liquid.com" | url_encode }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
john%40liquid.com
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Tetsuro Takara" | url_encode }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Tetsuro+Takara
|
||||
```
|
||||
@@ -1,134 +0,0 @@
|
||||
---
|
||||
title: where
|
||||
---
|
||||
|
||||
{% since %}v8.1.0{% endsince %}
|
||||
|
||||
按照数组中对象的属性值来过滤得到新数组，如果未指定第二个参数（属性值）则过滤得到所有属性值为 [truthy][truthy] 的对象。
|
||||
|
||||
下面的例子中，假设你有一个 `products` 列表并且希望展示其中的厨房产品。使用 `where` 过滤器可以得到一个只包含 `"type"` 属性值为 `"kitchen"` 的元素的数组。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
All products:
|
||||
{% for product in products %}
|
||||
- {{ product.title }}
|
||||
{% endfor %}
|
||||
|
||||
{% assign kitchen_products = products | where: "type", "kitchen" %}
|
||||
|
||||
Kitchen products:
|
||||
{% for product in kitchen_products %}
|
||||
- {{ product.title }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
All products:
|
||||
- Vacuum
|
||||
- Spatula
|
||||
- Television
|
||||
- Garlic press
|
||||
|
||||
Kitchen products:
|
||||
- Spatula
|
||||
- Garlic press
|
||||
```
|
||||
|
||||
如果你有一个产品列表且希望只显示可用的产品，可以用 `where` 过滤器但不指定目标值，LiquidJS 会过滤得到 `"available"` 值为 [truthy][truthy] 的产品列表。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
All products:
|
||||
{% for product in products %}
|
||||
- {{ product.title }}
|
||||
{% endfor %}
|
||||
|
||||
{% assign available_products = products | where: "available" %}
|
||||
|
||||
Available products:
|
||||
{% for product in available_products %}
|
||||
- {{ product.title }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
All products:
|
||||
- Coffee mug
|
||||
- Limited edition sneakers
|
||||
- Boring sneakers
|
||||
|
||||
Available products:
|
||||
- Coffee mug
|
||||
- Boring sneakers
|
||||
```
|
||||
|
||||
`where` 后面再加一个 `first` 可以用来得到单个元素。例如，你要展示秋季系列里的单个 T-shirt。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign new_shirt = products | where: "type", "shirt" | first %}
|
||||
|
||||
Featured product: {{ new_shirt.title }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Featured product: Hawaiian print sweater vest
|
||||
```
|
||||
|
||||
此外 `property` 可以是任意合法的变量表达式，就像在**输出**结构中一样，只是它的上下文是数组的每一个元素。对于下面的 `products` 数组：
|
||||
|
||||
```javascript
|
||||
const products = [
|
||||
{ meta: { details: { class: 'A' } }, order: 1 },
|
||||
{ meta: { details: { class: 'B' } }, order: 2 },
|
||||
{ meta: { details: { class: 'B' } }, order: 3 }
|
||||
]
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign selected = products | where: 'meta.details["class"]', "B" %}
|
||||
{% for item in selected -%}
|
||||
- {{ item.order }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
- 2
|
||||
- 3
|
||||
```
|
||||
|
||||
## Jekyll 风格
|
||||
|
||||
{% since %}v10.19.0{% endsince %}
|
||||
|
||||
对于从 Jekyll 迁移到 Liquid 的用户，有一个 `jekyllWhere` 选项可以模拟 Jekyll 的 `where` 过滤器的行为。该选项默认设置为 `false`。启用后，如果 `property` 是一个数组，目标值将使用 `Array.includes` 而不是 `==` 进行匹配，这在过滤标签时特别有用。
|
||||
|
||||
例如，以下代码：
|
||||
|
||||
```javascript
|
||||
const pages = [
|
||||
{ tags: ["cat", "food"], title: 'Cat Food' },
|
||||
{ tags: ["dog", "food"], title: 'Dog Food' },
|
||||
]
|
||||
```
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign selected = pages | where: 'tags', "cat" %}
|
||||
{% for item in selected -%}
|
||||
- {{ item.title }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Cat Food
|
||||
```
|
||||
|
||||
[truthy]: ../tutorials/truthy-and-falsy.html
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: where_exp
|
||||
---
|
||||
|
||||
{% since %}v10.12.0{% endsince %}
|
||||
|
||||
从数组中选择所有表达式值为真的对象。下面的例子中，假设你要从产品列表中筛选出来厨房用品。利用 `where_exp` 可以创建一个只包含 `"type"` 为 `"kitchen"` 的列表。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
All products:
|
||||
{% for product in products %}
|
||||
- {{ product.title }}
|
||||
{% endfor %}
|
||||
|
||||
{% assign kitchen_products = products | where_exp: "item", "item.type == 'kitchen'" %}
|
||||
|
||||
Kitchen products:
|
||||
{% for product in kitchen_products %}
|
||||
- {{ product.title }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
All products:
|
||||
- Vacuum
|
||||
- Spatula
|
||||
- Television
|
||||
- Garlic press
|
||||
|
||||
Kitchen products:
|
||||
- Spatula
|
||||
- Garlic press
|
||||
```
|
||||
|
||||
[truthy]: ../tutorials/truthy-and-falsy.html
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: xml_escape
|
||||
---
|
||||
|
||||
{% since %}v10.13.0{% endsince %}
|
||||
|
||||
把文本做 XML 转义。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{{ "Have you read \'James & the Giant Peach\'?" | xml_escape }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Have you read 'James & the Giant Peach'?
|
||||
```
|
||||
@@ -1,29 +0,0 @@
|
||||
layout: index
|
||||
description: LiquidJS 是一个纯 JavaScript 实现的，简洁的、安全的模板引擎，兼容 Shopify / Github Pages。
|
||||
subtitle: 简单安全的 Liquid 模板引擎
|
||||
---
|
||||
ul#intro-feature-list
|
||||
li.intro-feature-wrap
|
||||
.intro-feature
|
||||
.intro-feature-icon
|
||||
i.icon-shield
|
||||
h3.intro-feature-title 安全渲染
|
||||
p.intro-feature-desc Liquid 模板有很强的可读性和容错性，适用于开放给设计师和客户。运算符和表达式都先解析到 AST 再去渲染，避免了 #[code eval] 和 #[code new Function]。
|
||||
li.intro-feature-wrap
|
||||
.intro-feature
|
||||
.intro-feature-icon
|
||||
i.icon-rocket
|
||||
h3.intro-feature-title 纯 JavaScript
|
||||
p.intro-feature-desc 纯 JavaScript 的没有 Native Binding 的 Liquid 实现，Node.js 和浏览器通用。同时提供了 CDN 可用的 CMD, ESM 和 CJS 打包。
|
||||
li.intro-feature-wrap
|
||||
.intro-feature
|
||||
.intro-feature-icon
|
||||
i.icon-shopify
|
||||
h3.intro-feature-title Shopify 兼容
|
||||
p.intro-feature-desc 支持 #[a(href="https://github.com/shopify/liquid") shopify/liquid] 的所有标签和过滤器，#[a(href="https://jekyllrb.com/") Jekyll 站点], #[a(href="https://pages.github.com/") Github Pages] 和 #[a(href="https://themes.shopify.com/") Shopify 模板] 都可以轻松迁移到 Node.js。
|
||||
li.intro-feature-wrap
|
||||
.intro-feature
|
||||
.intro-feature-icon
|
||||
i.icon-typescript
|
||||
h3.intro-feature-title TypeScript
|
||||
p.intro-feature-desc 整个项目在 TypeScript strict 模式下重写，让这个库拥有顺滑的使用体验，同时确保了一致的 API 和实时的、精确的文档。
|
||||
@@ -1,58 +0,0 @@
|
||||
{
|
||||
"short_name": "LiquidJS",
|
||||
"name": "LiquidJS",
|
||||
"description": "LiquidJS 是一个简单的、安全的、兼容 Shopify 的、纯 JavaScript 编写的模板引擎。",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon/apple-touch-icon-57x57.png",
|
||||
"type": "image/png",
|
||||
"sizes": "57x57"
|
||||
},
|
||||
{
|
||||
"src": "/icon/favicon-96x96.png",
|
||||
"type": "image/png",
|
||||
"sizes": "96x96"
|
||||
},
|
||||
{
|
||||
"src": "/icon/favicon-196x196.png",
|
||||
"type": "image/png",
|
||||
"sizes": "196x196"
|
||||
},
|
||||
{
|
||||
"src": "/icon/apple-touch-icon.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"shortcuts" : [
|
||||
{
|
||||
"name": "教程",
|
||||
"url": "/zh-cn/tutorials/intro-to-liquid.html",
|
||||
"description": "一系列描述如何使用 LiquidJS 的文章"
|
||||
},
|
||||
{
|
||||
"name": "标签",
|
||||
"url": "/zh-cn/tags/overview.html",
|
||||
"description": "每个 Liquid 标签的描述和示例"
|
||||
},
|
||||
{
|
||||
"name": "过滤器",
|
||||
"url": "/zh-cn/filters/overview.html",
|
||||
"description": "每个 Liquid 过滤器的描述和示例"
|
||||
},
|
||||
{
|
||||
"name": "演示",
|
||||
"url": "/zh-cn/playground.html",
|
||||
"description": "一个用来尝试和分享 Liquid 模板的在线编辑器"
|
||||
},
|
||||
{
|
||||
"name": "API",
|
||||
"url": "/api/classes/Liquid.html",
|
||||
"description": "LiquidJS 类和接口的 TypeScript 文档"
|
||||
}
|
||||
],
|
||||
"start_url": "/zh-cn",
|
||||
"display": "standalone",
|
||||
"theme_color": "#0f83ce",
|
||||
"background_color": "#0f83ce"
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
layout: playground
|
||||
title: 演示
|
||||
description: 一个用来尝试和分享 Liquid 模板的在线编辑器
|
||||
---
|
||||
@@ -1,33 +0,0 @@
|
||||
---
|
||||
title: Assign
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
创建一个新变量。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign my_variable = false %}
|
||||
{% if my_variable != true %}
|
||||
This statement is valid.
|
||||
{% endif %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
This statement is valid.
|
||||
```
|
||||
|
||||
用引号（`"`）包起来表示一个字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign foo = "bar" %}
|
||||
{{ foo }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
bar
|
||||
```
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: capture
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
把 `capture` 开闭标签之间的内容渲染后赋值给一个变量，这个变量的类型总是字符串。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% capture my_variable %}I am being captured.{% endcapture %}
|
||||
{{ my_variable }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
I am being captured.
|
||||
```
|
||||
|
||||
在 `capture` 里可以使用 `assign` 创建的其他变量来构建复杂字符串：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign favorite_food = "pizza" %}
|
||||
{% assign age = 35 %}
|
||||
|
||||
{% capture about_me %}
|
||||
I am {{ age }} and my favorite food is {{ favorite_food }}.
|
||||
{% endcapture %}
|
||||
|
||||
{{ about_me }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
I am 35 and my favourite food is pizza.
|
||||
```
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
title: case
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
创建一个 switch 语句，把变量跟不同的值比较。`case` 创建 switch 语句，`when` 比较它的值。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign handle = "cake" %}
|
||||
{% case handle %}
|
||||
{% when "cake" %}
|
||||
This is a cake
|
||||
{% when "cookie", "biscuit" %}
|
||||
This is a cookie
|
||||
{% else %}
|
||||
This is neither a cake nor a cookie
|
||||
{% endcase %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
This is a cake
|
||||
```
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
title: Comment
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
让 Liquid 模板里一段代码不渲染。处于 `comment` 开闭标签之间的文本都不会输出，Liquid 代码都不会执行。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
Anything you put between {% comment %} and {% endcomment %} tags
|
||||
is turned into a comment.
|
||||
```
|
||||
|
||||
输出
|
||||
```liquid
|
||||
Anything you put between tags
|
||||
is turned into a comment.
|
||||
```
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
title: cycle
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
循环一组字符串按照它们传入的顺序打印出来。每次调用 `cycle` 打印下一个参数。
|
||||
|
||||
## 基本使用
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% cycle "one", "two", "three" %}
|
||||
{% cycle "one", "two", "three" %}
|
||||
{% cycle "one", "two", "three" %}
|
||||
{% cycle "one", "two", "three" %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
one
|
||||
two
|
||||
three
|
||||
one
|
||||
```
|
||||
|
||||
`cycle` 可以用于：
|
||||
|
||||
- 对表格里每一行按奇偶应用不同样式
|
||||
- 对每行最后一项应用特殊样式
|
||||
|
||||
## 参数
|
||||
|
||||
一个模板中需要多个 `cycle` 时可以使用 "cycle 组" 参数。如果没有提供组名，使用同样参数调用的 `cycle` 会被认为处于同一组。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% cycle "first": "one", "two", "three" %}
|
||||
{% cycle "second": "one", "two", "three" %}
|
||||
{% cycle "second": "one", "two", "three" %}
|
||||
{% cycle "first": "one", "two", "three" %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
one
|
||||
one
|
||||
two
|
||||
two
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: Decrement
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
创建一个新的数字类型的变量，每次调用都把它的值减一。第一次是 `-1`。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% decrement variable %}
|
||||
{% decrement variable %}
|
||||
{% decrement variable %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
-1
|
||||
-2
|
||||
-3
|
||||
```
|
||||
|
||||
像 [increment][increment] 一样，在 `decrement` 里声明的变量独立于 [assign][assign] 或 [capture][capture] 创建的变量。
|
||||
|
||||
[increment]: ./increment.html
|
||||
[assign]: ./assign.html
|
||||
[capture]: ./capture.html
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
title: Echo
|
||||
---
|
||||
|
||||
{% since %}v9.31.0{% endsince %}
|
||||
|
||||
根据表达式输出渲染 HTML。和使用 `{{` expression `}}` 包裹模板效果一样，不同的是 echo 可以在 liquid 标签中使用，同时也支持过滤器。
|
||||
|
||||
## echo
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign username = 'Bob' %}
|
||||
{% echo username | append: ", welcome to LiquidJS!" | capitalize %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Bob, welcome to LiquidJS!
|
||||
```
|
||||
@@ -1,245 +0,0 @@
|
||||
---
|
||||
title: For
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
重复执行代码块的迭代标签。
|
||||
|
||||
## 基本使用
|
||||
|
||||
### for...in
|
||||
|
||||
重复执行一段代码。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% for product in collection.products %}
|
||||
{{ product.title }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
hat shirt pants
|
||||
```
|
||||
|
||||
### else
|
||||
|
||||
指定 `for` 循环的集合长度为零时执行的代码块。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% for product in collection.products %}
|
||||
{{ product.title }}
|
||||
{% else %}
|
||||
The collection is empty.
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
The collection is empty.
|
||||
```
|
||||
|
||||
### break
|
||||
|
||||
遇到 `break` 标签时 `for` 循环停止执行。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% for i in (1..5) %}
|
||||
{%- if i == 4 -%}
|
||||
{% break %}
|
||||
{%- else -%}
|
||||
{{ i }}
|
||||
{%- endif -%}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
123
|
||||
```
|
||||
|
||||
### continue
|
||||
|
||||
遇到 `continue` 标签时跳过当前这次迭代。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% for i in (1..5) %}
|
||||
{%- if i == 4 -%}
|
||||
{%- continue -%}
|
||||
{%- else -%}
|
||||
{{ i }}
|
||||
{%- endif -%}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
1235
|
||||
```
|
||||
|
||||
### forloop
|
||||
|
||||
在 `for` 循环里有一个 `forloop` 变量可用，用来表示迭代的当前状态。
|
||||
|
||||
`forloop.first`, `forloop.last` 和 `forloop.length` 属性：
|
||||
|
||||
输入
|
||||
```
|
||||
{% for i in (1..5) %}
|
||||
{%- if forloop.first == true -%} First
|
||||
{%- elsif forloop.last == true -%} Last
|
||||
{%- else -%} {{ forloop.length }}
|
||||
{%- endif %}
|
||||
{% endfor -%}
|
||||
```
|
||||
|
||||
输出
|
||||
```
|
||||
First
|
||||
5
|
||||
5
|
||||
5
|
||||
Last
|
||||
```
|
||||
|
||||
`forloop.index`, `forloop.index0`, `forloop.rindex` 和 `forloop.rindex0` 属性：
|
||||
|
||||
输入
|
||||
```
|
||||
index index0 rindex rindex0
|
||||
{% for i in (1..5) %}
|
||||
{{- forloop.index }} {{ forloop.index0 }} {{ forloop.rindex }} {{ forloop.rindex0 }}
|
||||
{% endfor -%}
|
||||
```
|
||||
|
||||
输出
|
||||
```
|
||||
index index0 rindex rindex0
|
||||
1 0 5 4
|
||||
2 1 4 3
|
||||
3 2 3 2
|
||||
4 3 2 1
|
||||
5 4 1 0
|
||||
```
|
||||
|
||||
## 参数
|
||||
|
||||
### limit
|
||||
|
||||
限制循环执行的次数。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
<!-- if array = [1,2,3,4,5,6] -->
|
||||
{% for item in array limit:2 %}
|
||||
{{- item -}}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
12
|
||||
```
|
||||
|
||||
### offset
|
||||
|
||||
从指定的下标处开始循环。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
<!-- for array = [1,2,3,4,5,6] -->
|
||||
{% for item in array offset:2 %}
|
||||
{{- item -}}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
3456
|
||||
```
|
||||
|
||||
#### offset:continue
|
||||
|
||||
{% since %}v9.33.0{% endsince %}
|
||||
|
||||
`offset` 的值可以是 `continue`，用来继续上一次循环。例如：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
<!-- for array = [1,2,3,4,5,6] -->
|
||||
{% for item in array limit:2 %}
|
||||
{{- item -}}
|
||||
{% endfor%}
|
||||
{% for item in array offset:continue %}
|
||||
{{- item -}}
|
||||
{% endfor%}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
12
|
||||
3456
|
||||
```
|
||||
|
||||
对同样的变量名和集合名（这个例子中是 `"item-array"`），存在唯一的位置记录。也就是说用新的变量名就可以开启一个新的循环：
|
||||
|
||||
输入
|
||||
```liquid
|
||||
<!-- for array = [1,2,3,4,5,6] -->
|
||||
{% for item in array limit:2 %}
|
||||
{{- item -}}
|
||||
{% endfor%}
|
||||
{% for item2 in array offset:continue %}
|
||||
{{- item2 -}}
|
||||
{% endfor%}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
12
|
||||
123456
|
||||
```
|
||||
|
||||
### range
|
||||
|
||||
定义一个用于循环的数字范围。可以用字面量定义范围，也可以用变量定义范围。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% for i in (3..5) %}
|
||||
{{ i }}
|
||||
{% endfor %}
|
||||
|
||||
{% assign num = 4 %}
|
||||
{% for i in (1..num) %}
|
||||
{{ i }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
3 4 5
|
||||
1 2 3 4
|
||||
```
|
||||
|
||||
### reversed
|
||||
|
||||
反转循环的顺序。注意这个参数的拼写和过滤器 `reverse` 不同。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
<!-- if array = [1,2,3,4,5,6] -->
|
||||
{% for item in array reversed %}
|
||||
{{ item }}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
6 5 4 3 2 1
|
||||
```
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
title: If
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
条件为 `true` 时执行某个代码块。
|
||||
|
||||
## if
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% if product.title == "Awesome Shoes" %}
|
||||
These shoes are awesome!
|
||||
{% endif %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
These shoes are awesome!
|
||||
```
|
||||
|
||||
## elsif / else
|
||||
|
||||
在 `if` 或 [unless][unless] 块中添加更多的条件。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
<!-- If customer.name = "anonymous" -->
|
||||
{% if customer.name == "kevin" %}
|
||||
Hey Kevin!
|
||||
{% elsif customer.name == "anonymous" %}
|
||||
Hey Anonymous!
|
||||
{% else %}
|
||||
Hi Stranger!
|
||||
{% endif %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Hey Anonymous!
|
||||
```
|
||||
|
||||
[unless]: ./unless.html
|
||||
@@ -1,110 +0,0 @@
|
||||
---
|
||||
title: Include
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
{% note warn 已废弃 %}
|
||||
这个标签已经废弃，请使用封装更好的 <a href="./render.html">render</a> 标签。
|
||||
{% endnote %}
|
||||
|
||||
## 引入一个模板
|
||||
|
||||
从模板 [根路径][root] 引入一个模板：
|
||||
|
||||
```liquid
|
||||
{% include 'footer.liquid' %}
|
||||
```
|
||||
|
||||
设置 [extname][extname] 选项为 `".liquid"` 后上面的 `.liquid` 后缀就可以省略了，等价于：
|
||||
|
||||
```liquid
|
||||
{% include 'footer' %}
|
||||
```
|
||||
|
||||
通过 `include` 渲染一个子模板时，它内部的代码可以访问父模板的变量，但父模板中不能访问它里面定义的变量。
|
||||
|
||||
## 变量传递
|
||||
|
||||
父模板里定义的变量可以通过 `include` 标签的参数列表传递给子模板：
|
||||
|
||||
```liquid
|
||||
{% assign my_variable = 'apples' %}
|
||||
{% include 'name', my_variable: my_variable, my_other_variable: 'oranges' %}
|
||||
```
|
||||
|
||||
## `with` 参数
|
||||
|
||||
使用 `with...as` 语法可以给子模板传递一个变量：
|
||||
|
||||
```liquid
|
||||
{% assign featured_product = all_products['product_handle'] %}
|
||||
{% include 'product' with featured_product as product %}
|
||||
```
|
||||
|
||||
上面的例子中，子模板中 `product` 会保有父模板中的 `featured_product` 变量的值。
|
||||
|
||||
## 输出和过滤器
|
||||
|
||||
文件名为字符串字面量时，支持 Liquid 输出和过滤器。在拼接文件名时很方便：
|
||||
|
||||
```liquid
|
||||
{% include "prefix/{{name | append: \".html\"}}" %}
|
||||
```
|
||||
|
||||
{% note info 转义 %}
|
||||
字符串字面量里的 `"` 需要转义为 `\"`，使用静态文件名可以避免这个问题，见下面的 Jekyll-like 文件名。
|
||||
{% endnote %}
|
||||
|
||||
## Jekyll-like 文件名
|
||||
|
||||
设置 [dynamicPartials][dynamicPartials] 为 `false` 来启用 Jekyll-like 文件名，这时文件名不需要用引号包含，会被当作字面量处理。 这样的字符串里面仍然支持 Liquid 输出和过滤器，例如：
|
||||
|
||||
```liquid
|
||||
{% include prefix/{{ page.my_variable }}/suffix %}
|
||||
```
|
||||
|
||||
这样文件名里的 `"` 就不用转义了。
|
||||
|
||||
```liquid
|
||||
{% include prefix/{{name | append: ".html"}} %}
|
||||
```
|
||||
|
||||
## Jekyll include
|
||||
|
||||
{% since %}v9.33.0{% endsince %}
|
||||
|
||||
[jekyllInclude][jekyllInclude] 用来启用 Jekyll-like include 语法。默认为 `false`，当设置为 `true` 时：
|
||||
|
||||
- 默认启用静态文件名：`dynamicPartials` 的默认值变为 `false`（而非 `true`）。但你也可以把它设置回 `true`。
|
||||
- 参数的键和值之间由 `=` 分隔（本来是 `:`）。
|
||||
- 参数放到了 `include` 变量下，而非当前作用域。
|
||||
|
||||
例如下面的模板：
|
||||
|
||||
```liquid
|
||||
{% include article.html header="HEADER" content="CONTENT" %}
|
||||
```
|
||||
|
||||
其中 `article.html` 的内容是：
|
||||
|
||||
```liquid
|
||||
<article>
|
||||
<header>{{include.header}}</header>
|
||||
{{include.content}}
|
||||
</article>
|
||||
```
|
||||
|
||||
注意我们通过 `include.header` 引用第一个参数，而不是 `header`。输出如下：
|
||||
|
||||
```html
|
||||
<article>
|
||||
<header>HEADER</header>
|
||||
CONTENT
|
||||
</article>
|
||||
```
|
||||
|
||||
[extname]: /api/interfaces/LiquidOptions.html#extname
|
||||
[root]: /api/interfaces/LiquidOptions.html#root
|
||||
[dynamicPartials]: /api/interfaces/LiquidOptions.html#dynamicPartials
|
||||
[jekyllInclude]: /api/interfaces/LiquidOptions.html#jekyllInclude
|
||||
@@ -1,45 +0,0 @@
|
||||
---
|
||||
title: Increment
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
创建一个新的数字类型的变量，每次调用都把它的值加一。第一次为 `0`。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% increment my_counter %}
|
||||
{% increment my_counter %}
|
||||
{% increment my_counter %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
0
|
||||
1
|
||||
2
|
||||
```
|
||||
|
||||
在 `increment` 里声明的变量独立于 [assign][assign] 或 [capture][capture] 创建的变量。
|
||||
|
||||
下面的例子中通过 `assign` 创建了变量 `var`。然后用 `increment` 标签在同名变量上多次递增。注意 `increment` 标签不会影响 `assign` 创建的 `var` 的值。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% assign var = 10 %}
|
||||
{% increment var %}
|
||||
{% increment var %}
|
||||
{% increment var %}
|
||||
{{ var }}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
0
|
||||
1
|
||||
2
|
||||
10
|
||||
```
|
||||
|
||||
[assign]: ./assign.html
|
||||
[capture]: ./capture.html
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
title: "#（单行注释）"
|
||||
---
|
||||
|
||||
{% since %}v9.38.0{% endsince %}
|
||||
|
||||
在 Liquid 模板中添加注释，注释标签内的文字不会被输出。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
注释标签内的东西都不会输出。
|
||||
{% # this is an inline comment %}
|
||||
但每行都必须以 '#' 开头。
|
||||
{%
|
||||
# this is a comment
|
||||
# that spans multiple lines
|
||||
%}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
注释标签内的东西都不会输出。
|
||||
但每行都必须以 '#' 开头。
|
||||
```
|
||||
|
||||
在 <a href="./liquid.html">`liquid`</a> 标签里也可以使用注释标签。
|
||||
|
||||
```liquid
|
||||
{% liquid
|
||||
# required args
|
||||
assign product = collection.products.first
|
||||
|
||||
# optional args
|
||||
assign should_show_border = should_show_border | default: true
|
||||
assign should_highlight = should_highlight | default: false
|
||||
%}
|
||||
```
|
||||
|
||||
但注释标签不能用于把其他标签注释掉。这时应该使用 <a href="./comment.html">`comment`</a> 标签来临时禁用其他标签。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{%- # {% echo 'Welcome to LiquidJS!' %} -%}
|
||||
{% comment %}{% echo 'Welcome to LiquidJS!' %}{% endcomment %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
-%}
|
||||
```
|
||||
@@ -1,66 +0,0 @@
|
||||
---
|
||||
title: Layout
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
## 使用布局模板
|
||||
|
||||
套用模板 [根路径][root] 下的某个布局模板中。
|
||||
|
||||
```liquid
|
||||
{% layout 'footer.liquid' %}
|
||||
```
|
||||
|
||||
设置 [extname][extname] 选项为 `".liquid"` 后上面的 `.liquid` 后缀就可以省略了，等价于：
|
||||
|
||||
```liquid
|
||||
{% layout 'footer' %}
|
||||
```
|
||||
|
||||
通过 `layout` 渲染一个子模板时，它内部的代码可以访问父模板的变量，但父模板中不能访问它里面定义的变量。
|
||||
|
||||
## 变量传递
|
||||
|
||||
当前模板里定义的变量可以通过 `layout` 标签的参数列表传递给布局模板：
|
||||
|
||||
```liquid
|
||||
{% assign my_variable = 'apples' %}
|
||||
{% layout 'name', my_variable: my_variable, my_other_variable: 'oranges' %}
|
||||
```
|
||||
|
||||
## 块
|
||||
|
||||
布局模板中可以包含若干 `block` 标签，这些 `block` 渲染时会按照子模板提供的内容进行填充。例如我们有布局模板 `default-layout.liquid`：
|
||||
|
||||
```
|
||||
Header
|
||||
{% block content %}My default content{% endblock %}
|
||||
Footer
|
||||
```
|
||||
|
||||
它被子模板 `page.liquid` 通过 `layout` 标签引用：
|
||||
|
||||
```
|
||||
{% layout "default-layout" %}
|
||||
{% block content %}My page content{% endblock %}
|
||||
```
|
||||
|
||||
`page.liquid` 的渲染结果将会是：
|
||||
|
||||
```
|
||||
Header
|
||||
My page content
|
||||
Footer
|
||||
```
|
||||
|
||||
{% note tip 块 %}
|
||||
<ul>
|
||||
<li>一个布局模板中可以定义多个块；</li>
|
||||
<li>如果只有一个块，它的名字可以省略。</li>
|
||||
<li>如果子模板未定义块的内容，将会使用父模板中提供的默认内容。</li>
|
||||
</ul>
|
||||
{% endnote %}
|
||||
|
||||
[extname]: /api/interfaces/LiquidOptions.html#extname
|
||||
[root]: /api/interfaces/LiquidOptions.html#root
|
||||
@@ -1,28 +0,0 @@
|
||||
---
|
||||
title: Liquid
|
||||
---
|
||||
|
||||
{% since %}v9.31.0{% endsince %}
|
||||
|
||||
通过 liquid 标签可以在一个分隔符中使用多个标签, 使 Liquid 逻辑书写更简洁。
|
||||
|
||||
## liquid
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% liquid
|
||||
assign names = 'Bob, Sally' | split: ', '
|
||||
|
||||
for name in names
|
||||
echo 'Hello, ' | append: name
|
||||
unless forloop.last
|
||||
echo ', '
|
||||
endunless
|
||||
endfor
|
||||
%}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
Hello, Bob, Hello Sally
|
||||
```
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
title: 标签
|
||||
description: 每个 Liquid 标签的描述和示例
|
||||
---
|
||||
|
||||
LiquidJS 支持 Liquid 语法中具体业务无关的标签，包含 [shopify/liquid 核心][shopify/liquid] 里的所有标签。这部分包含了所有 LiquidJS 支持的标签的文档和使用示例。
|
||||
|
||||
LiquidJS 支持十几个过滤器，可以分为如下几类：
|
||||
|
||||
类别 | 用途 | 标签
|
||||
--- | --- | ---
|
||||
迭代 | 遍历一个集合 | for, cycle, tablerow
|
||||
控制流 | 控制模板渲染的执行分支 | if, unless, elif, else, case, when
|
||||
变量 | 定义和修改变量 | assign, increment, decrement, capture, echo
|
||||
文件 | 引入或继承其他模板 | render, include, layout
|
||||
语言 | 暂时禁用 Liquid 语法 | # (单行注释）, raw, comment, liquid
|
||||
|
||||
[shopify/liquid]: https://github.com/Shopify/liquid
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
title: Raw
|
||||
---
|
||||
|
||||
{% since %}v1.9.1{% endsince %}
|
||||
|
||||
`raw` 标签可以暂时禁用 LiquidJS 的语法。生成和 Liquid 冲突的语言（比如 Nunjucks、Handlebars）时很有用。
|
||||
|
||||
输入
|
||||
```liquid
|
||||
{% raw %}
|
||||
In Handlebars, {{ this }} will be HTML-escaped, but
|
||||
{{{ that }}} will not.
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
输出
|
||||
```text
|
||||
In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.
|
||||
```
|
||||
@@ -1,65 +0,0 @@
|
||||
---
|
||||
title: Render
|
||||
---
|
||||
|
||||
{% since %}v9.2.0{% endsince %}
|
||||
|
||||
## 基本使用
|
||||
|
||||
### 渲染一个模板
|
||||
|
||||
从模板 [根路径][root] 引入一个模板：
|
||||
|
||||
```liquid
|
||||
{% render 'footer.liquid' %}
|
||||
```
|
||||
|
||||
设置 [extname][extname] 选项为 `".liquid"` 后上面的 `.liquid` 后缀就可以省略了，等价于：
|
||||
|
||||
```liquid
|
||||
{% render 'footer' %}
|
||||
```
|
||||
|
||||
{% note info 变量作用域 %}
|
||||
通过 `render` 渲染一个子模板时，它内部的代码不能访问父模板的变量，父模板中也不能访问它里面定义的变量。这个封装会让模板代码更容易理解和维护。{% endnote %}
|
||||
|
||||
### 变量传递
|
||||
|
||||
父模板里定义的变量可以通过 `render` 标签的参数列表传递给子模板：
|
||||
|
||||
```liquid
|
||||
{% assign my_variable = 'apples' %}
|
||||
{% render 'name', my_variable: my_variable, my_other_variable: 'oranges' %}
|
||||
```
|
||||
|
||||
[全局变量][globals] 不需要传递，所有文件都可以访问它们。
|
||||
|
||||
## 参数
|
||||
|
||||
### `with` 参数
|
||||
|
||||
使用 `with...as` 语法可以给子模板传递一个变量：
|
||||
|
||||
```liquid
|
||||
{% assign featured_product = all_products['product_handle'] %}
|
||||
{% render 'product' with featured_product as product %}
|
||||
```
|
||||
|
||||
上面的例子中，子模板中 `product` 会保有父模板中的 `featured_product` 变量的值。
|
||||
|
||||
### `for` 参数
|
||||
|
||||
用 `for...as` 语法可以对可枚举对象的每一个值渲染一次子模板：
|
||||
|
||||
```liquid
|
||||
{% assign variants = product.variants %}
|
||||
{% render 'variant' for variants as variant %}
|
||||
```
|
||||
|
||||
上面的例子中，对 `product` 的每个 `variants` 是指都会渲染一次子模板。子模板中 `variant` 变量会保有父模板中的 `product.variants` 中对应元素的值。
|
||||
|
||||
{% note tip forloop 对象 %} 使用 for 参数时，在子模板中可以访问 <a href="./for.html#forloop">forloop</a> 对象。{% endnote %}
|
||||
|
||||
[extname]: /api/interfaces/LiquidOptions.html#extname
|
||||
[root]: /api/interfaces/LiquidOptions.html#root
|
||||
[globals]: /api/interfaces/LiquidOptions.html#globals
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user