게임 코딩의 모든 것.


Liquid 기본 문법

블로그를 직접 커스텀하려면 Html, Liquid 문법의 기본은 알아야 편합니다.
저는 웹 개발자가 아니지만, 간단한 문법만 살펴보려 합니다.

✔️먼저읽기✔️

{ { .. } }는 출력하고 싶은 변수를 템플릿에 렌더링하는 일을 합니다.
{ % .. % }는 논리/제어를 결정 하는 일을 합니다.
{ { .. | .. } } 필터는 변수를 변경하는 역활을 합니다.

참고자료

잘 정리 된 문서라 자세히 알고 싶거나, 직관적인 출력 값을 보려면 참고하세요!
📌 Liquid 문서 📌

전역 변수 관련 문서
📌 Jekyll variables 📌


전역 변수

전역 변수 설명
site 사이트의 전반적 정보와 구성 설정(config.yml)의 변수 접근.
page ---로 감싸진 서문(Front Matter)에 정의된 메타 데이터 접근.
layout ---로 감싸진 서문(Front Matter)에 정의된 레이아웃 접근.
etc. theme, content, paginator도 있으니 해석이 필요하시면 참고서를 보세요.

site 변수

자주 보이는 site의 대표적인 기본 제공 변수들 다음과 같습니다!

  • site.posts: 모든 블로그 포스트들
  • site.pages: 모든 페이지들
  • site.categories: 카테고리별 포스트 목록
  • site.tags: 태그별 포스트 목록
  • site.data: _data 폴더 내의 모든 데이터 파일
  • site.time: 현재 시간
  • site.pages: 모든 페이지들
  • site.config: _config.yml 파일의 모든 설정
## 모든 포스트의 경로와 타이틀 출력 ##
<ul>
  { % for post in site.posts % }
    <li>
      <a href="{ { post.url } }">{ { post.title } }</a>
    </li>
  { % endfor % }
</ul>

page/layout 변수

이는 주로 YAML헤더인 서문(Front matter)이 있을 때 사용하며,
YAML헤더가 사용될 수 있는 .md, .html, .yml, .json파일에 사용됩니다.
page는 메타 데이터 참조를 하며, layout은 레이아웃 설정을 관여합니다.

---
layout: post
title: "My Blog First Post"
date: 2024-07-12
---

{ % if page.title == "Surprise Page" % }
  { % layout Surprise % }
{ % endif % }

{ % layout Surprise % }은 Surprise파일을 기존 layout에 적용하겠다는 말입니다.


Basic

{ { .. } }는 출력하고 싶은 변수를 템플릿에 렌더링하는 일을 합니다.

1. 연산자

기본 연산자

기본 연산자는 ==, !=, >, <, >=, <=, or, and로 사용합니다.

연산 순서

연산 순서는 오른쪽에서 왼쪽으로 실행합니다.
또한 괄호로 연산 순서를 변경할 수 없습니다.

Contains

말 그대로 포함하니?의 의미를 갖고 문자열이 있는지 확인합니다.

{% if product.title contains "Pack" %}
  Milk Pack.
{% endif %}

2. 타입

타입 설명
String { % assign my_string = "Hello" % }
Number { % assign my_num = 123 % }
Boolean { % assign my_bool = true % }
Nil 빈 값, 반환된 출력이 비어있다면 페이지에 그려지지 않습니다.
Array Split필터로 배열 초기화 가능. 접근은 [ ] 인데스로.
Empty { % if pages.about-us == empty % } .. { % endif % }


Tags

태그는 템플릿의 논리/제어를 결정 하는 일을 합니다.
형식은 { % .. % }입니다.

1. 제어 흐름

unless는 if not elsif/else는 several if case/when은 case by case와 같습니다.
조건 설명
if { % if product.title = "Shoes" % } ... { % endif % }
unless { % unless product.title = "Shoes" % } ... { % endunless % }
elsif/else { % if obj.color == "red" % } .. { % elsif obj.color == "blue" % } .. { % else obj.color % } .. { % endif % }
case/when { % case handle % }{ % when "cake" % } .. { % when "cookie", "biscuit" % } .. { % else % } .. { % endcase % }

2. 반복

for

조건 설명
for { % for obj in collection.objs % } { % endif % }
break 반복 중지 - { % break % }
continue 현재 루프 넘기기 - { % continue % }
etc. 루프 반복 횟수 제한(limit) / 지정된 오프셋부터 루프(offset) / 반복 범위 지정(range) / 루프 역순(reversed)

