[Shopify] Liquid의 HTML filter를 정리해봤습니다.
입문
이번 보도는 Shopify의 HTML filter 전체를 요약해 보았다.
참조여기.
HTML filter
HTML 필터는 Liquid의 속성과 상점의 assets(이미지와 애니메이션 등을 저장한 파일)에 따라 HTML 요소(HTML 라벨 등)를 만드는 필터입니다.
HTML filters 를 살펴보겠습니다.
img_tag
imgタグを作成します。 {{ 'smirking_gnome.gif' | asset_url | img_tag }}
img_tag 필터는alt 라벨, 클래스 이름,size 세 가지 파라미터를 받아들일 수 있습니다.
첫 번째 매개 변수는alt 텍스트이고, 두 번째는 태그에 적용되는 CSS 클래스나 클래스 이름이며, 세 번째는 이미지 크기입니다.{{ 'smirking_gnome.gif' | asset_url | img_tag: 'Smirking Gnome', 'cssclass1 cssclass2' }}
크기 매개변수는 URL 필터img_url와 동일합니다.img_url 필터는 이미지의 URL을 반환하고 이미지 크기에 대한 매개변수를 수신할 수 있는 URL 필터입니다.{{ product | img_url: '100x100' }}
https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_100x100.jpeg?v=1459175177
또한 img_tag 필터는 img_url 필터와 함께 사용할 수 없습니다.
이 두 필터를 사용하면 img_url 필터는 img_tag 필터의size 파라미터를 덮어씁니다.img_tag 필터는 다음 객체에도 사용할 수 있습니다.
각 객체에 등록된 이미지를 내보냅니다imgタグ. product variant line item collection image {{ product | img_tag }}
{{ variant | img_tag: 'alternate text' }}
{{ line_item | img_tag: 'alternate text', 'css-class' }}
{{ image | img_tag: 'alternate text', 'css-class', 'small' }}
{{ collection | img_tag: 'alternate text', 'css-class', 'large' }}
currency_selector
顧客がサイト上で使用できる通貨を選択するためのドロップダウンリストを生成します。
currency_selerctor 필터는 currency form 의 form 객체에 사용해야 합니다.
example.liquid{% form 'currency' %}
{{ form | currency_selector: class: 'my_special_class', id: 'Submit' }}
{% endform %}
payment_button
商品のdynamic chekout button（今すぐ購入ボタン）を作成します。
이 필터는 product form 의 form 객체에 사용해야 합니다.product form 매개변수에 제품 객체를 지정하여 카트에 상품을 추가하는 양식을 작성합니다.{{ form | payment_button }}
script_tag
scriptタグを生成します。 {{ 'shop.js' | asset_url | script_tag }}
stylesheet_tag
stylesheetタグを生成します。 {{ 'shop.css' | asset_url | stylesheet_tag }}
time_tag
timeタグを生成します。다음 예제에서는 타임 스탬프를 timeタグ 로 변환합니다.{{ article.published_at | time_tag }}
time_tag 필터는 Rudy의 strftime 방법과 같은 매개변수를 수신할 수 있습니다.%a(생략된 요일을 나타내는 etc. "Sun")과%b(생략된 달을 나타내는 etc. "Jan") 등 단락 형식의 목록은 Rudy 문서과strfti.me 사이트에 기재되어 있다.{{ article.published_at | time_tag: '%a, %b %d, %Y' }}
다음은 time_tag 필터의 매개 변수format와 datetime에 대한 설명입니다.
format
time_tag 파라미터를 필터에 전달함으로써 프론트 데스크톱 언어를 저장하는 날짜 형식을 출력할 수 있습니다.
사용 가능한 형식은 다음과 같습니다. abbreviated_date basic date date_at_time default on_date {{ article.published_at | time_tag: format: 'date' }}
다음 표에는 다양한 언어 format 옵션의 미리보기가 나와 있습니다.
format
English
French
Japanese
abbreviated_date
Dec 31, 2018
31 déc 2018
2018년 12월 31일
basic
12/31/2018
31/12/2018
2018/12/31
date
December 31, 2018
31 décembre 2018
2018년 12월 31일
date_at_time
December 31, 2018 at 1:00 pm
31 décembre 2018 à 13:00
2018년 12월 31일 13:00
default
Monday, December 31, 2018 at 1:00 pm -0500
lundi 31 décembre 2018 à 13:00 -0500
2018년 12월 31일(월) 13:00-0500
on_date
on Dec 31, 2018
le 31 déc 2018
2018년 12월 31일
날짜 형식도 주제의 로컬 설정에서 정의할 수 있습니다.
theme/locales/en.json"date_formats": {
"month_day_year": "%B %d, %Y"
}
etc.liquid{{ article.published_at | time_tag: format: 'month_day_year' }}
datetime
format 매개변수에 지정된 strftime shorthand formats 에 기록된 단락 형식을 사용하여 내보낸 datetime 태그의 <time> 속성에 사용자 정의 형식을 사용할 수 있습니다.{{ article.published_at | time_tag: '%a, %b %d, %Y', datetime: '%Y-%m-%d' }}
payment_type_svg_tag
datetime
支払いタイプの画像の<svg>タグを返します。변수와 함께 사용하고 payment_type_svg_tag 파라미터를 제공함으로써 클래스 속성을 shop.enabled_payment_types는 상점에서 사용할 수 있는 신용카드, 비밀번호, 지불 방식의 수조를 되돌려주는 샵 대상의 한 방법이다.{% for type in shop.enabled_payment_types %}
{{ type | payment_type_svg_tag, class: 'custom-class' }}
{% endfor %}
...
...
끝날 때
이번 보도는 여기까지입니다.
고생하셨습니다.
Shopify 응용 프로그램 소개
Shopify 응용 프로그램인'상품 페이지 발매 예고 응용 프로그램'은 상품 페이지를 살 수 없는 상태에서 발매 시간을 예고할 수 있는 응용 프로그램이다.Shopify에서 Coming Soon 기능을 사용할 수 있습니다.
Reference
이 문제에 관하여([Shopify] Liquid의 HTML filter를 정리해봤습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/eijiSaito/items/2a30415457e32f34eb72
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
HTML 필터는 Liquid의 속성과 상점의 assets(이미지와 애니메이션 등을 저장한 파일)에 따라 HTML 요소(HTML 라벨 등)를 만드는 필터입니다.
HTML filters 를 살펴보겠습니다.
img_tag
imgタグを作成します。 {{ 'smirking_gnome.gif' | asset_url | img_tag }}
img_tag 필터는alt 라벨, 클래스 이름,size 세 가지 파라미터를 받아들일 수 있습니다.
첫 번째 매개 변수는alt 텍스트이고, 두 번째는 태그에 적용되는 CSS 클래스나 클래스 이름이며, 세 번째는 이미지 크기입니다.
{{ 'smirking_gnome.gif' | asset_url | img_tag: 'Smirking Gnome', 'cssclass1 cssclass2' }}
크기 매개변수는 URL 필터
img_url와 동일합니다.img_url 필터는 이미지의 URL을 반환하고 이미지 크기에 대한 매개변수를 수신할 수 있는 URL 필터입니다.{{ product | img_url: '100x100' }}
또한
img_tag 필터는 img_url 필터와 함께 사용할 수 없습니다.이 두 필터를 사용하면
img_url 필터는 img_tag 필터의size 파라미터를 덮어씁니다.img_tag 필터는 다음 객체에도 사용할 수 있습니다.각 객체에 등록된 이미지를 내보냅니다
imgタグ.{{ product | img_tag }}
{{ variant | img_tag: 'alternate text' }}
{{ line_item | img_tag: 'alternate text', 'css-class' }}
{{ image | img_tag: 'alternate text', 'css-class', 'small' }}
{{ collection | img_tag: 'alternate text', 'css-class', 'large' }}
currency_selector
顧客がサイト上で使用できる通貨を選択するためのドロップダウンリストを生成します。 currency_selerctor 필터는 currency form 의 form 객체에 사용해야 합니다.example.liquid
{% form 'currency' %}
{{ form | currency_selector: class: 'my_special_class', id: 'Submit' }}
{% endform %}
payment_button
商品のdynamic chekout button（今すぐ購入ボタン）を作成します。 이 필터는 product form 의
form 객체에 사용해야 합니다.product form 매개변수에 제품 객체를 지정하여 카트에 상품을 추가하는 양식을 작성합니다.{{ form | payment_button }}
script_tag
scriptタグを生成します。 {{ 'shop.js' | asset_url | script_tag }}
stylesheet_tag
stylesheetタグを生成します。 {{ 'shop.css' | asset_url | stylesheet_tag }}
time_tag
timeタグを生成します。다음 예제에서는 타임 스탬프를 timeタグ 로 변환합니다.{{ article.published_at | time_tag }}
time_tag 필터는 Rudy의 strftime 방법과 같은 매개변수를 수신할 수 있습니다.%a(생략된 요일을 나타내는 etc. "Sun")과%b(생략된 달을 나타내는 etc. "Jan") 등 단락 형식의 목록은 Rudy 문서과strfti.me 사이트에 기재되어 있다.{{ article.published_at | time_tag: '%a, %b %d, %Y' }}
다음은
time_tag 필터의 매개 변수format와 datetime에 대한 설명입니다.format
time_tag 파라미터를 필터에 전달함으로써 프론트 데스크톱 언어를 저장하는 날짜 형식을 출력할 수 있습니다.사용 가능한 형식은 다음과 같습니다.
{{ article.published_at | time_tag: format: 'date' }}
다음 표에는 다양한 언어
format 옵션의 미리보기가 나와 있습니다.format
English
French
Japanese
abbreviated_date
Dec 31, 2018
31 déc 2018
2018년 12월 31일
basic
12/31/2018
31/12/2018
2018/12/31
date
December 31, 2018
31 décembre 2018
2018년 12월 31일
date_at_time
December 31, 2018 at 1:00 pm
31 décembre 2018 à 13:00
2018년 12월 31일 13:00
default
Monday, December 31, 2018 at 1:00 pm -0500
lundi 31 décembre 2018 à 13:00 -0500
2018년 12월 31일(월) 13:00-0500
on_date
on Dec 31, 2018
le 31 déc 2018
2018년 12월 31일
날짜 형식도 주제의 로컬 설정에서 정의할 수 있습니다.
theme/locales/en.json
"date_formats": {
"month_day_year": "%B %d, %Y"
}
{{ article.published_at | time_tag: format: 'month_day_year' }}
datetime
format 매개변수에 지정된 strftime shorthand formats 에 기록된 단락 형식을 사용하여 내보낸 datetime 태그의 <time> 속성에 사용자 정의 형식을 사용할 수 있습니다.{{ article.published_at | time_tag: '%a, %b %d, %Y', datetime: '%Y-%m-%d' }}
payment_type_svg_tag
datetime 支払いタイプの画像の<svg>タグを返します。변수와 함께 사용하고 payment_type_svg_tag 파라미터를 제공함으로써 클래스 속성을 shop.enabled_payment_types는 상점에서 사용할 수 있는 신용카드, 비밀번호, 지불 방식의 수조를 되돌려주는 샵 대상의 한 방법이다.{% for type in shop.enabled_payment_types %}
{{ type | payment_type_svg_tag, class: 'custom-class' }}
{% endfor %}
...
...
끝날 때
이번 보도는 여기까지입니다.
고생하셨습니다.
Shopify 응용 프로그램 소개
Shopify 응용 프로그램인'상품 페이지 발매 예고 응용 프로그램'은 상품 페이지를 살 수 없는 상태에서 발매 시간을 예고할 수 있는 응용 프로그램이다.Shopify에서 Coming Soon 기능을 사용할 수 있습니다.
Shopify 응용 프로그램인'상품 페이지 발매 예고 응용 프로그램'은 상품 페이지를 살 수 없는 상태에서 발매 시간을 예고할 수 있는 응용 프로그램이다.Shopify에서 Coming Soon 기능을 사용할 수 있습니다.
Reference
이 문제에 관하여([Shopify] Liquid의 HTML filter를 정리해봤습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/eijiSaito/items/2a30415457e32f34eb72텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
