[BlogDev] Liquid 문법

도입

본 게시물은 공부하는 식빵맘님의 게시물을 통해 배우고 따라하는 과정입니다. 이 글을 누군가 보고 있다면, 그리고 보다 전문적이고 자세한 설명을 바라신다면 위 링크의 블로그를 확인해보시길.

Liquid 문법

jekyll과 Minimal Mistakes theme를 구성하고 있는 주요 문법이다. 모든 문법이 Liquid 문법으로 구성되어 있으며 자세한 설명은 Liquid 공식 문서를 참고한다.

1. Objects

{{ 와 }} 로 감싼 것을 의미한다. page에 Object 자체를 출력하며, 변수라고 생각하면 된다.

{{ page.title }}

결과

[BlogDev] Liquid 문법

2. Tags

{% 와 %}를 사용하여 감싼다. HTML의 태그처럼 논리와 제어를 담당한다.

가. Control flow

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

나. Iteration - 반복문

1) for문

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

그리고 for문에서도 else를 사용할 수 있는데, 이는 반복하려는 contents가 없어서 for문을 한 번도 실행할 수 없을 때 해당한다.

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

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

2) cycle문

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

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

다. Variable assignments

1) assign

“변수를 할당하다”

{% assign SH = "SSAFY 합격" %}
{{ SH }}

결과

SSAFY 합격

2) capture

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

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

결과

I am being captured.

3) increment, decrement

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

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

Liquid 문법을 와로 감싼다.

마. 주석

``로 감싼다.

Anything you put between {% comment %} 이것은 주석입니다~ {% 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

| 기호를 사욯아여 객체의 아웃풋 형태를 필터링하여 바꾼다.

가. append

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

결과

/my/fancy/url.html

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

나. prepend

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

Hello Adam!

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

References

• 공부하는 식빵맘
• Liquid 공식 문서