{%- մեկնաբանություն -%} Հեռացրեք «tag_name»-ից առաջատար և հետին բացատը: {%- ավարտական մեկնաբանություն -%} {%- նշանակել tag_name = tag_name | strip -%} {%- comment -%} Կառավարեք «tag_name: ''' գործը: {%- վերջնական մեկնաբանություն -%} {%- if tag_name and tag_name.size < 1 -%} {%- assign tag_name = false -%} {%- endif -%} {%- if tag_name -%} <{{ tag_name }} {{- attrs | to_attrs -}} {{- extra_attrs -}} {%- if_self_closing == true -%} {{- ' /' -}} {%- endif -%} > {%- endif -%} {%- if self_closing == true -%} {%- ifslot -%} {%- slot -%} {%- else -% if - lot -% if -slot -% if - ներ tag_name -%} {%- endif -%} {%- անվերջ -%}{%- մեկնաբանություն -%} Այս բաղադրիչը կարող է ստեղծել «img» թեգ կամ «div style="background-...":
{%- ավարտական մեկնաբանություն -%} {%- հանձնարարել is_global_asset = is_global_asset | լռելյայն՝ կեղծ -%} {%- եթե bg -%} {%- մեկնաբանություն -%} Ֆոնային պատկեր {%- ավարտական մեկնաբանություն -%} {%- նշանակել tag_name = tag_name | լռելյայն՝ 'div' -%} {%- հանձնարարել self_closing = self_closing | լռելյայն՝ կեղծ -%} {%- մեկնաբանություն -%} Մենք ինքներս ենք ներկայացնում ատրիբուտները և զտում «ոճը»: {%- ավարտական մեկնաբանություն -%} {%- նշանակել attr_list = attrs | to_attrs. ցուցակ՝ ճշմարիտ -%} {%- capture extra_attrs -%} {%- comment -%} Ներառել ատրիբուտները համատեքստից: {%- endcomment -%} {%- attr-ի համար attr_list -%} {%-, բացի attr[0] == 'ոճից' -%} {{- ' ' -}} {{- attr[0] -}} {%- if attr[1].size > 0 -%} ="{{- attr[1] -} '}" {%- վերջի համար - առանց վերջի -%} {% - վերջիվերջ -%} -}} style=" {%- մեկնաբանություն -%} Render bg styles. Օգտագործեք src, եթե մենք պատկեր չենք ստացել: {%- ավարտական մեկնաբանություն -%} {%- նշանակել has_bg_image = կեղծ -%} {%- նշանակել has_bg_size = կեղծ -%} {%- նշանակել has_bg_position_x = կեղծ -%} {%- նշանակել has_bg_position_y = կեղծ -%} {%- նշանակել has_bg_repeat = նշանակել has_bg_repeat = սուտ -% -ի համար {%- երբ «պատկեր» -%} {%- նշանակել has_bg_image = ճշմարիտ -%} {%- երբ «չափ» -%} {%- նշանակել has_bg_size = ճշմարիտ -%} {%- երբ «դիրք» -%} {%- նշանակել has_bg_position_x = ճշմարիտ -%} {%- նշանակել has_bg_position_y = նշանակել has_bg_position_y = ճշմարիտ է = true -%} {%- when 'position-y' -%} {%- assign has_bg_position_y = true -%} {%- when 'repeat' -%} {%- assign has_bg_repeat = true -%} {%- endcase -%} background-{{- prop[0] -}}: {{- prop[0] -}}; {%- endfor -%} {%-, եթե has_bg_image -%} ֆոնային պատկեր. url('{{- src | asset_url: global: is_global_asset -}}'); {%- endunless -%} {%- if has_bg_size -%} background-size. cover; {%- endunless -%} {%- if has_bg_position_x -%} background-position-x: center; {%- endunless -%} {%- if has_bg_position_y -%} background-position-y: center; {%- endunless -%} {%- if has_bg_repeat -%} background-repeat. no-repeat; {%- անվերջ -%} {%-մեկնաբանություն -%} Ավելացրեք ցանկացած ոճ ոճի հատկանիշից: {%- endcomment -%} {{- attrs.style -}} " {%- endcapture -%} {%- comment -%} Հեռացրեք attr-ները, որպեսզի դրանք կրկնակի չարտադրենք: {%- endcomment -%} {%- assign attrs = nil -%} {%- else -%} {%- comment -%} Normal img tag {%- 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 -%} {%- ներառում է 'ատոմ/տարր', tag_name: tag_name, self_closing: self_closing, additional_attrs: additional_attrs -%}{%- հանձնարարել group_attrs = group.attrs | merge_props. class. 'listcard__group' -%} {%- assign tag_name = 'div' -%} {%- if collapsible -%} {%- assign tag_name = 'details' -%} {%- endif -%} <{{ tag_name }} {{ group_attrs | to_attrs }}> {% if headline == false կամ group.headline == զրոյական կամ group.headline.size == 0 %} {% if collapsible %} {% endif %} {{ group.headline }} {% եթե ծալովի է %} {% endif %} {% անվերջ %} {% group.cards-ի ապրանքի համար %} {%- ներառում է «cardlist/listcard/item» -%} {% endfor %} {% եթե group.group_button_link == զրոյական կամ group.cards.size < 2 %} {{ group.group_button_label }} {% անվերջ %}{% 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»-ն արդեն գոյություն ունի, մեր դասերի ցանկը կավելացվի դրանից հետո:
«capture»-ն անհրաժեշտ է, քանի որ մենք օգտագործում ենք «forloop.index»-ի տվյալները:
Եթե մենք ցանկանում ենք օգտագործել հաստատուն դասերի ցուցակ առանց դինամիկ տվյալների, մենք կարող ենք դա անել ներգծում, ինչպես՝ «{%- նշանակել 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_listagedd forloop.index }} {%- endif %} {%- endcapture %} {% if image_link %} {%- assign tag_name = 'a' -%} {%- assign attrs = attrs | merge_props: href: image_link -%} {% endif %} {%- նշանակել attrs = attrs | merge_props՝ դաս՝ class -%} {% ներառում է «atom/img» %} {% endusing %} {% if image.modal_img %} Փակեք {%՝ օգտագործելով պատկերը %} {%- մեկնաբանություն -%} Մենք դասացուց ենք ավելացնում «image» տվյալներին «atom/img»-ից առաջ:
Եթե «attrs.class»-ն արդեն գոյություն ունի, մեր դասերի ցանկը կավելացվի դրանից հետո:
«capture»-ն անհրաժեշտ է, քանի որ մենք օգտագործում ենք «forloop.index»-ի տվյալները:
Եթե մենք ցանկանում ենք օգտագործել հաստատուն դասերի ցուցակ առանց դինամիկ տվյալների, մենք կարող ենք դա անել ներգծում, ինչպես՝ «{%- նշանակել attrs = attrs | merge_props. class. «my-static class-list» -%}` {%- endcomment -%} {%- capture class -%} listcard__modal-image listcard__modal-image--{{ forloop.index }} {%- endcapture -%} {%- նշանակել attrs = attrs | merge_props. class. class -%} {% ներառում է «atom/img» %} {% endusing %} {% endif %} {% endfor %} {% if image.image_text %} {{image.image_text}} {% endif %} {% else %} {% պատկերի համար item.images %} {% using image %} {%- comment -%} Մենք դասացուց ենք ավելացնում «image» տվյալներին «atom/img»-ից առաջ:
Եթե «attrs.class»-ն արդեն գոյություն ունի, մեր դասերի ցանկը կավելացվի դրանից հետո:
«capture»-ն անհրաժեշտ է, քանի որ մենք օգտագործում ենք «forloop.index»-ի տվյալները:
Եթե մենք ցանկանում ենք օգտագործել հաստատուն դասերի ցուցակ առանց դինամիկ տվյալների, մենք կարող ենք դա անել ներգծում, ինչպես՝ «{%- նշանակել 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_listagedd forloop.index }} {%- endif %} {%- endcapture %} {% if image_link %} {%- assign tag_name = 'a' -%} {%- assign attrs = attrs | merge_props: href: image_link -%} {% endif %} {%- նշանակել attrs = attrs | merge_props՝ դաս՝ class -%} {% ներառում է «atom/img» %} {% endusing %} {% if image.image_text %} {{image.image_text}} {% endif %} {% endfor %} {%- if item.images[0].modal_img -%} > < Փակել {% item.images-ում պատկերի համար %} {% օգտագործելով image.modal_img %} {%- comment -%} Մենք «atom/img»-ից առաջ «image» տվյալներին դասացուց ենք ավելացնում:
Եթե «attrs.class»-ն արդեն գոյություն ունի, մեր դասերի ցանկը կավելացվի դրանից հետո:
«capture»-ն անհրաժեշտ է, քանի որ մենք օգտագործում ենք «forloop.index»-ի տվյալները:
Եթե մենք ցանկանայինք օգտագործել հաստատուն դասերի ցանկ առանց դինամիկ տվյալների, կարող էինք դա անել տողային ձևով՝ `{%- 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 կամ item.text == nil կամ item.text.size == 0 %} {{item.text}} {% endunless %} {% unless details == false կամ item.details == nil կամ item.details.size == 0 %} {% մանրամասների համար item.details-ում %} {{ մանրամասն.պիտակ }} {%- եթե detail.link -%} {{ detail.text }} {%- այլապես -%} {{ մանրամասն.տեքստ }} {%- endif -%} {% endfor %} {% endunless %} {% unless ctas == false կամ item.ctas == nil կամ item.ctas.size == 0 կամ linkcard կամ singlelink%} {% cta-ի համար item.ctas %} {{cta.label}} {% endfor %} {% endunless %} {% եթե միայնակ հղում %} {% գործողության կոչի համար item.ctas %}-ում {{cta.label}} {% endfor %} {% endif %} {% if singlelink %} {% elsif linkcard %} {% else %} {% endif %}
*Անհատական արդյունքները երաշխավորված չեն և կարող են տարբեր լինել անձից անձից: Պատկերները կարող են պարունակել մոդելներ: