<div id="readability-page-1" class="page"><cite>나를찾는아이</cite>
 2023. 12. 30. 09:52
 <div>
 <a href="https://shopify.github.io/liquid/" target="_blank" rel="noopener">https://shopify.github.io/liquid/</a>
<figure id="og_1694661954300" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Liquid template language" data-og-description="Documentation for the Liquid template language, created by Shopify." data-og-host="shopify.github.io" data-og-source-url="https://shopify.github.io/liquid/" data-og-url="https://shopify.github.io/liquid/" data-og-image="https://scrap.kakaocdn.net/dn/dfVTy0/hyTVWBNAZb/u3lJMqqBtVpOX0oOjUw6cK/img.png?width=2424&amp;height=1050&amp;face=0_0_2424_1050,https://scrap.kakaocdn.net/dn/bKgiCW/hyTV0Yvq1T/kgNElt9AypYXb2shiFkGEk/img.png?width=1100&amp;height=600&amp;face=0_0_1100_600,https://scrap.kakaocdn.net/dn/dS1aJM/hyTVWaIyr9/7KKZR5qDpw9darKKXqjGfk/img.png?width=998&amp;height=231&amp;face=0_0_998_231"><a href="https://shopify.github.io/liquid/" target="_blank" rel="noopener" data-source-url="https://shopify.github.io/liquid/">

<div>
Liquid template language
Documentation for the Liquid template language, created by Shopify.
shopify.github.io
</div>
</a><img src="https://scrap.kakaocdn.net/dn/dfVTy0/hyTVWBNAZb/u3lJMqqBtVpOX0oOjUw6cK/img.png?width=2424&amp;height=1050&amp;face=0_0_2424_1050,https://scrap.kakaocdn.net/dn/bKgiCW/hyTV0Yvq1T/kgNElt9AypYXb2shiFkGEk/img.png?width=1100&amp;height=600&amp;face=0_0_1100_600,https://scrap.kakaocdn.net/dn/dS1aJM/hyTVWaIyr9/7KKZR5qDpw9darKKXqjGfk/img.png?width=998&amp;height=231&amp;face=0_0_998_231"></figure>
Liquid는 쇼피파이에서 만든 템플릿 언어로 동적 콘텐츠를 가져오는데 사용됩니다

2006년부터 시작해서 지금은 꽤 많은 곳들이 liquid를 사용하고 있습니다


저도 shopify의 테마를 고칠때 쓰거나,

braze 를 통한 인앱메시지를 작성할때 liquid를 사용해보았는데요




자주쓰이는 문법을 정리해보겠습니다


제어문

전형적인 if, elseif, else 구문입니다
<pre id="code_1694662135762" data-ke-language="javascript" data-ke-type="codeblock"><code>{% if customer.name == "kevin" %}
 Hey Kevin!
{% elsif customer.name == "anonymous" %}
 Hey Anonymous!
{% else %}
 Hi Stranger!
{% endif %}</code></pre>


특정 단어를 포함하고 있는지&nbsp;
<pre id="code_1694662159206" data-ke-language="javascript" data-ke-type="codeblock"><code>{% if product.tags contains 'healing' %}
This potion contains restorative properties.
{% endif %}</code></pre>



<pre id="code_1694662168941" data-ke-language="javascript" data-ke-type="codeblock"><code>{% if product.title == "Awesome Shoes" %}
 These shoes are awesome!
{% endif %}</code></pre>


<pre id="code_1694662218504" data-ke-language="bash" data-ke-type="codeblock"><code>{% if {{targeted_device.${platform}}} == "ios" %}
{% assign link = "ios://link" %}
{% elsif {{targeted_device.${platform}}} == "android" %}
{% assign link = "android://link" %}
{% else %}
{% assign link = "https://web.link" %}
{% endif %}</code></pre>



그리고 값이 있는지 없는지를 파악하여 값이 없는 경우 default의 값을 출력합니다
<pre id="code_1694662188732" data-ke-language="javascript" data-ke-type="codeblock"><code>{{ ${first_name} | default: '고객' }}</code></pre>


liquid는 배열을 생성하려면 문자열을 split 하여야 합니다 다른 방법이 없습니다

