Shopify가 사용하는 Liquid 코드 이해

Liquid가 무엇인지 이해하기

Liquid는 Shopify에서 만든 코딩 언어 템플릿입니다. 또한 오픈 소스 프로그래밍 언어인 Ruby로 작성되었습니다. Liquid는 마침내 GitHub 에서 오픈 소스 프로젝트로 사용할 수 있습니다. Shopify 스토어 를 소유하고 있다면 Liquid가 모든 Shopify 테마의 중추이며 모든 온라인 스토어 페이지에서 동적 콘텐츠를 로드하는 데 사용되기 때문에 확실히 알게 될 것입니다.

​

유동 코드의 구문

Liquid는 HTML과 같은 코드와 구별할 수 있는 읽기 가능한 방식으로 구성되어 있기 때문에 코드를 이해하고 읽기 쉽습니다. 유동 코드는 {{ }}중괄호와 백분율 기호 를 사용합니다 {% %}. 액체 코드는 객체, 태그 및 필터의 3가지 주요 부분을 사용합니다.

​

사물

개체는 Shopify 관리자의 데이터 출력 조각입니다. 객체는 다음과 같이 중괄호로 묶 {{ product.title }}입니다. 따라서 사이트 페이지의 출력은 상점의 항목으로 대체됩니다.

​

태그

유동 태그는 논리 문장에 사용되며 템플릿의 흐름을 제어합니다. 이것은 %기호가 위치하는 곳이며 다음과 같이 텍스트를 둘러싸고 있습니다 . 이것이 의미하는 바는 로직이 페이지에 표시되지 않지만 변수를 할당하고 조건 및 루프를 생성할 수 있다는 것입니다. 예에서 제품이 사용 가능한 경우 사이트 페이지에 가격이 표시되고 출력됩니다. 다음을 사용하여 다른 조건을 설정 하면 항목이 매진이라고 말하면 가격 대신 매진 메시지가 표시됩니다. {% if product.available %}{% else %}

​

필터

필터는 숫자, 문자열, 개체 및 변수의 출력을 수정하는 데 사용됩니다. 색상의 예, 예: {{ '#7abb55c' | colour_lighten: 30 }}. 이렇게 하면 출력이 로 표시됩니다 #d0e5c5. 이는 .보다 30% 더 가볍습니다 #7abb55c.

​

유용한 정보

Liquid를 이해하고 익숙해지려면 시간이 걸립니다. 더 읽기 쉬운 코드이기 때문에 코드가 무엇을 하는지 살펴보고 추론하는 것이 더 쉽습니다. 추가 정보는 Shopify의 도움말 페이지 또는 태그, 필터, 개체 및 Liquid 코드의 기본 사항을 유사하게 설명하는 이 참조 페이지 를 통해 자세히 읽을 수 있습니다.

​

Liquid를 이해해야 하는 이유

Liquid를 이해하면 상점 소유자로서 도움이 될 것이며 테마가 무엇을 하는지 깨닫는 데 도움이 될 것입니다. 개발자나 코더/엔지니어가 아니더라도 스스로 해결하거나 문제가 어디에서 발생하는지 이해할 수 있습니다. 이렇게 하면 나중에 시간과 돈을 절약할 수 있습니다!