Liquid 常用語法記錄

一、什麼是 Liquid

Liquid 是一款專爲特定需求而打造的模板引擎。

Liquid 中有兩種類型的標記：Output 和 Tag。

• Output 通常用來顯示文本

  {{ 兩個花括號 }}

• Tag 通常用於執行邏輯命令

  {% 花括號加百分號 %}

shopify filter：https://shopify.dev/docs/api/liquid/filters

Liquid for Designers：https://github.com/Shopify/liquid/wiki/Liquid-for-Designers

二、Output

簡單示例

Hello {{name}}
Hello {{user.name}}
Hello {{ 'tobi' }}

如果想要改變輸出的結果，我們可以使用過濾器，例如將輸出的字符串轉爲大寫

Hello {{ 'tobi' | upcase }}

還可以添加多個過濾器，例如

Hello {{ '*tobi*' | textilize | upcase }}

下面說一下常用的一些過濾器

1、計算（加、減、乘、除、取餘、取整等）

• plus——加

  {{ 1 | plus:1 }} #=> 2

• minus——減

  {{ 4 | minus:2 }} #=> 2

• times——乘

  {{ 5 | times:4 }} #=> 20

• divided_by——除

  {{ 10 | divided_by:3 }} #=> 3

• modulo——取餘

  {{ 3 | modulo:2 }} #=> 1

• floor——向下取整

  {{ 4.6 | floor }} #=> 4

• ceil——向上取整

  {{ 4.6 | ceil }} #=> 5

• round——四捨五入

  {{ 4.5612 | round: 2 }} #=> 4.56

   

2、字符串處理

• append——後拼接

  {{ 'foo' | append:'bar' }} #=> 'foobar'

• prepend——前拼接

  {{ 'bar' | prepend:'foo' }} #=> 'foobar'

• slice——字符串分割

  {{ "hello" | slice: -3, 3 }} #=> llo

• split——-在匹配模式上分割字符串

  {{ "a~b" | split:"~" }} #=> ['a','b']

• remove——刪除每個出現的情況

  {{ 'foobarfoobar' | remove:'foo' }} #=> 'barbar'

• replace——替換每個出現的地方

  {{ 'foofoo' | replace:'foo','bar' }} #=> 'barbar'

• truncate——將字符串截斷爲 x 個字符。它還接受第二個參數，該參數將附加到字符串

  {{ 'foobarfoobar' | truncate: 5, '.' }} #=> 'foob.'

• downcase—— 將輸入字符串轉換爲小寫
• upcase- 將輸入字符串轉換爲大寫
• strip_newlines- 從字符串中刪除所有換行符 (\n)
• strip- 去除字符串兩端的所有空格
• lstrip- 去除字符串開頭的所有空格
• rstrip- 去除字符串末尾的所有空格

3、數組處理

• first- 獲取傳入數組的第一個元素
• last- 獲取傳入數組的最後一個元素
• sort- 對數組的元素進行排序
• join- 將數組的元素與它們之間的特定字符連接起來
• reverse- 反轉傳入的數組
• uniq- 從數組中刪除重複元素，可以選擇使用給定屬性來測試唯一性
• map- 映射/收集給定屬性的數組

4、其他

• data——日期格式化
• default——設置默認值

  {{ undefined_variable | default: "Default value" }} #=> "Default value"

• size- 返回數組或字符串的大小
• capitalize- 將輸入句子中的單詞大寫
• escape_once- 返回 html 的轉義版本，而不影響現有的轉義實體
• escape- html 轉義字符串
• newline_to_br- 用 html 中斷替換每個換行符 (\n)
• remove_first- 刪除第一次出現的情況，例如 {{ 'barbar' | remove_first:'bar' }} #=> 'bar'
• replace_first- 替換第一個出現的地方，例如 {{ 'barbar' | replace_first:'bar','foo' }} #=> 'foobar'
• strip_html- 從字符串中剝離 html
• truncatewords- 將字符串截斷爲 x 個單詞
• url_encode- url 編碼字符串

