[Github 블로그] Liquid 문법 간단 정리

jekyll 디렉터리 구조를 살펴보니 Liquid 언어를 코드 속에 담고 있는 경우가 많았다. 처음엔 외계어 같이 느껴져서 겁이 났는데 막상 문서를 살펴보니 내용도 짧고 쉬워서 Liquid 언어도 마크다운 만큼이나 쉽고 빠르게 익힐 수 있구나 싶었다.
더 자세한 설명은 💎Liquid 공식💎 문서로 확인하기!

1. Objects

{ { 와 } }을 사용하여 감싼다. page에 { { } }로 감싸져 있는 Object를 출력한다. 변수라고 생각하면 됨.

{{ page.title }}

[Github 블로그] Liquid 문법 간단 정리

2. Tags

{ { % 와 % } }을 사용하여 감싼다. 논리와 제어를 담당하는 역할을 한다.

1.Control flow

if 문 : {% if 조건문 %} ... {% endif %}
if-else if-else 문 : {% if 조건문 %}{% elsif 조건문 %}{% else 조건문 %} ... {% endif %}
if not 문: {% unless 조건문 %} ... {% endunless %}
switch-case문: {% case 조건문 %}{% when 값 %} ... {% endcase %}

2. Iteration

for 문

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

for문에도 else를 쓸 수 있다. for문에서의 else는 반복하려는 컨텐츠가 비어서 for문을 한번도 돌릴 수가 없을 때 해당된다.

{% for product in collection.products %}
  {{ product.title }}
{% else %}
  The collection is empty.
{% endfor %}

이밖에도 for문에 limit, offset, range 등등으로 반복 횟수와 범위를 제어할 수 있다.

cycle 문

계속 순환하기 때문에 "second" cycle이 네번째 순회할 땐 다시 one을 출력하게 된다.

{% cycle "first": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "first": "one", "two", "three" %}

one one two three one two

tablerow 문

3. Variable assignments

assign

변수를 새로 만들고 할당함

{% assign foo = "bar" %}
{{ foo }}

bar

capture

태그로 둘러쌓여 있는 문자열을 변수에 저장한다.

{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}

I am being captured.

increment, decrement

변수의 값을 증가하고 감소시킨다.

Liquid 문법 그대로를 출력하고 싶을 때

liquid 문법을 { % raw % } { % endraw % }로 감싼다. (내가 포스트를 현재 이 태그를 사용하여 liquid 문법을 포스트에 그대로 쓰고 있다!)

주석

Anything you put between {% comment %} and {% endcomment %} tags
is turned into a comment.

Anything you put between tags is turned into a comment.

줄 바꿈 하고 싶지 않을 때

텍스트를 출력하지 않더라도 Liquid 언어 상 태그를 사용하면 한 줄이 출력될 수 있다. 공백 한 줄 출력되고 싶지 않으면 % 안쪽에 -붙여주기

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

tomato

3. Filters

|기호를 사용하여 객체의 아웃풋 형태를 바꾼다. 필터의 종류들이 다양하기 때문에 Liquid 공식 문서에서 확인하기!

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

/my/fancy/url.html

• 출력 값 뒤에 .html 문자열을 붙여서 출력한다.

{{ "adam!" | capitalize | prepend: "Hello " }}

Hello Adam!

• adam! 문자열 값의 맨 앞 문자를 대문자로 바꾸고 앞에 Hello를 붙여서 출력한다.

---

🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

Blog 카테고리 내 다른 글 보러가기