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


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


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

{% raw %}
{{ page.title }}
{% endraw %}

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

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

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

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

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

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

{% raw %}
{% 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" %}
{% endraw %}

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


"변수를 할당하다"

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

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

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

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


Liquid 문법을 {% raw %}와 {% endraw %}로 감싼다.


{% comment %}와 {% endcomment %}로 감싼다.

{% raw %}
Anything you put between {% comment %} 이것은 주석입니다~ {% endcomment %} tags
is turned into a comment.
{% endraw %}

텍스트를 출력하지 않더라도 Liquid 언어에서 태그를 사용하면 한 줄의 공백이 출력될 수 있다. 이때 공백 한 줄이 출력되지 않게 하려면 태그의 % 안에 -를 붙이면 된다.

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

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

{% raw %}
{{ "/my/fancy/url" | append: ".html" }}
{% endraw %}
  • 출력 값 뒤에 .html 문자열을 붙여서 출력한다.

{% raw %}
{{ "adam!" | capitalize | prepend: "Hello " }}
{% endraw %}
  • adam! 문자열 값의 맨 앞 문자를 대문자로 바꾸고 앞에 Hello를 붙여서 출력한다.