Liquid

一門為靈活的 web 應(yīng)用而設(shè)計(jì)的面向客戶的模板語言。

原文鏈接

簡介

什么是 Liquid ？

Liquid 是一門用 Ruby 編寫的開源模板語言，由 Shopify 所開發(fā)。它是 Shopify 主題 的骨架，被用來讀取店面的動(dòng)態(tài)內(nèi)容。

從 2006 年 6 月份開始，Liquid 被用作生產(chǎn)工具，到現(xiàn)在已經(jīng)有很多其他的托管的 web 應(yīng)用在使用 Liquid。

誰在使用 ？

• jekyll
• SalesforceDesk
• zendesk
• 查看更多

概覽

Liquid 代碼由 對(duì)象，標(biāo)簽 和 過濾器 組成。

對(duì)象

對(duì)象 告訴 Liquid 將在頁面的什么位置顯示內(nèi)容。對(duì)象和變量名包含在雙重花括號(hào)中： {{ 和 }}。

輸入：

    {{ page.title }}

輸出：

    Introduction

在這個(gè)例子中，Liquid 渲染了名為 page.title 的對(duì)象，其包含了文字 Introduction。

標(biāo)簽

標(biāo)簽 為模板提供邏輯和流程控制。用花括號(hào)和百分號(hào)來標(biāo)記 {% 和 %}。

在標(biāo)簽中的標(biāo)記不會(huì)產(chǎn)生任何的可見文字。也就是說你可以為變量賦值，創(chuàng)建條件語句或者循環(huán)條件，但是這些 Liquid 邏輯在生成的頁面中是不可見的。

輸入：

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

輸出：

    Hello Adam!

標(biāo)簽可以分為 3 類：

• 流程控制
• 迭代器
• 變量賦值

它們的細(xì)節(jié)詳見對(duì)應(yīng)章節(jié)

過濾器

過濾器 可以改變 Lquid 對(duì)象的輸出。被用在輸出中并用 | 分隔。類似于 Linux 的管道。

輸入：

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

運(yùn)算符

Liquid 引入了許多的邏輯和比肩運(yùn)算符。

基本運(yùn)算符

實(shí)例：

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

你也可以在一個(gè)標(biāo)簽內(nèi)使用多個(gè)運(yùn)算符：

實(shí)例：

    {% if product.type == "Shirt" or product.type == "Shoes" %}
        This is a shirt or a pair of shoes.
    {% endif %}

contains

contains 運(yùn)算檢查一個(gè)字符串是否含有特定的子串。

實(shí)例：

    {% if product.title contains 'Pack' %}
        This product's title contains the word Pack.
    {% endif %}

contains 也可以檢查一個(gè)字符串?dāng)?shù)組中是否包含某個(gè)字符串。

實(shí)例：

    {% if product.tags contains 'Hello' %}
        This product has been tagged with 'Hello'.
    {% endif %}

contains 只能作用于字符串。不可以用于檢查其他對(duì)象。

Truthy 和 Falsy

在編程中，任何返回 true 的條件表達(dá)式被稱作 truthy，任何返回 false 的條件表達(dá)式被稱為 falsy。任何類型的對(duì)象都可以被表達(dá)成 truethy 或者 falsy。

Truthy

除了 nil 和 false 之外，Liquid 中的任何值都是 Trusy。

在下面的例子中，字符串 "Tobi" 不是布爾類型，但是在條件表達(dá)式中它為 truthy：

實(shí)例：

    {% assign tobi = "Tobi" %}

    {% if tobi %}
        this condition will always be true.
    {% endif %}

即使在 字符串 為空的時(shí)候，也是 truthy。在下面的例子中，如果 setting.fp_heading 為空的話，將會(huì)生成空的 HTML 標(biāo)簽：

實(shí)例：

    {% if setting.fp_heading %}
        <h1>{{ setting.fp_heading }}</h1>
    {% endif %}

輸出：

    <h1></h1>

Falsy

在 Liquid 中只有 nil 和 false 是 falsy。

總結(jié)

下表總結(jié)了 Liquid 中的 truthy 和 falsy。

數(shù)據(jù)類型

Liquid 有以下 5 種數(shù)據(jù)類型：

• 字符串
• 數(shù)字
• 布爾值
• Nil
• 數(shù)組

你可以使用 assign 或者 capture 標(biāo)簽對(duì) Liquid 的變量進(jìn)行賦值。

字符串

將變量值包裹在單引號(hào)或者雙引號(hào)中來聲明一個(gè)字符串：

實(shí)例：

    {% assign my_string = "Hello World!" %}

數(shù)字

數(shù)字包含了浮點(diǎn)數(shù)和整數(shù)：

實(shí)例：

    {% assign my_int = 25 %}
    {% assign my_float = 39.756 %}

布爾值

布爾值不是 true 就是 false。在聲明的時(shí)候不需要添加引號(hào)：

實(shí)例：

    {% assign foo = true %}
    {% assign bar = false %}

Nil

Nil 是一個(gè)特殊的空值，在 Liquid 代碼沒有結(jié)果產(chǎn)生時(shí)會(huì)返回 Nil。注意這并 不是 一個(gè)值為 Nil 的字符串。

在 if 語句或者其他的可判斷真假的 Liquid 標(biāo)簽中，Nil 被當(dāng)做 false。

在以下實(shí)例中，如果用戶不存在 (即 user 返回 nil)，Liquid 將不會(huì)打印出問候語：

實(shí)例：

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

返回 Nil 的標(biāo)簽或者輸出在頁面中不會(huì)打印任何東西。

輸入：

    The current user is {{ user.name }}

輸出：

    The current user is

數(shù)組

數(shù)組可以承載一組任意類型的變量。

遍歷數(shù)組

要訪問數(shù)組中的每一個(gè)元素，你可以使用 迭代標(biāo)簽 來遍歷。

輸入：


    <!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
    {% for user in site.users %}
        {{ user }}
    {% endfor %}

輸出：

    Tobi Laura Tetsuro Adam

訪問數(shù)組中特定的元素

你可以使用方括號(hào) ([ ]) 來訪問數(shù)組中特定的元素。數(shù)組的索引從 0 開始。

輸入：

    <!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
    {{ site.users[0] }}
    {{ site.users[1] }}
    {{ site.users[3] }}

輸出：

    Tobi
    Laura
    Adam

初始化數(shù)組

Liquid 本身無法實(shí)現(xiàn)數(shù)組的初始化。

然而，你可以使用 split 過濾器將一個(gè)字符串分割成由子串組成的數(shù)組。

空行輸出控制

在 Liquid 中，你可以在你的標(biāo)簽中使用連字符 {{-，-}}，{%- 和 -%} 來限制 Liquid 語句輸出空行。

正常情況下，即使是不輸出文字的 Liquid 語句，在你的 Liquid 模板生成的 HTML 中的仍會(huì)輸出一個(gè)空行：

輸入：

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

注意，在輸出的 "tomato" 的上方有一個(gè)空行：

輸出：


    tomato

在 assign 標(biāo)簽內(nèi)插入連字符，可以不輸出空行：

輸入：

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

輸出：

    tomato

如果你希望所有的 Liquid 標(biāo)簽都不輸出空行，可以在每一個(gè)標(biāo)簽兩邊插入連字符({%- 和 -%})：

輸入：

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

輸出：



    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 -%}

輸出：

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

文章來自我的 個(gè)人博客，轉(zhuǎn)載請(qǐng)注明出處。