Post

Liquid - Filters

Liquid의 Filters에 대한 내용을 서술

Posted
By Lojin
19 min read

Contents

기본적인 구조

Filters는 object, variable의 출력을 바꾼다. |기호로 사용한다. 보통 {{, }}로 둘러쌓인 출력문이나 assign태그에서 사용한다.

숫자의 절대값을 반환하는 abs 필터를 예시로 보자. 아래의 코드는 출력문 내부에서 필터를 사용해 수의 절대값을 출력한다.

1

{{ -15 | abs }}

1

15

assign태그 내에서 사용할 때에도 같은 방식으로 사용한다.

1
2

{% assign var_int = -17.4 | abs %}
{{ var_int }}

아래와 같이 여러개의 필터를 연속해서 사용하는 것도 가능하다.

1
2

{% assign var_int = -17.4 | abs | prepend: "$ " %}
{{ var_int }}

1
2

$ 17.4

Liquid 표준 Filters

abs

숫자의 절대값을 반환한다.

1

{{ -15 | abs }}

1

15

number타입이 아닌 string타입이더라도, 해당 문자열이 숫자만 포함한다면 abs태그는 작동한다.

1

{{ "-15" | abs }}

1

15

append

이름에서도 알 수 있듯이, 문자열의 뒤에 다른 문자열을 붙인다. 붙일 문자열에는 리터럴뿐만 아니라 다른 변수도 들어갈 수 있다.

1
2