三、Tag

• assign - Assigns some value to a variable
• capture - Block tag that captures text into a variable
• case - Block tag, its the standard case...when block
• comment - Block tag, comments out the text in the block
• cycle - Cycle is usually used within a loop to alternate between values, like colors or DOM classes.
• for - For loop
• break - Exits a for loop
• continue Skips the remaining code in the current for loop and continues with the next loop
• if - Standard if/else block
• include - Includes another template; useful for partials
• raw - temporarily disable tag processing to avoid syntax conflicts.
• unless - Mirror of if statement

1、變量賦值

• assign - 將值賦給變量

  {% assign name = 'freestyle' %}

• capture - 用於捕獲一段Liquid代碼塊的輸出，並將其保存到一個變量中

  {% capture variable_name %}
    <!-- 這裏是要捕獲的內容，可以包含任意Liquid代碼 -->
    {{ some_variable | filter }}
    {% if condition %}
      Some content
    {% endif %}
  {% endcapture %}

  在上面的例子中，capture標籤將some_variable | filter和{% if condition %} Some content {% endif %}的輸出捕獲到名爲variable_name的變量中。

2、if/else

liquid 用以下標籤來實現 if 判斷：

• {% if <CONDITION> %} ... {% endif %}— 包含模板的一部分，僅當條件爲真時纔會運行。

  {% if user.name == 'tobi' or user.name == 'bob' %}
    Hello tobi or bob
  {% endif %}

  {% if user.name == 'bob' and user.age > 45 %}
    Hello old bob
  {% endif %}

• {% elsif <CONDITION> %}— 可以選擇在塊內使用if ... endif。指定另一個條件；如果最初的“if”失敗，Liquid 會嘗試“elsif”，如果成功則運行模板的以下部分。您可以在一個塊中使用任意數量的 elsif if。

  {% if user.name == 'tobi' %}
    Hello tobi
  {% elsif user.name == 'bob' %}
    Hello bob
  {% endif %}

• {% else %}— 可以選擇在if ... endif塊內的任何“elsif”標籤之後使用。如果上述所有條件均失敗，Liquid 將運行“else”標籤後面的模板部分。

  {% if user.age > 18 %}
     Login here
  {% else %}
     Sorry, you are too young
  {% endif %}

• {% unless <CONDITION> %} ... {% endunless %}——“if”語句的反面。不要將“elsif”或“else”與 except 語句一起使用。

  {% unless user.name == 'tobi' %}
    Hello non-tobi
  {% endunless %}

3、for 循環

{% for item in array %}
  {{ item }}
{% endfor %}

{% for item in hash %}
  {{ item[0] }}: {{ item[1] }}
{% endfor %}

# if item.quantity is 4...
{% for i in (1..item.quantity) %}
  {{ i }}
{% endfor %}
# results in 1,2,3,4

• 輔助變量

在每個for循環期間，以下輔助變量可滿足額外的樣式需求：

forloop.length      # => length of the entire for loop
forloop.index       # => index of the current iteration
forloop.index0      # => index of the current iteration (zero based)
forloop.rindex      # => how many items are still left?
forloop.rindex0     # => how many items are still left? (zero based)
forloop.first       # => is this the first iteration?
forloop.last        # => is this the last iteration?

• 可選參數 

limit:<INTEGER>讓您限制獲得的物品數量。

offset:<INTEGER>讓您從第 n 個項目開始收集。

reversed：從最後一個到第一個迭代集合。

# array = [1,2,3,4,5,6]
{% for item in array limit:2 offset:2 %}
  {{ item }}
{% endfor %}
# results in 3,4

{% for item in collection reversed %} {{item}} {% endfor %}

# items => []
{% for item in items %}
   {{ item.title }}
{% else %}
   There are no items!
{% endfor %}

4、case 語句

{% case condition %}
{% when 1 %}
hit 1
{% when 2 or 3 %}
hit 2 or 3
{% else %}
... else ...
{% endcase %}

 

END--------------------------------------