[Jekyll] 나는 CSS도 HTML도 모르지만 Liquid 문법을 공부하지
Table of Contents
1 Liquid 문법을 공부하게 된 이유¶
토플 공부를 마치고 드디어 개강을 했다. 개강은 골때리지만 드디어 토플을 끝내고 자율공부를 할 수 있게 되어 다시 주피터 노트북을 켰다.
사실은 그 전에 이러저러한 이유가 있었는데..
그동안 글을 쓰면서 주피터로 글을 쓰고 티스토리에다가 마크다운을 복붙해서 업로드를 했었다. (지금도 그러고 있고)
근데 그 과정이 너무 귀찮은거지..페이지 열고닫고 복붙하고..
그래서 바로 마크다운 작성 및 업로드가 가능하다는 깃허브 블로그를 만들기로 결심했다.
사실 그동안 구글링하면 보이는 독특한? 이상한?ㅋㅋ페이지들은 모두 깃헙 블로그더라..(사실 멋있어보여서 따라하려고 하는거임)
그래서 패기롭게 일주일 동안 별별 에러랑 다 싸워가면서 겨우겨우 테마까지 적용을 했는데
그때부터 눈에 쥐가 나기 시작하는 거예요..아니 이게 뭐람 나는 파이썬 겨우 하고 자바는 읽지도 못하는디,,,^^
경영학도따리는 그 뒤에 줄줄 해야하는 커스텀 진도를 도저히 따라가지 못했다고 한다..눈물..
근데 jekyll이 liquid라는 templete language로 만들어졌다고 하네? 그래서 공부를 해야겠다고 생각했다.
어차피 그동안 페이지 구축에 관심이 많았어서 이번 기회에 미약하게나마 연습해야겠다고 다짐한..그런 것이었다..
미래의 나는 지금 나처럼 질질 짜면서 구글링하지 말고 과거의 내가 쓴 글을 읽으면서 웃고 있길..
본문의 내용은 https://shopify.dev/api/liquid 을 참고해서 작성했으니 읽어보면 도움이 될 것이다!! 이 글은 걍 번역만 한 거다..ㅎ
2 Tags¶
Liquid에서 tag는 논리문이나 조건문 등을 작성할 때 사용한다. (to create logic and control flow)
{% %}출력되는 내용{% %}d의 형식으로 작성한다.
##Tag Example
{% if product.available %} #product가 available하면
<h2> Price: $99 </h2> #가격을 99달러임을 표시하라
{% else %} #available하지 않다면 아래 문장을 출력하라
<h2 class="sold-out"> Sorry, this product is sold out. </h2>
{% endif %} #if문이 끝나면 endif를 마지막{% %}안에 적어준다.
2.1 Control Flow Tags: 조건문을 표현하는 태그¶
Control flow tags는 Liquid 블록이 실행되는 조건을 설정한다.
태그 안에는 if, unless, else, elsif, case, when, and, or이 들어갈 수 있다.
- If, Unless, Case
##If문 예시
{% if product.title == 'A Lovely Teddy Bear' %} #product의 title이 A Lovely Teddy Bear라면,(값이 ture)
You are buying a lovely teddy bear! #You are buying a lovely teddy bear! 를 화면에 출력
{% endif %} #조건문의 끝
##Unless문 예시
{% unless product.title == 'A Lovely Teddy Bear' %} #product의 title이 A Lovely Teddy Bear가 아니라면,(값이 flase)
You are not buying a lovely teddy bear! #You are not buying a lovely teddy bear! 를 화면에 출력
{% endunless %} #끝에는 항상 앞에end를 덧붙여준다.
##unless 대신 if에서 !=를 사용해서 표현할 수도 있다.
##else, elsif를 사용한 조건문
{% if shipping_method.title == 'International Shipping' %} #international shipping일 경우
You are shipping internationally. Your order should arrive in 2-3 weeks.
{% elsif shipping_method.title == 'Domestic Shipping' %} #international이 아닌 것들 중 domestic일 경우
Your order should arrive in 3-4 days.
{% else %} #international도, domesic도 아닐 경우
Thank you for your order!
{% endif %}
- Case, When
나는 case와 when을 사용해서 조건문을 표현하는 걸 처음 봤다. 완전 초보..novice..apprentice,,(토플 공부하면서 외운,,^^)
case은 조건을 적용할 대상을 지정하는 항목이고, when으로는 대상의 구체적인 조건을 설정한다.
##case, when을 사용한 조건문
{% case BTS.name %} #세부 조건을 따지는 대상으로 BTS의 name을 지정했다
{% when 'Jimin' %} #name이 Jimin일 떄
아이고 우리 말랑콩떡 춤신춤왕 지민이!! 항상 멋져 최고야!!!
{% when 'Jin' %} #name이 Jin일 때
깔깔 김부장님 어쩜 맨날 개그가 그렇게 재밌나요 제 배꼽 찾아주세요 아이고~
{% when 'RM' %} #name이 RM일 때
우리 멋쟁이 리더 항상 최고야 멋있어 계속 그렇게 건강하게 활동해줘!!!
{% else %} #그 밖의 name (V, Junkook, J_hope, Suga)
내가 손가락이 아파서 다 못 쓰지만 우리 자랑스런 탄이덜 응원한다~~~!!
{% endcase %}
- Multiple Conditions_and/or
여러 조건을 한 번에 적용하고 싶을 때는 and와 or같은 논리연산자를 사용하면 된다. 다들 알다시피 and는 교집합, or는 합집합과 같다.
##and
{% if line_item.grams > 20000 and customer_address.city == 'Ottawa' %}
You are buying a heavy item, and live in the same city as our store. Choose local pick-up as a shipping option to avoid paying high shipping costs.
{% endif %}
##or
{% if customer.tags contains 'VIP' or customer.email contains 'mycompany.com' %}
Welcome! We are pleased to offer you a special discount of 15% on all products.
{% else %}
Welcome to our store!
{% endif %}
2.2 Iteration Tags: 반복문을 표현하는 태그¶
Liquid 블록을 조건에 따라 여러 번 수행하게 만든다.
태그 안에는 for, else, break, continue를 사용하며, tag parameter로는 limit와 offset, range, reversed가 있다.
다른 루프로는 cycle, tablerow이 있다.
- for문으로 반목문 표현하기
for반복문을 사용하면 한 페이지 당 최대 50개의 결과를 출력할 수 있다. 50개가 넘으면 paginate tag를 사용해서 여러 페이지로 분할해준다.
{% for product in collection.products %} #나는 컴터 라이브러리 폴더 생각하면서 이해했다.
#collection폴더 안의 product 항목에 들어있는 product변수에 저장된 객체에 대해서
{{ product.title}}<br> #product(object)의 title(property)를 출력하라. 이때 <br>을 사용해서 객체마다 줄바꿈을 해준다.
{% endfor %}
>> Fancy hat
>> Snazzy shirt
>> Dapper pants
##else를 포함하는 반복문 만들기
{% for product in collection.products %}
{{ product.title }}
{% else %}
The collection is empty.
{% endfor %}
- break, continue를 사용해서 반복문 중단하거나 중간에 건너뛰기
##break를 사용해보자
{% for i in (1..5) %} #반복문 안에 조건문을 넣어 break를 표현한다.
{% if i == 4 %} #반복을 계속하다 i가 4가 되면
{% break %} #반복을 끝낸다. break
{% else %} #그게 아니라면 (i == 4를 제외한 반복문의 경우)
{{ i }} #i를 출력한다.
{% endif %} #if조건문 닫기
{% endfor %} #for반복문 닫기
##continue를 사용헤보자. 특정 조건에서만 명령을 수행하고 싶지 않을 때 사용한다.
{% for i in (1..5) %}
{% if i == 4 %} #반복해서 실행하다 변수 i의 값이 4가 되면
{% continue %} #명령을 실행하지 않는다. 그리고 다음 순서 반복문을 실행한다.
{% else %} # i != 4일때는
{{ i }} # i를 출력한다.
{% endif %}
{% endfor %}
- for반복문에서 사용할 수 있는 파라미터들: limit, offset, range, reversed
##limit를 사용해서 반복되는 횟수 제한하기
<!-- numbers = [1,2,3,4,5] --> #<!-- -->은 html내에서 주석 역할을 하는 태그라고 한다.
{% for item in numbers limit: 2 %} #반복문 설정. 변수 item은 리스트 안의 객체들과 대응된다.
{{ item }} #반목문을 2번까지만 실행한다. limit 파라미터가 없었으면 5번 반복됐을 것이다.
{% endfor %}
##offset를 사용해서 특정 인덱스에서 반복문 시작하기
<!-- numbers = [1,2,3,4,5] -->
{% for item in numbers offset: 2 %} #인덱스 2인 위치에서부터 반복문을 실행한다.
{{ item }} #리스트의 인덱스는 0부터 시작하니 세 번째 객체인 3부터 출력된다.
{% endfor %}
##range를 사용해서 반복문이 적용되는 대상의 범위를 설정할 수 있다. (처음 값..마지막 값)의 형식으로 표현한다.
##range는 숫자와 문자열 둘 다로 표현할 수 있다.
{% for i in (3..5) %} #범위를 3에서 5까지로 지정
{{ i }}
{% endfor %}
{% assign my_limit = 4 %} #assign을 사용해서 my_limit이라는 변수에 4라는 값을 저장한다.
{% for i in (1..my_limit) %} #my_limit를 범위를 표현하는 데 사용할 수 있다. 여기선 (1..4)와 같은 의미다.
{{ i }}
{% endfor %}
##reversed를 사용해서 뒤에서부터 반복문을 실행할 수 있다.
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %} #마지막에 reversed만 붙여주면 된다
{{ item }} #6, 5, 4, 3, 2, 1 으로 출력된다.
{% endfor %}
- For 반복문 안에서 Cycle을 사용해서 출력값을 대상으로 반복을 수행하기
{% for i in (1..4) %}
{% cycle 'one', 'two', 'three' %} #위에서 봤던 예시와 다르게 결과값이 순서대로 대응되서 출력된다.
{% endfor %} # i == 4
>> one, two, three, one # 4번 출력되어야 하니까 마지막 i = 4일 때는 다시 맨 앞의 것이 출력~!
##cycle 을 사용하면 일정한 패턴을 가진 배열을 표현할 수 있다.
<table>
{% for i in (1..4) %}
<tr {% cycle 'class="odd"', 'class="even"' %}> #HTML에서 <tr>태그는 테이블을 정의할 떄 사용된다. row를 표현한다.
<td>Index: {{ i }}</td> #<tr>, <th>, <td>는 http://www.tcpschool.com/html-tags/td 참고하자
</tr>
{% endfor %}
</table>
- table태그를 사용해서 tablerow반복문을 만들 수 있다.
<table>
{% tablerow product in collection.products %} # collection안의 products변수 안에 들어있는 객체 product에 대해
{{ product.title }} # product의 특성 title을 출력하라. tablerow는 반복 실행으로
{% endtablerow %} # 모든 product의 titled을 출력한 후에 종료된다.
</table>
- tablerow는 cols, limit, offset, range 파라미터를 사용해서 출력되는 내용을 조정할 수 있다.
##cols를 사용해서 출력되는 칼럼의 개수를 제한할 수 있다!
<table>
{% tablerow product in collection.products cols:2 %} #테이블에 4개의 row(열)가 있고 5개의 column(행)이 있다로 하면
{{ product.title }} #4개의 각각의 열에서 칼럼은 2개까지 출력된다. 따라서 총 8개만 출력될 것
{% endtablerow %}
</table>
##limit를 사용해서 특정 인덱스에 도달했을 때 반복문 중단시키기
{% tablerow product in collection.products cols:2 limit:3 %}
{{ product.title }}
{% endtablerow %}
##offset을 사용해서 특정 인덱스부터 반복문을 수행할 수 있다.
{% tablerow product in collection.products cols:2 offset:3 %}
{{ product.title }}
{% endtablerow %}
##range를 사용해서 반복되는 값의 범위를 설정할 수 있다. 이때 범위는 숫자와 문자열 모두 사용해 지정할 수 있다.
<table>
{% tablerow i in (3..5) %}
{{ i }}
{% endtablerow %}
</table>
{% assign num = 4 %} #num이라는 변수에 4를 지정하고
<table>
{% tablerow i in (1..num) %} #나중에 num을 사용해서 범위를 설정할 수 있다. 숫자처럼 활용 가능~!
{{ i }}
{% endtablerow %}
</table>
2.3 Theme Tags: Theme을 생성할 때 사용하는 태그¶
(1) comment: Liquid templete 안에서 주석과 같은 역할을 할 수 있다. {% comment %} 내용 {% endcomment %}의 형식이다!
## ,esquire을 화면에 출력하고 싶지 않을 때 comment태그로 감싸준다!
My name is Wilson Abercrombie{% comment %}, esquire {% endcomment %}
>> My name is Wilson Abercrombie
(2) raw: 태그 명령을 수행하지 못하게 하는 태그.
{% raw %}
In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.
{% endraw %}
>> In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.
(3) liquid: case/when의 경우와 같이 여러 태그를 써야 할 때 좀 더 간결하게 작성할 수 있게 도와주는 태그. 일일이 {% %}쓸 필요가 없어진다.
{% liquid
case section.blocks.size
when 1
assign column_size = ''
when 2
assign column_size = 'one-half'
when 3
assign column_size = 'one-third'
else
assign column_size = 'one-quarter'
endcase %}
(4) echo: {{ }}과 하는 역할은 같지만, liquid태그 안에서만 사용하며 filters를 사용해서 출력값의 형태에 변화를 줄 수 있다!
{% liquid
for product in collection.products
echo product.title | capitalize
endfor %}
>> Hat Shirt Pants #product의 이름을 출력하나 capitalize filter를 적용해 맨 앞 글자를 대문자로 바꿔 출력한다.
(5) paginate: 블로그 글이 여러 개 있을 때 여러 페이지로 쪼개주는 태그. loop가 한 페이지당 50개까지 가능하기 때문에 필수다!
파라미터로는 by가 있는데, 1에서 50까지의 숫자 중에서 선택하면 한 페이지당 보여주는 결과값의 개수를 설정할 수 있다.
##paginate코드는 for태그를 감싸고, 이 for태그는 분할할 대상을 표현하는 데 사용한다.
{% paginate collection.products by 5 %} #한 페이지당 5개의 결과를 보여주겠다는 것을 by태그로 표현했다.
{% for product in collection.products %}
<!--show product details here -->
{% endfor %}
{% endpaginate %}
(6) layout: 레이아웃 태그를 사용하면 Layout폴더에 저장해놓은 다른 theme을 사용할 수 있게 된다.
정의하지 않으면 디폴트 theme이 사용된다. 레이아웃 파일을 사용하고 싶지 않으면 none이라고 적어주면 된다.
{% layout 'full-width' %}
{% layout none %}
(7) render: snippets폴더 안에 들어있는 코드 조각을 불러올 수 있게 하는 태그. snippet은 '작은 조각'이라는 의미라고 한다.
##snippets폴더 안에 들어있는 name이라는 snippet을 불러오기
##확장자 표시(.liquid)를 할 필요가 없다.
{% render 'snippet-name' %}
아직 배우지는 않았지만 variable tags를 사용해서 render 태그의 파라미터를 설정할 수 있다.
with, as 와 for, as를 사용해서도 render의 파라미터를 설정한다.
##variable tags
{% assign my_variable = 'apples' %}
{% render 'name', my_variable: my_variable, my_other_variable: 'oranges' %}
##with, as
{% assign featured_product = all_products['product_handle'] %}
{% render 'product' with featured_product as product %} #product 변수가 부모 템플릿 안의 featured_product의 값을 저장한다.
##for, as
{% assign variants = product.variants %} #이건 아직 뭔 말인지 잘 모르겠당
{% render 'variant' for variants as variant %}
(8) style: 리퀴드의 {% style %} 태그는 HTML의 style태그의 기능을 한다.
{% assign variants = product.variants %}
{% render 'variant' for variants as variant %}
2.4 Variable Tags: Liquid 변수를 생성할 때 사용하는 태그¶
(1) assign: 변수 이름을 직접 지정하고 값을 저장할 때 사용한다.
지정된 변수는 문자열도 되고 불리언(true, false)도 저장할 수 있다. 불리언일때는 ''로 감싸지 않는다. ('true'로 쓰지 않음)
{% assign favorite_food = 'apples' %} #favorite_food라는 변수를 만들고 그 안에 문자열 apple을 저장
My favorite food is {{ favorite_food }}. #출력하고 싶은 문장 안에 {{변수}}를 써서 활용할 수 있다.
>>My favorite food is apples.
##Boolean
{% assign first_time_visitor = true %}
{% if first_time_visitor == true %}
Welcome to the site!
{% endif %}
(2) capture: caupture을 사용해서 변수를 생성할 수 있다. 문자열처럼 저장된다.
assign으로 생성한 변수들을 사용해서 복잡한 문자열을 만들 수 있게 도와준다!
{% assign favorite_food = 'pizza' %}
{% assign age = 35 %}
{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}. #앞에서 생성한 변수를 사용해서 문자열을 저장한 변수 about_me를 생성할 수 있다.
{% endcapture %}
{{ about_me }}
>> 1 I am 35 and my favorite food is pizza.
(3) increment: 생성된 숫자 변수의 값을 초기값에서부터 1씩 증가시킨다.
increment를 사용해서 생성한 변수는 assign, capture로 생성한 변수들과 분리해서 사용해야 한다.
decrement은 개념은 똑같지만 값은 반대로 1씩 작아지는 것이라고 생각하면 된다.
{% assign my_number = 10 %} #먼저 assign을 사용해서 my_number 변수의 초기값을 지정해준다.
{% increment my_number %} #그 뒤에 increment를 사용해서 my_number의 값을 1씩 증가시킨다.
{% increment my_number %}
{% increment my_number %}
{{ my_number }}
3 Filters¶
filter는 출력되는 값들(숫자, 문자열, 변수, 그리고 객체)을 변형시키는 도구하고 생가하면 된다. 출력 태그인 {{ }} 안에서 | 기호 뒤에 명시된다.
여러 필터를 동시에 사용하는 것도 가능하며, 왼쪽에서 오른쪽의 방향으로 실행된다. 어떤 필터는 실행을 위해 파라미터가 필요하기도 하다.
이것도 뭐 object와 같이 종류가 많아서 그냥 간단히 적기만 하려고 한다.
https://shopify.dev/api/liquid/filters 와 https://shopify.github.io/liquid/filters/abs/ 를 참고하자!!
3.1 Array Filters: 출력되는 배열을 변화시키는 필터¶
(1) join: 배열 안의 요소들을 연결하는 방식을 선택할 수 있다. 어떻게 나열한 것인지 파라미터를 지정해야 한다. (쉼표 같은 걸로)
(2) first: 배열의 가장 첫번째 객체를 출력한다.
(3) last: 배열의 가장 마지막 객체를 출력한다. 만약 배열이 아니라 문자열에 적용되면, 가장 마지막 문자(알파벳)가 출력된다.
보통 {{ }} 안의 | 기호 뒤에 last를 적어서 사용하지만 {% %} 안에서 사용해야 할 경우도 있는데, 그럴때는 아래와 같이 점(.)을 사용해서 표현한다.
{% if product.tags.last == "sale"%}
This product is on sale!
{% endif %}(4) concat: concatenate(연결하다)에서 따온 이름. 서로 다른 배열들을 연결하는 필터이다.
주의할 점은 자동으로 중복되는 객체들을 제거하지 않는다는 것. 그럴 땐 uniq필터를 추가로 적용하면 중복되는 요소를 제거할 수 있다!
그리고 세 개 이상의 배열도 연결할 수 있다. | concat: 배열이름1 | concat: 배열이름2 ... 이런 식으로 적으면 된다.
{% assign fruits = "apples, oranges, peaches, tomatoes" | split: ", " %}
{% assign vegetables = "broccoli, carrots, lettuce, tomatoes" | split: ", " %}
{% assign plants = fruits | concat: vegetables %}
{{ plants | join: ", " }}(5) index: 인덱스는 배열 안에 들어있는 객체들의 장소 정보와 같다. 0부터 이름표가 붙으며, [인덱스번호]로 표현하면 된다.
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags[2] }}
>> womens(6) map: map은 어떤 객체가 수많은 특성property를 가지고 있을 때, 출력하고 싶은 특성만 고를 수 있게 도와준다.
{% assign all_categories = site.pages | map: "category" %} #사이트 페이지 안에 있는 수많은 특성들 중 category만 원할 때
{% for item in all_categories %} #all_categories 변수는 map필터로 인해 category정보만 담고있다.
- {{ item }} #따라서 item변수는 category의 내용만 출력하게 된다!
{% endfor %}(7) reverse: 배열을 뒤집어서 출력하게 하는 필터다.
(8) size: 문자열을 구성하는 단어수나 배열 안에 들어있는 객체들의 갯수를 반환하는 필터이다
위에서 last 필터가 그랬건 것처럼 태그 안에 점(.)을 사용해서 사용할 수도 있다!
{% if collections.frontpage.products.size > 10 %}
There are more than 10 products in this collection!
{% endif %}(9) sort: 배열 안에 들어있는 객체들의 특성을 사용해서 객체를 분류할 수 있게 하는 필터다.
<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
{{ product.title }}
{% endfor %}
>> A B a b #sort필터는 대소문자를 구분한다.(10) where: 출력되는 객체의 조건을 설정하는 필터. 객체 안의 특성값을 활용해서 지정한다.
All products:
{% for product in collection.products %}
- {{ product.title }}
{% endfor %}
>> All products:
- Vacuum
- Spatula
- Television
- Garlic press
{% assign kitchen_products = collection.products | where: "type", "kitchen" %}
Kitchen products:
{% for product in kitchen_products %}
- {{ product.title }}
{% endfor %}
>> Kitchen products:
- Spatula
- Garlic press(11) uniq: 배열 안에 중복되는 객체를 없애준다.
3.2 Color Filters: CSS color string의 속성을 바꾸는 필터¶
(1) color_to_rgb: CSS color string을 CSS rgb()포맷으로 바꾸는 필터.
rgb말고 alpha값도 있으면 자동으로 rgba()로 변환한다.
(2) color_to_hsl: CSS color string을 CSS hsl() 포맷(색상, 채도, 명도로 표현하는 형식)으로 바꿔준다.
alpha가 있으면 hsla()로 변환한다.
(3) color_to_hex: CSS color string을 hex6포맷으로 바꿔준다.hex는 rgb를 표현하는 방식으로, hex6은 6자리로 표현함을 의미한다.
항상 6자리로 출력되기 때문에 alpha가 있어도 그건 출력값에 반영되지 않는다.
(4) color_extract: 어떤 색상이 있으면 그 색상의 특성 중 일부를 출력할 수 있게 하는 필터
{{ '#7ab55c' | color_extract: 'red' }} # #7ab55c의 rgb중 r의 값만 알고싶을 때
>> 122(5) color_modify: 주어진 색상의 구성요소를 변경할 수 있다.
이때 변경 가능한 범위가 있으니 참고하자. (rgb는 0~255, alpha는 0~1)
또한 입력하는 색상 정보가 hex(alpha가 반영되지 않음)형식이라고 하더라도 alpha값을 변경할 수 있다.
hex는 변경된 정보를 반영하는 것이 불가능하기 때문에 출력은 rgba()포맷으로 된다.
{{ '#7ab55c' | color_modify: 'red', 255 }} #red를 기존의 122에서 255로 바꾸겠다는 의미이다.
>> #ffb55c(6) 그 밖에 color_lighten, color_darken, color_saturate, color_desaturation으로도 색상 정보를 변경할 수 있다.
변경 가능한 값의 범위는 hue가 0~360, (de)saturation과 darkness가 0~100이다.
(7) color-mix: 입력한 색상에다가 다른 색상을 섞을 수 있다. 심지어 섞는 정도blend factor도 정할 수 있다. (팔레트 같다!)
두 색을 섞을 때 한쪽에만 alpha가 있으면 없는 쪽의 alpha값은 1로 가정한다.
{{ '#7ab55c' | color_mix: '#ffc0cb', 50 }}(8) color_contrast: 서로 다른 두 색상의 명함비를 계산한다. 만약 명암비가 3.5:1이라면 출력값은 3.5이다.
명암비를 계산할 때 입력하는 색상의 순서는 상관이 없다. 필터가 알아서 더 밝은 쪽과 어두운 쪽을 구분한다.
보면 권장하는 명암비가 따로 존재하는 것 같다.
{{ '#495859' | color_contrast: '#fffffb' }}(9) color_difference, brightness_difference: 서로 다른 두 색상의 색상차와 밝기차를 계산하는 필터.
전자는 500보다 큰 값을 권장하고, 후자는 125보다 큰 값을 권장하고 있는 듯하다.
{{ '#ff0000' | color_difference: '#abcdef' }}
{{ '#fff00f' | brightness_difference: '#0b72ab' }}3.3 Font Filters: Font를 불러오고 변화를 주기 위한 필터¶
(1) font_modify: 이 필터는 두 개의 입력값argument을 넣어야 한다.
첫 번째 전달인자argument에는 변경되는 특성property을, 두 번째에는 변경할 형식을 적어주변 된다.
# weight특성을 bold로, style특성을 italic으로 바꾸겠다는 뜻이다!
{% assign bold_italic = settings.body_font | font_modify: 'weight', 'bold' | font_modify: 'style', 'italic' %}https://shopify.dev/api/liquid/filters/font-filters 를 보면 바꿀 수 있는 특성과 형식을 확인할 수 있다.
만약 font_modify를 사용해서 기존에 없던 변형된 폰트를 만들고자 한다면 nil(null과 같다)가 반환된다. 그냥 빈 공간으로 출력된다.
이런 상황을 막기 위해서는 {% bolder_font %}의 값을 확인하자. 아니면 default 필터를 사용해서 폴백값을 설정하면 된다.
폴백 값fallback value는 만약 변경한 설정이 사용불가능한 상태일 때 대체해서 사용할 값을 말한다. (대신해서 투입되는 값이다.)
(2) font_face, font_url: 흠 이건 아직 CSS를 공부하지 못해서 뭔 소리인지 모르겠다. 패쓰~!
3.4 HTML Filters: Liquid에서 HTML 요소를 생성하기 위한 필터¶
(1) image_tag: 이미지 태그를 생성한다. width와 height 전달인자argument를 포함한 image_url 필터가 동반되어야 한다.
{{ settings.favicon | image_url: width: 2000 | image_tag }}(2) aspect ratio: 명시한 width, height가 없으면 자동적으로 image_url에 명시된 크기로 이미지가 조정된다.
(3) 아오 봐야하는 필터가 너무 많아서 머리가 아프다. 일단 홅어보는 정도로 나머지를 확인하고 나중에 필요할 때 정독해야겠다.
4 Objects¶
Liquid에서 object는 우리가 보는 화면에 뜨는 컨텐츠의 형태를 결정하는데 필요한 요소다.
object는 여러개의 특성property로 이루어져 있는데, 선택되는 특성에 따라 우리 눈에 보이는 내용이 달라진다.
예를 들어 product라는 object에는 title이라는 특성이 포함되어 있는데, 그걸 {{product.title}}이라고 표현하면
우리가 보는 화면에는 title의 값이 출력되어 보인다.
아니 근데 이 object를 일일이 나열하는 건 효율 낭비인 것 같다.
https://shopify.dev/api/liquid/objects 이 링크로 들어가면 object종류가 좌르륵 나오니 확인해보자!
https://shopify.github.io/liquid/basics/types/ 이 링크는 liquid를 개발한 회사의 페이지인데 object의 type를 설명해놓았다.