Liquid 学习笔记

Liquid 是 Shopify 在 2006 年发布的一个生成前端代码的简单编程语言。经过多年的演化，Liquid 有 3 个流行的版本，分别是：

Shopify 的 Theme 文件通常以 .liquid 作为后缀；Jekyll 则直接在 .html 或 .md 中使用 Liquid 语言生成动态内容。本篇笔记主要参考标准 Liquid 语言。

快速入门

一个 Liquid 文件通过 Objects, Tags 和 Filters 这几部分来生成动态内容。

Object 和 Variables 通过两个大括号展示其内容，例如：

{{ page.title }}

Tags 用于赋值、控制流程等，如：

{% assign site = "Google" %}

Filters 用于改变输出的 Liquid 对象或变量，如：

{{ " abc " | strip }}

数据类型

Liquid 支持 6 种数据类型：

String
Number
Boolean
Nil
Array
EmptyDrop

基础概念：

对 String 而言，有两种方式赋值，简单字符串用 assign, 复杂字符串用 capture
不能直接生成数组，只能通过 Split 字符串或外部传入 Liquid 数组或对象

Array

不能直接生成数组，但可以通过 split 一个字符串生成数据，并用 for 循环访问：

{% assign types = 'PayPal, Visa, MasterCard' | split: ', ' %}
{% for type in types %}
    {{ type }}
{% endfor %}

可以通过 [] 形式访问数组元素：

{% assign types = 'PayPal, Visa, MasterCard' | split: ', ' %}
{{ types[0] }}
{{ types[1] }}
{{ types[2] }}

通过 first, last 获得数组首尾元素：

{% assign types = 'PayPal, Visa, MasterCard' | split: ', ' %}
{{ types.first }}
{{ types.last}}

通过 join 将数组转为字符串 — 类似 PHP implode(' and ', $arr)：

{% assign types = 'PayPal, Visa, MasterCard' | split: ', ' %}
{{ types | join: ' and ' }}

String

append 在字符串末尾添加字符串：

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

append 一个变量：

{% assign postfix = ".html" %}
{{ "/my/fancy/url" | append: postfix }}

prepend 在字符串开始的地方添加字符串：

{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}

strip 删除字符串首尾空格（Tabs, Spaces, Newlines）。

Objects

无法直接在 Liquid 初始化对象，但可以外部传入，例如 Jekyll Variables 就预置了一些全局对象：

site
page
layout
theme
content
paginator

你可以直接使用这些预先定义好的全局对象，如：

{{ site.posts }}
{{ page.title}}
{{ page.url }}

你可以通过 capture 定义包含数据结构的字符串（类似 JSON 格式），再通过 split 拆分以及 for 循环遍历的形式访问这个数据，例如：

{%- capture sitesmap -%}
Google      : https://google.com,
Facebook    : https://facebook.com,
Twitter     : https://twitter.com
{%- endcapture -%}

{% assign sites = sitesmap | split : ","  %}
{% for site in sites %}
    {% assign es = site | split : " : " %}
    {{ es[0] | strip }} {{ es[1] }}
{% endfor %}

你可以把 for 生成的字符串存储在 capture 定义的对象中达到复用的效果，如：

{%- capture sitesmap -%}
Google      : https://google.com,
Facebook    : https://facebook.com,
Twitter     : https://twitter.com
{%- endcapture -%}

{% assign sites = sitesmap | split : ","  %}
{%- capture sitesmaplist -%}
{% for site in sites %}
    {% assign es = site | split : " : " %}
    {{ es[0] | strip }} {{ es[1] }}
{% endfor %}
{% endcapture %}

{{ sitesmaplist }}

Datetime

格式化时间戳：

{{ 1667952994 | date: "%Y-%m-%d" }}