Jekyll에서 꼭 알아야 할 Liquid 기본 문법: 변수, 필터, 태그 사용법

Jekyll을 사용해 정적 웹사이트나 블로그를 만들다 보면 ‘Liquid’라는 단어를 자주 접하게 됩니다. Liquid는 Jekyll이 사용하는 템플릿 엔진으로, HTML 파일 내에서 동적인 데이터를 처리하고 로직을 구현할 수 있게 해줍니다. 예를 들어, 모든 페이지에 동일한 헤더와 푸터를 적용하거나, 포스트 목록을 자동으로 생성하는 등의 작업을 Liquid를 통해 할 수 있죠.

이번 글에서는 Liquid 코드 자체를 웹페이지에 어떻게 표시할 수 있는지에 대해 자세히 알아보겠습니다.

1. 변수 및 객체 출력: {{ }} (이중 중괄호)

Liquid에서 가장 기본적이면서 많이 사용되는 문법은 이중 중괄호 {{ }} 입니다. 이 기호는 특정 변수의 값이나 객체의 속성을 웹페이지에 출력하라는 의미입니다.

사용 예시:

  • 이미지 경로 동적 생성: 
    {{ "/assets/images/guide.png" | relative_url }}

    위 코드는 /assets/images/guide.png라는 문자열에 relative_url 필터(아래에서 자세히 설명)를 적용한 결과를 출력합니다. Jekyll 사이트의 baseurl 설정에 맞춰 올바른 이미지 경로를 만들어주죠.

  • 페이지 또는 사이트 정보 접근: 
    {{ page.title }} {{ site.name }}

2. 필터: | (파이프 문자)

필터는 {{ }} 안에서 출력될 데이터의 형식을 바꾸거나 특정 연산을 추가할 때 사용합니다. 파이프 문자 | 뒤에 필터 이름을 적고, 필요한 경우 콜론 :과 함께 인자를 전달할 수 있습니다.

사용 예시:

  • relative_url 필터: 앞서 이미지 경로 예시에서 봤듯이, Jekyll 사이트의 루트 경로를 기준으로 상대적인 URL을 생성합니다. baseurl이 설정된 경우 유용합니다. 
    <img src="{{ "/assets/images/sample.jpg" | relative_url }}" alt="샘플 이미지">
  • absolute_url 필터: 사이트의 전체 URL(도메인 포함)을 기준으로 절대적인 URL을 생성합니다. RSS 피드나 외부 공유 시 유용합니다. 
    <a href="{{ "/about.html" | absolute_url }}">회사 소개</a>

3. 태그: {% %} (중괄호와 퍼센트 기호)

태그는 변수 출력 외에 조건문, 반복문, 특정 로직 수행 등 더 복잡한 작업을 할 때 사용합니다. {% 와 %}로 감싸진 형태로 작성됩니다.

사용 예시:

  • {% raw %}와 {% endraw %} 태그 (Liquid 코드 문자 그대로 보여주기): Jekyll은 기본적으로 {{ }}나 {% %}를 만나면 Liquid 문법으로 해석하려고 합니다. 하지만 우리가 블로그 글에서 Liquid 코드 자체를 예시로 보여주고 싶을 때는 이 해석을 막아야 하죠. 이때 raw 태그를 사용합니다.

    {% raw %}이 안에서는 {{ page.title }} 이나 {% if user %} 같은 Liquid 코드가
해석되지 않고 그대로 표시됩니다.{% endraw %}

    실제 출력: 이 안에서는 {{ page.title }} 이나 {% if user %} 같은 Liquid 코드가 해석되지 않고 그대로 표시됩니다.

    만약 한 줄짜리 Liquid 코드를 문장 중간에 그대로 넣고 싶다면, 예를 들어 {{ 변수 }}라는 문자열을 보여주고 싶다면 {% raw %}{{ 변수 }}{% endraw %}처럼 사용합니다.

  • {% if %} … {% else %} … {% endif %} 태그 (조건문 예시): raw 태그 외에도 다양한 로직 태그가 있습니다. 예를 들어 if 태그는 조건에 따라 다른 내용을 출력하게 할 수 있습니다.

    {% if page.show_sidebar %}
  <div class="sidebar">
    </div>
{% else %}
  <p>이 페이지에는 사이드바가 없습니다.</p>
{% endif %}

마무리하며

오늘 우리는 Jekyll에서 사용되는 Liquid의 몇 가지 기본적이면서도 중요한 문법, 즉 변수 출력({{ }}), 필터(|), 그리고 로직 태그({% %})에 대해 알아보았습니다. 특히 {% raw %} 태그와 마크다운 코드 블록을 사용하여 Liquid 코드 자체를 어떻게 웹페이지에 정확히 표시할 수 있는지도 살펴보았습니다.

Liquid에는 이 외에도 다양한 기능과 태그, 필터들이 있습니다. 오늘 다룬 내용을 바탕으로 Jekyll 공식 문서나 다른 자료들을 참고하시면 더욱 다양하고 강력한 웹사이트를 구축하실 수 있을 겁니다. Liquid를 통해 여러분의 Jekyll 사이트에 더 많은 동적인 요소를 추가해보세요!