Liquid란

Requirement

Jekyll, Liquid

Liquid

Liquid는 Ruby 기반의 오픈소스 HTML 템플릿 언어이다.
Liquid 코드는 HTML 파일 형식을 가진 문서에 직접 삽입될 수 있지만 Liquid가 삽입된 HTML 코드를 해석하려면 그러한 기능을 지원하는 별도 도구를 사용해서 해석해야만 한다.
따라서 우리는 Liquid를 지원하는 Jekyll을 이용해 Liquid가 삽입된 HTML 문서를 순수 HTML로 변환한다.

Ruby 기반이란 말은 Liquid가 제공하는 문법의 실행이 Ruby 프로그래밍 언어의 실행을 발생시킨다는 것이다. 그래서 Liquid에서 변수를 할당하고 사용하는 것 모두 Ruby 언어 레벨에서 Ruby의 변수 타입으로 할당되고 수행되며 Liquid 문법 관련 에러가 났을때에도 Ruby 실행 결과의 stack을 볼 수 있다.

하지만 Liquid 문법 레벨에서 상대적으로 저수준인 Ruby 레벨까지 제어 할 수 있는 방법은 없으므로 굳이 Ruby의 영역을 신경 쓸 필요는 없다.

Liquid와 Jekyll

코드 예

---
---
<div>
{% assign a = "Hello World" %}
<p>{{ a }}</p>
</div>

위 코드 예는 Liquid 코드가 삽입된 HTML 코드이다.

이처럼 HTML과 Liquid를 한 파일 안에 같이 사용하는 식으로 Liquid를 활용한다. 그러나 Liquid는 템플릿 언어일뿐 이를 목적에 맞게 해석할 도구를 제공하는 것은 아니다. Python이라는 프로그래밍 언어가 Python 코드를 해석할 수 있는 인터프리터가 있는 것과는 다르다는 별 것 아닌 의미.
다만 Git Markdown, Atom 에디터 플러그인과 같은 별도의 도구가 Markdown으로 작성된 파일을 서식이 있는 문서로 변환시켜주듯이 Liquid 언어에도 그 해석과 변환을 도와주는 다른 Framework들이 있다.

블로그 페이지 생성에 사용되는 Jekyll이 바로 Liquid를 위한 변환 도구 중 하나이다. Jekyll을 이용하면 .html 확장자 파일에 Liquid 코드를 삽입시킨 것을 순수 HTML 파일로 변환시키는 것 뿐만 아니라 .md 확장자 파일을 생성해서 Markdown 문법의 텍스트와 HTML 그리고 Liquid 코드까지 모두 포함하는 파일을 HTML 파일로 변환시킬 수 있다.

기본 사용법

머리말

Liquid로 작성한 코드를 Jekyll이 변환해야할 문서로 인식하도록 하려면 머리말(front-matter) 즉, 3개의 dash(-)로 된 라인 2줄로 감싼 영역을 꼭 붙여주어야 한다.

아래 설명대로 머리말을 넣어주면 Jekyll은 파일 확장자에 맞게 파일을 HTML로 변환시켜준다.
참고로 Jekyll 변환 결과는 _site 디렉토리 하위에서 확인해 볼 수 있다.

이 머리말 영역엔 아래와 같은 YAML 형식으로 Liquid 변수를 선언해서 사용할 수도 있고

---
title: "Liquid"에 대해서
item-list:
- item-name: a
  item-value: 1
- item-name: b
  item-value: 2
---

아무것도 쓰지 않을 수도 있다.

 ---
 ---

Liquid를 HTML에 삽입하는 개념

위의 코드 예에서 {% %} 또는 {{ }} 기호로 둘러싼 영역들이 Liquid 코드에 해당하는 영역이다.

코드 예의 2번째 줄의 Liquid 코드는 a라는 변수에 문자열 "Hello World"를 담는 코드이다.
이 작업은 변환 후 HTML에 어떤 흔적을 남기지 않는다.

3번째 줄은 변환 후 HTML에 영향을 준다.
{{ a }}는 a 변수의 값을 반환하는 코드이며 변환을 거치면 <p>Hello World</p> 라는 HTML 코드가 된다.

Liquid 문법 참조

Liquid 문법을 모두 익히기 보단 필요할때 마다 아래 주소들에서 설명들을 참조해가면서 사용하는 편이 정신 건강에 이로울 것이다.

• Jekyll 한국 문서
  Liquid의 필터: https://jekyllrb-ko.github.io/docs/liquid/filters/
  Liquid의 태그: https://jekyllrb-ko.github.io/docs/liquid/tags/
  Jekyll에서 예약해놓은 Liquid 변수: https://jekyllrb-ko.github.io/docs/variables/
• 공식 Liquid 문서: https://shopify.github.io/liquid/
• Shopify Developers의 Liquid 문서: https://shopify.dev/docs/themes/liquid/reference
• Liquid 오픈소스 Git Wiki: https://github.com/Shopify/liquid/wiki/Liquid-for-Designers

위의 Liquid 문서 중 2번째 문서가 3번째보다 보기 쉬운것 같다.
하지만 3번째 문서가 Liquid에 대해 더 많은 내용을 담고 있고 내 블로그에 사용된 Minimal-Mistakes 테마에서도 2번째 공식 문서에 나온 문법 이상의 Liquid를 사용하고 있다.