split를 하면 for in 구문을 사용할수 있습니다
<pre id="code_1694662234296" data-ke-language="javascript" data-ke-type="codeblock"><code>{% assign beatles= "John, Paul, George, Ringo" |split: ", " %}

{% for member in beatles %}
 {{ member }}
{% endfor %}</code></pre>


배열의 갯수도 size 속성을 통해 가져올수 있습니다
<pre id="code_1694662242378" data-ke-language="javascript" data-ke-type="codeblock"><code>{% assign my_array= "apples, oranges, peaches, plums" |split: ", " %}

{{ my_array.size }}</code></pre>


소문자로 만드는 유틸
<pre id="code_1694662250873" data-ke-language="javascript" data-ke-type="codeblock"><code>{{ "Parker Moore" | downcase }}</code></pre>


숫자에 콤마를 찍는 유틸
<pre id="code_1694662259290" data-ke-language="javascript" data-ke-type="codeblock"><code>{{ result.data.productDetail.salesPrice | number_with_delimiter }}</code></pre>


그리고 산술연산
<pre id="code_1694662267546" data-ke-language="javascript" data-ke-type="codeblock"><code>{{ 4 | minus: 2 }}
{{ 16 | minus: 4 }}
{{ 183.357 | minus: 12 }}
{{ 16 | divided_by: 4 }}</code></pre>


그리고 string 조합
<pre id="code_1694662274474" data-ke-language="javascript" data-ke-type="codeblock"><code>{{ "/my/fancy/url" | append: ".html" }}

// /my/fancy/url.html</code></pre>


 
 
 </div></div>

나를 찾는 아이

Kyoung min, Kim

https://shopify.github.io/liquid/
Liquid는 쇼피파이에서 만든 템플릿 언어로 동적 콘텐츠를 가져오는데 사용됩니다
 
2006년부터 시작해서 지금은 꽤 많은 곳들이 liquid를 사용하고 있습니다
 
 
저도 shopify의 테마를 고칠때 쓰거나,
 
braze 를 통한 인앱메시지를 작성할때 liquid를 사용해보았는데요
 
 
 
 
자주쓰이는 문법을 정리해보겠습니다
 
 
제어문
 
전형적인 if, elseif, else 구문입니다
{% if customer.name == "kevin" %}
  Hey Kevin!
{% elsif customer.name == "anonymous" %}
  Hey Anonymous!
{% else %}
  Hi Stranger!
{% endif %}
 
 
특정 단어를 포함하고 있는지 
{% if product.tags contains 'healing' %}
This potion contains restorative properties.
{% endif %}
 
 
 
{% if product.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endif %}
 
 
{% if {{targeted_device.${platform}}} == "ios" %}
{% assign link = "ios://link" %}
{% elsif {{targeted_device.${platform}}} == "android" %}
{% assign link = "android://link" %}
{% else %}
{% assign link = "https://web.link" %}
{% endif %}
 
 
 
그리고 값이 있는지 없는지를 파악하여 값이 없는 경우 default의 값을 출력합니다
{{ ${first_name} | default: '고객' }}
 
 
liquid는 배열을 생성하려면 문자열을 split 하여야 합니다 다른 방법이 없습니다
 
split를 하면 for in 구문을 사용할수 있습니다
{% assign beatles= "John, Paul, George, Ringo" |split: ", " %}
{% for member in beatles %}
  {{ member }}
{% endfor %}
 
 
배열의 갯수도 size 속성을 통해 가져올수 있습니다
{% assign my_array= "apples, oranges, peaches, plums" |split: ", " %}
{{ my_array.size }}
 
 
소문자로 만드는 유틸
{{ "Parker Moore" | downcase }}
 
 
숫자에 콤마를 찍는 유틸
{{ result.data.productDetail.salesPrice | number_with_delimiter }}
 
 
그리고 산술연산
{{ 4 | minus: 2 }}
{{ 16 | minus: 4 }}
{{ 183.357 | minus: 12 }}
{{ 16 | divided_by: 4 }}
 
 
그리고 string 조합
{{ "/my/fancy/url" | append: ".html" }}
// /my/fancy/url.html

shopify가 만든 Liquid를 알아보자

댓글