{%- comment -%} `tag_name`에서 앞뒤 공백을 제거합니다. {%- endcomment -%} {%- assign tag_name = tag_name | strip -%} {%- comment -%} `tag_name: ''` 케이스를 처리합니다. {%- endcomment -%} {%- if tag_name and tag_name.size < 1 -%} {%- assign tag_name = false -%} {%- endif -%} {%- if tag_name -%} <{{ tag_name }} {{- attrs | to_attrs -}} {{- 추가_속성 -}} {%- 자체_닫힘 == 참이면 -%} {{- ' /' -}} {%- endif -%} > {%- endif -%} {%- 자체_닫힘 == 참이 아니면 -%} {%- ifslot -%} {%- slot -%} {%- else -%} {{- inner_html -}} {%- endifslot -%} {%- if tag_name -%} {%- endif -%} {%- endunless -%}{%- comment -%} 이 구성 요소는 `img` 태그나 `div style="background-..."`를 생성할 수 있습니다.
{%- endcomment -%} {%- assign is_global_asset = is_global_asset | default: false -%} {%- if bg -%} {%- comment -%} 배경 이미지 {%- endcomment -%} {%- assign tag_name = tag_name | default: 'div' -%} {%- assign self_closing = self_closing | default: false -%} {%- comment -%} 우리는 속성을 직접 렌더링하고 `style`을 필터링합니다. {%- endcomment -%} {%- assign attr_list = attrs | to_attrs: list: true -%} {%- capture additional_attrs -%} {%- comment -%} 컨텍스트에서 속성을 포함합니다. {%- endcomment -%} {%- for attr in attr_list -%} {%- except attr[0] == 'style' -%} {{- ' ' -}} {{- attr[0] -}} {%- if attr[1].size > 0 -%} ="{{- attr[1] -}}" {%- endif -%} {%- endunless -%} {%- endfor -%} {{- ' ' -}} style=" {%- comment -%} 배경 스타일을 렌더링합니다. 이미지가 없으면 src를 사용하세요. {%- endcomment -%} {%- 할당 has_bg_image = false -%} {%- 할당 has_bg_size = false -%} {%- 할당 has_bg_position_x = false -%} {%- 할당 has_bg_position_y = false -%} {%- 할당 has_bg_repeat = false -%} {%- for prop in bg -%} {%- case prop[0] -%} {%- when 'image' -%} {%- 할당 has_bg_image = true -%} {%- when 'size' -%} {%- 할당 has_bg_size = true -%} {%- when 'position' -%} {%- 할당 has_bg_position_x = true -%} {%- 할당 has_bg_position_y = true -%} {%- when 'position-x' -%} {%- 할당 has_bg_position_x = true -%} {%- when '위치-y' -%} {%- 할당 has_bg_position_y = true -%} {%- '반복'할 때 -%} {%- 할당 has_bg_repeat = true -%} {%- endcase -%} 배경-{{- prop[0] -}}: {{- prop[1] -}}; {%- endfor -%} {%- without has_bg_image -%} 배경 이미지: url('{{- src | asset_url: global: is_global_asset -}}'); {%- endunless -%} {%- without has_bg_size -%} 배경 크기: cover; {%- endunless -%} {%- without has_bg_position_x -%} 배경-위치-x: 중앙; {%- endunless -%} {%- without has_bg_position_y -%} 배경-위치-y: 중앙; {%- endunless -%} {%- without has_bg_repeat -%} background-repeat: no-repeat; {%- endunless -%} {%- comment -%} 스타일 속성에서 스타일을 추가합니다. {%- endcomment -%} {{- attrs.style -}} " {%- endcapture -%} {%- comment -%} 속성을 제거하면 두 번 렌더링되지 않습니다. {%- endcomment -%} {%- assign attrs = nil -%} {%- else -%} {%- comment -%} 일반 img 태그 {%- endcomment -%} {%- assign tag_name = 'img' -%} {%- assign self_closing = true -%} {%- capture additional_attrs -%} {%- if srcset.size > 0 -%} {{- ' ' -}} srcset="{{ srcset }}" {%- endif -%} {%- if sizes.size > 0 -%} {{- ' ' -}} sizes="{{ sizes }}" {%- endif -%} {{- ' ' -}} alt="{{ alt }}" {{- ' ' -}} src="{{ src | asset_url: global: is_global_asset }}" {%- endcapture -%} {%- endif -%} {%- include 'atom/element', tag_name: tag_name, self_closing: self_closing, additional_attrs: additional_attrs -%}{%- group_attrs 할당 = group.attrs | merge_props: 클래스: 'listcard__group' -%} {%- tag_name 할당 = 'div' -%} {%- 접을 수 있는 경우 -%} {%- tag_name 할당 = 'details' -%} {%- endif -%} <{{ tag_name }} {{ group_attrs | to_attrs }}> {% (headline == false 또는 group.headline == nil 또는 group.headline.size == 0이 아닌 경우) %} {% (접을 수 있는 경우) %} {% 끝 %} {{ 그룹.헤드라인 }} {접을 수 있는 경우 %} {% endif %} {% endunless %} {% for item in group.cards %} {%- include 'cardlist/listcard/item' -%} {% endfor %} {% (group.group_button_link == nil 또는 group.cards.size < 2 %가 아닌 경우)} {{ 그룹.그룹_버튼_라벨 }} {% 끝없이 %}{% assign card_count = forloop.index %}
{%- capture curr_class -%}
listcard__card
{%- unless item.id == nil -%}
{{- ' ' -}} listcard__card--{{ item.id }}
{%- endunless -%}
{%- unless card_class == nil or card_class.size == 0 -%}
{{- ' ' -}} listcard__card--{{ card_class }}
{%- endunless -%}
{%- endcapture -%}
{%- assign card_attrs = item.attrs | merge_props: class: curr_class -%}
{% if singlelink %}
{%- assign card_attrs = card_attrs | merge_props: href: item.ctas[0].link -%}
{% endif %}
{% if linkcard %}<a {{ card_attrs | to_attrs }}>{% elsif singlelink %}<a {{ card_attrs | to_attrs }}>{% else %}<div {{ card_attrs | to_attrs }}>{% endif %}
{%- unless headline == false or item.headline == nil or item.headline.size == 0 -%}
<h2 class="listcard__card-headline">{{ item.headline }}</h2>
{%- endunless -%}
{% unless subheadline == false or item.subheadline == nil or item.subheadline.size == 0 %}
<h3 class="listcard__card-subheadline">{{ item.subheadline }}</h3>
{% endunless %}
{% unless images == false or item.images == nil or item.images.size == 0 %}
{% if compare == true %}
<div class="listcard__card-images">
<div class="listcard__comparison comparison comparison--popup">
<figure style="background-image: url('{{ item.compare_img_1 | asset_url }}')">
<a class="listcard__card-image-link listcard__card-image-link--before" href="#view-{{ item.id }}">Before</a>
<div
class="divisor"
style="
background-image: url('{{ item.compare_img_2 | asset_url }}');
clip-path: inset(0 0 0 50%);
">
<a class="listcard__card-image-link listcard__card-image-link--after" href="#view-{{ item.id }}">After</a>
</div>
</figure>
<input type="range" min="0" max="100" value="50" class="slider">
</div>
<div id="view-{{ item.id }}" class="modal-window comparison">
<a href="#" class="modal-close">Close</a>
<div class="modal-window__wrapper">
<figure style="background-image: url('{{ item.compare_img_1 | asset_url }}')">
<span class="listcard__card-image-link listcard__card-image-link--before">Before</span>
<div
class="divisor"
style="
background-image: url('{{ item.compare_img_2 | asset_url }}');
clip-path: inset(0 0 0 50%);
">
<span class="listcard__card-image-link listcard__card-image-link--after">After</span>
</div>
</figure>
<input type="range" min="0" max="100" value="50" class="slider">
</div>
</div>
</div>
{% else %}
{% if legacy %}
<div class="listcard__card-images">
{% for image in item.images %}
{% using image %}
{%- comment -%}
We're adding a class list to the `image` data before `atom/img`.
`attrs.class`가 이미 존재하는 경우 클래스 목록이 뒤에 추가됩니다.
우리는 `forloop.index`의 데이터를 사용하고 있기 때문에 `capture`가 필요합니다.
동적 데이터 없이 상수 클래스 목록을 사용하려면 다음과 같이 인라인으로 실행할 수 있습니다. `{%- assign attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} {% if image_link -%} listcard__card-image-linkable listcard__card-image-linkable--{{ forloop.index }} {%- else -%} listcard__card-image listcard__card-image--{{ forloop.index }} {%- endif %} {%- endcapture %} {% if image_link %} {%- assign tag_name = 'a' -%} {%- assign attrs = attrs | merge_props: href: image_link -%} {% endif %} {%- assign attrs = attrs | merge_props: 클래스: 클래스 -%} {% include "atom/img" %} {% endusing %} {% if image.modal_img %} {% using image %} 닫기 {%- comment -%} `atom/img` 앞에 `image` 데이터에 클래스 목록을 추가하고 있습니다.
`attrs.class`가 이미 존재하는 경우 클래스 목록이 뒤에 추가됩니다.
우리는 `forloop.index`의 데이터를 사용하고 있기 때문에 `capture`가 필요합니다.
동적 데이터 없이 상수 클래스 목록을 사용하려면 다음과 같이 인라인으로 할 수 있습니다. `{%- assign attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} listcard__modal-image listcard__modal-image--{{ forloop.index }} {%- endcapture -%} {%- assign attrs = attrs | merge_props: class: class -%} {% include "atom/img" %} {% endusing %} {% endif %} {% endfor %} {% 이미지.이미지_텍스트 %} {{이미지.이미지_텍스트}} {% endif %} {% 그렇지 않은 경우 %} {% for image in item.images %} {% using image %} {%- comment -%} `atom/img` 앞에 `image` 데이터에 클래스 목록을 추가하고 있습니다.
`attrs.class`가 이미 존재하는 경우 클래스 목록이 뒤에 추가됩니다.
우리는 `forloop.index`의 데이터를 사용하고 있기 때문에 `capture`가 필요합니다.
동적 데이터 없이 상수 클래스 목록을 사용하려면 다음과 같이 인라인으로 실행할 수 있습니다. `{%- assign attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} {% if image_link -%} listcard__card-image-linkable listcard__card-image-linkable--{{ forloop.index }} {%- else -%} listcard__card-image listcard__card-image--{{ forloop.index }} {%- endif %} {%- endcapture %} {% if image_link %} {%- assign tag_name = 'a' -%} {%- assign attrs = attrs | merge_props: href: image_link -%} {% endif %} {%- assign attrs = attrs | merge_props: 클래스: 클래스 -%} {% include "atom/img" %} {% endusing %} {% if image.image_text %} {{이미지.이미지_텍스트}} {% endif %} {% endfor %} {%- 항목 이미지[0].modal_img -%} > < 닫기 {% for image in item.images %} {% using image.modal_img %} {%- comment -%} `atom/img` 앞에 `image` 데이터에 클래스 목록을 추가하고 있습니다.
`attrs.class`가 이미 존재하는 경우 클래스 목록이 뒤에 추가됩니다.
우리는 `forloop.index`의 데이터를 사용하고 있기 때문에 `capture`가 필요합니다.
동적 데이터 없이 고정된 클래스 목록을 사용하려면 다음과 같이 인라인으로 작성할 수 있습니다. `{%- assign attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} listcard__modal-image listcard__modal-image--{{ forloop.index }} {%- endcapture -%} {%- assign attrs = attrs | merge_props: class: class -%} {% include "atom/img" %} {% endusing %} {% endfor %} {%- endif -%} {% endif %} {% endif %} {% endunless %} {% unless text == false or item.text == nil or item.text.size == 0 %} {{item.text}} {% endunless %} {% unless details == false or item.details == nil or item.details.size == 0 %} {% 항목의 세부 정보에 대한 상세 정보 %} {{ detail.label }} {%- detail.link인 경우 -%} {{ detail.text }} {%- 그렇지 않으면 -%} {{ detail.text }} {%- endif -%} {% endfor %} {% endunless %} {% unless ctas == false or item.ctas == nil or item.ctas.size == 0 or linkcard or singlelink%} {% for cta in item.ctas %} {{cta.label}} {% endfor %} {% 무한대 %} {% 단일 링크인 경우 %} {% for cta in item.ctas %} {{cta.label}} {% endfor %} {% endif %} {% if singlelink %} {% elsif linkcard %} {% else %} {% endif %}
* 개별 결과는 보장되지 않으며 개인마다 다를 수 있습니다. 이미지는 모델을 포함 할 수 있습니다.