cycle

문자열 그룹이 n개라면, 매 루프마다 문자열을 하나씩 이동하며 순환.

{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}

루프 4번 이후 결과.
one
two
three
one

tablerow

tablerow는 html에 <table></table>을 이용하여 배열의 행과 열을 html의 결과로 출력합니다.

<table>
{% tablerow product in collection.products %}
  {{ product.title }}
{% endtablerow %}
</table>

결과.
<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
  </tr>
</table>

3. 템플릿

Render/Include

Include는 스니펫(snippet)이나 앱 블록(app block)을 삽입하는 역활을 합니다.
Render는 include의 역활 대체할 수 있으며, Jekyll 4.0버전 이상에서 사용하는 권장 방식입니다.
But, Minimal-Mistakes파일는 Include를 사용하고 있으니 기억해주세요.

🌠 Snippet은 작은 조각이란 뜻이고, 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 뜻합니다. 
{% render 'filename' %}

{% include 'filename' %}
🌠 render/include의 파일명을 적을 때, 확장자(.html)는 생략됩니다. .html, .liquid으로 확장자를 명시할 수 있습니다.

Other

그 외에도 다양한 템플릿들이 있습니다. 관심이 있다면 찾아보세요!

template 설명
Comment 주석 처리 - { % comment % } ... { % endcomment % }
Echo 태그에서 변수 출력 - { % liquid echo ... % }
Liquid 구분 기호 없이 Liquid 블록 사용 - { % Liquid ... % }
Raw 모든 Liquid 코드를 날 것으로 출력 - { % raw % } ... { % endraw % } 
<Liquid Example>
{%
  assign product_type = product.type | downcase
  assign message = ''

  case product_type
    when 'health'
      assign message = 'This is a health potion!'
    when 'love'
      assign message = 'This is a love potion!'
    else
      assign message = 'This is a potion!'
  endcase

  echo message
%}


<Raw Input>
{ % raw % }
  { { 2 | plus: 2 } } equals 4.
{ % endraw % }

<Original Output>
equals 4.

<Raw Output>
{ { 2 | plus: 2 } } equals 4.

4. 변수 할당

Assign

변수를 생성합니다.

{% assign variable_name = value %}

Capture

문자열 또는 텍스트 블록을 변수에 저장합니다.

{% capture my_variable %}
  Hello, {{ user_name }}!
{% endcapture %}

<Input>
{{ my_variable }}

<Output>
Hello, user_name


Filters

필터는 변수를 변경하는 역활을 합니다.
{ { .. | .. } }로 중간에 |파이프 문자가 여러 개 들어갈 수 있습니다.

🌠 데이터를 가공하는 역활!

1. 필터 종류

문자열

필터 설명
append 문자열 끝에 문자열 추가 - { { "Hello" | append: " World" } }
capitalize 문자열 첫 글자 대문자 변환 - { { "hello" | capitalize } }
upcase 문자열 소문자 변환 - { % Liquid ... % }
truncate 문자열 지정 길이만큼 자름- { { "Hello, world!" | truncate: 5 } }

숫자

필터 설명
plus 더함 - { { 5 | plus: 3 } }
times 곱 - { { 5 | times: 3 } }
divided_by 나눔 - { { 10 | divided_by: 2 } }
round 숫자 반올림- { { 4.567 | round: 2 } }

그 외

필터 설명
replace 문자열 바꾸기 - { { "Hello, world!" | replace: "world", "Liquid" } }
date 곱 - 날짜 형식 바꾸기{ { "2024-07-12" | date: "%B %d, %Y" } }

그 밖에 배열, 폰트, 색상, 수평선 등 수많은 필터를 적용할 수 있으니 원하는 필터를 찾아 사용해보세요.

2. 적용 예시

<Data>
{
  "product": {
    "title": "Health potion"
  }
}

<Input_1>
{{ product.title | upcase }}

<Output_1>
HEALTH POTION

<Input_2>
{{ product.title | upcase | remove: 'HEALTH' }}

<Output_2>
POTION

필터가 여러 개라면, 왼쪽부터 오른쪽으로 적용이 순차적으로 됩니다.


✨개인 공부 글입니다! 언제든지 질문/지적 해주세요!✨

Leave a comment