{% assign template_file = "/video.html" %}
{{ "_includes/" | append: "embed" | append: template_file %}

1
2

_includes/embed/video.html

at_least

숫자의 최소값을 제한한다. 필터의 대상 숫자가 at_least의 인자보다 작다면 at_least의 인자가 출력될 것이다. 더 크다면, 해당 숫자가 그대로 출력될 것이다.

1
2

{{ 10 | at_least: 14 }}
{{ 10 | at_least: 9 }}

1
2

14
10

다른 프로그래밍 언어의 min함수와 비슷하다. 즉, 위의 코드의 첫 줄은 Math.min(10, 14)와 같은 기능을 한다.

at_most

위의 at_least의 최댓값 버전이다. 필터의 대상 숫자가 at_most의 인자보다 크면 at_most의 인자가 출력될 것이다. 더 작다면, 해당 숫자가 그대로 출력될 것이다.

1
2

{{ 5 | at_most: 10 }}
{{ 5 | at_most: 4 }}

1
2

5
4

다른 프로그래밍 언어의 max함수와 비슷하다. 즉, 위의 코드의 첫 줄은 Math.max(5, 10)와 같은 기능을 한다.

capitalize

대상 문자열의 첫 문자를 대문자로 만들고, 그 외의 문자열은 소문자로 만든다.

1

{{ "test of CAPITALIZE" | capitalize }}

1

Test of capitalize

ceil

해당 숫자보다 큰 수 중, 가장 가까운 정수로 올림한다. 다른 언어의 수학 관련 라이브러리에도 포함되어 있는 ceil함수/메소드와 같은 역할을 한다. 문자열에 대해서도, 해당 문자열이 숫자로 변환가능하다면 작동한다.

1
2
3
4

{{ 1.1 | ceil }}
{{ 3.0 | ceil }}
{{ 24.23 | ceil }}
{{ "2.4" | ceil }}

1
2
3
4

2
3
25
3

compact

배열 내의 모든 nil타입 값을 삭제한다. 공식 문서의 예시를 통해 알아보자.

아래 예시는 웹 사이트의 모든 페이지의 리스트를 담고 있는 site.pages 변수를 map 필터를 통해 각 페이지의 category 속성만을 추출해 site_categories 배열로 만든 후 출력한다.

1
2
3
4

{% assign site_categories = site.pages | map: "category" %}
{% for category in site_categories %}
- {{ category }}
{% endfor %}

1
2
3
4
5

- business
- celebrities
- 
- lifestyle
- sports

만약 카테고리가 없는 페이지가 있다면, 배열의 일부 항목은 nil이 될 것이다. 따라서 일부 행은 빈 상태로 출력이 될것이다.

이를 막기 위해 compact필터를 사용할 수 있다. 해당 필터를 사용하면 배열 내의 nil항목을 삭제하여 빈 항목이 출력되는 것을 방지할 수 있다.

1
2
3
4

{% assign site_categories = site.pages | map: "category" | compact  %}
{% for category in site_categories %}
- {{ category }}
{% endfor %}

1
2
3
4

- business
- celebrities
- lifestyle
- sports

concat

두 개의 배열을 잇는다.

1
2
3
4
5
6
7
8

{% assign fruits = "apples, oranges, peaches" | split: ", " -%}
{% assign vegetables = "carrots, turnips, potatoes" | split: ", " -%}

{% assign everything = fruits | concat: vegetables -%}

{% for item in everything -%}
- {{ item }}
{% endfor %}

1
2
3
4
5
6
7

- apples
- oranges
- peaches
- carrots
- turnips
- potatoes

필터를 연속해서 사용함으로서 두 개 이상의 배열을 이을 수도 있다.

1
2
3
4
5
6
7

{% assign furniture = "chairs, tables, shelves" | split: ", " -%}

{% assign everything = fruits | concat: vegetables | concat: furniture -%}

{% for item in everything -%}
- {{ item }}
{% endfor %}

1
2
3
4
5
6
7
8
9
10

- apples
- oranges
- peaches
- carrots
- turnips
- potatoes
- chairs
- tables
- shelves

date

타임 스탬프를 다른 날짜 포맷으로 바꾼다. 예시를 통해 살펴보자.

1

{{ page.date | date: "%a, %b %d, %y" }}

1

Thu, Aug 22, 24

해당 태그에 사용되는 날짜 포맷은 STRFTIME과 같은 문법을 따른다. 각 날짜 요소에 대한 시그니쳐는 해당 링크를 확인하라.

특정 날짜 변수뿐만 아니라 날짜를 나타내는 문자열에 대해서도 작동한다.

1

{{ "Aug 12, 2024" | date: "%Y, %B %d" }}

1

2024, August 12

default

기본적으로 출력될 값을 지정한다. 출력할 값이 nil이거나 false이거나 비어있는 상태라면 default로 지정한 값이 출력된다.

1

{{ product_price | default: 3.99 | prepend: "$" }}

1

$3.99

product_price변수는 정의되지 않았으므로 nil이다. 따라서 default로 지정한 값인 3.99가 출력 되는 것을 볼 수 있다.

비어있는 문자열에 대해서도 default로 지정한 값이 출력된다.

1
2

{% assign price_of_test = "" %}
{{ price_of_test | default: 3.99 | prepend: "$" }}

1
2

$3.99

divided_by

대상 수를 인자의 수로 나눈 몫을 출력한다. 나눌 숫자(인자)가 정수일 경우 결과 값은 자신보다 작은 정수 중 가장 가까운 정수로 내림된다.(floor태그와 같다.)

1

{{ 20 | divided_by: 8 }}

1

2

나누는 숫자가 부동소수점일 경우에는 출력값 또한 부동소수점으로 출력된다.

1

{{ 20 | divided_by: 8.0 }}

1

2.5

해당 태그를 포함한 연산이 이루어지는 태그들은 숫자의 형을 변환한다. 정수에 대해 실수 연산을 하개되면 결과값은 실수로 나오는 것이다.

downcase

문자열의 모든 알파벳을 소문자로 만든다. .toLowerCase()메소드와 비슷한 결과를 낸다.

1

{{ "Public Static Void Func()" | downcase }}

1

public static void func()

escape

문자열 내의 특수문자들을 이스케이프 형태로 바꾸어준다. 이렇게 이스케이프된 문자열은 URL등에서도 사용할 수 있게 된다. 예시로 보는 것이 빠르다.

1

{{ "Do you like 'Pratt & Whitney'?" | escape }}

1

Do you like 'Pratt & Whitney'?

first

배열의 첫번째 요소를 반환한다.

1

{{ "First Second Third Fourth" | split: " " | first }}

1

First

해당 필터는 배열에 대해 .기호로 사용하는 것이 가능하다.

1
2
3
4
5
6

{% assign var_str_arr = "First Second Third Fourth" | split: " " %}
{% if var_str_arr.first == "First" %}
	Correct!
{% else %}
	Incorrect!
{% endif %}

1

Correct!

floor

대상 숫자보다 작은 정수 중, 가장 가까운 정수로 내림한다. 문자열일 경우, 숫자로의 변환을 시도한 후 적용한다.

1
2
3
4

{{ 1.2 | floor }}
{{ 1.9 | floor }}
{{ 24.533 | floor }}
{{ "23.7" | floor }}

1
2
3
4

1
1
24
23

join

배열의 요소들을 하나의 문자열로 연결한다. 이떄, 인자로 넘긴 문자열을 분리자로 삼는다.

1
2

{% assign var_arr_join = "John, Amy, Jane, Michael" | split: ", " %}
{{ var_arr_join | join: " and " }}

1
2

John and Amy and Jane and Michael

last

위에서 서술한 first태그와 비슷하다. 대신 이 태그는 마지막 요소를 반환한다. 사용법은 위의 first와 같다.

1

{{ var_str_arr.last }}

1

Fourth

lstrip

문자열 왼쪽의 모든 공백을 삭제한다. 문자열 사이의 공백과 오른쪽의 공백은 삭제하지 않는다.

1

{{ "		example test string        " | lstrip }}!!!!!

1

example test string        !!!!!

map

위에서도 한번 사용했던 그 태그이다. 배열의 각 요소에서 인자로 넘긴 이름의 프로퍼티를 추출해서 배열을 생성한다.

1
2
3
4

{% assign site_categories = site.pages | map: "category" %}
{% for category in site_categories %}
- {{ category }}
{% endfor %}

위에서 사용했던 예시이다. site.pages로 모든 페이지 목록을 불러온 뒤, category 프로퍼티를 추출해서 해당 프로퍼티로 배열을 만들어 출력하는 것이다.

minus

대상 숫자에서 인자로 넘긴 수를 뺀 값을 출력한다.

1
2
3

{{ 20 | minus: 8 }}
{{ 3 | minus: 10 }}
{{ 2.4 | minus: 1 }}

1
2
3

12
-7
1.4

modulo

대상 숫자를 인자로 나눈 나머지를 반환한다. C 계열 언어의 %연산자와 같은 역할을 한다.

1
2

{{ 3 | modulo: 2 }}
{{ 61 | modulo: 12 }}

1
2

1
1

plus

대상 숫자에 인자를 더한 값을 리턴한다.

1
2

{{ 10 | plus: 8 }}
{{ 14.5 | plus: 22 }}

1
2

18
36.5

prepend

대상 문자열의 앞에 인자로 넘긴 문자열을 붙인다.

1
2

{% assign path = "_includes/embed" -%}
The file's path is {{ "/video.html" | prepend: path }}.

1

The file's path is _includes/embed/video.html.

remove

대상 문자열에서 인자로 넘긴 문자열을 지운다.

1

{{ "This is Test String!!" | remove: " Test" }}

1

This is String!!

remove_first

대상 문자열에서 인자로 넘긴 문자열을 지운다. 단, 처음 등장하는 것만 지운다.

1

{{ "The string in this string is strange" | remove_first: "str" }}

1

The ing in this string is strange

replace

대상 문자열에서 첫번째 인자의 문자열을 찾아서 두번째 인자로 바꾼다.

1

{{ "This is my car" | replace: "my", "her" }}

1

This is her car

replace_first

replace태그와 같지만, 전부가 아닌 처음 등장하는 문자열만 바꾼다.

1

{{ "This is my first car. That car is my second car" | replace_first: "my", "your" }}

1

This is your first car. That car is my second car

reverse

배열의 요소들을 반대로 정렬한다. reverse태그는 문자열에는 적용할 수 없다.

1
2

{% assign var_str_reverse = "First, Second, Third" | split: ", " %}
{{ var_str_reverse | reverse | join: ", " }}

1
2

Third, Second, First

문자열을 직접 조작할 수 없기에, 문자열에 사용하고 싶다면 위와 같이 split태그나 join태그를 같이 사용해야 한다.

round

대상 숫자를 반올림한다. 기본적으로 소수점 첫째 자리에서 반올림하지만, 인자로 정수 n을 넘기면 소수점 아래 n+1번째 자리에서 반올림 한다.

1
2
3

{{ 1.4 | round }}
{{ 1.2 | round }}
{{ 15.358 | round: 2 }}

1
2
3

1
1
15.36

rstrip

기본적인 사용법은 lstrip과 같다. 단, 해당 태그는 오른쪽의 공백을 제거한다.

1

{{ "		example test string        " | rstrip }}!!!!!

1

		example test string!!!!!

size

대상 문자열의 길이를 반환하거나, 대상 배열의 요소의 개수를 반환한다. 해당 태그 또한 first태그나 last태그와 같이 .기호로 사용할 수도 있다.

1
2
3

{{ "Test of String" | size }}
{% assign var_str_size = "one, two, three, four, five" | split: ", " %}
{{ var_str_size.size }}

1
2
3

14

5

slice

첫번째 인자에서부터 두번째 인자 만큼 잘라낸 문자열을 반환한다. 즉, 첫번째 인자는 index를, 두번째 인자는 length를 의미한다.

1
2
3

{{ "String" | slice: 0 }}
{{ "String" | slice: 3 }}
{{ "String" | slice: 0, 3 }}

1
2
3

S
i
Str

sort

배열 내의 요소들을 정렬한다. 이때, 대소문자를 구분한다.

1
2

{% assign var_str_sort = "Apple, Giraff, Zebra, Banana, Salt" | split: ", " %}
{{ var_str_sort | sort | join: ", " }}

1
2

Apple, Banana, Giraff, Salt, Zebra

객체를 정렬할때에는, 정렬할 기준 프로퍼티를 지정할 수도 있다. 단순히 인자로 프로퍼티 명을 넘기면 된다.

split

문자열을 지정한 구분자로 잘라서 배열로 반환한다. 다른 언어에도 존재하는 split메소드/함수와 비슷하다.

1
2
3
4

{% assign var_str_split = "A, B, C, D, E" | split: ", " %}
{% for letter in var_str_split -%}
	{{ letter -}} {% if forloop.last != true -%}-{% endif -%}
{% endfor -%}

1
2

A-B-C-D-E

strip

lstrip와 rstrip를 합쳐놓은 태그이다. 왼쪽과 오른쪽 모두의 공백을 제거한다.

1

{{ "		example test string        " | strip }}!!!!!

1

example test string!!!!!

strip_html

문자열 내의 모든 HTML 태그들을 제거한다.

1

{{ "This is <strong>Text<strong> with HTML" | strip_html }}

1

This is Text with HTML

strip_newlines

문자열 내의 모든 개행 문자를 제거한다.

1
2
3
4
5
6
7

{% capture var_str_newlines %}
Test
 of Str
ing
{% endcapture %}

{{ var_str_newlines | strip_newlines }}

1
2
3


Test of String

sum

배열 내의 모든 요소를 합한다.

1
2

{% assign total_quantity = collection.products | sum: "quantity" %}
{{ total_quantity }}

위의 코드는 collection.products안의 object의 quantity프로퍼티를 다 더한다.

times

대상 숫자에 인자의 숫자를 곱한다.

1
2

{{ 3 | times: 2 }}
{{ 27.5 | times: 3 }}

1
2

6
82.5
Blogging, About Liquid
liquid objects tags filters
This post is licensed under CC BY 4.0 by the author.