載入中
{%- comment -%} 從 `tag_name` 中刪除前導和尾隨空格。 {%- endcomment -%} {%- 分配 tag_name = tag_name | strip -%} {%- comment -%} 處理 `tag_name: ''` 情況。 {%- endcomment -%} {%- if tag_name 和 tag_name.size < 1 -%} {%- 分配 tag_name = false -%} {%- endif -%} {%-if tag_name -%} <{{ tag_name }} {{- 屬性 | to_attrs -}} {{- extra_attrs -}} {%- if self_looking == true -%} {{- ' /' -}} {%- endif -%} > {%- endif -%} {%- 除非self_close == true -%} {%- ifslot -%} {%- slot -%} {%- else -%} {{- inner_html -}} {%- endifslot -%} {%- if tag_name -%} {%- endif -%} {%- 無盡 -%}{%- comment -%} 此元件可以產生 `img` 標籤或 `div style="background-..."`。
{%- endcomment -%} {%- 分配 is_global_asset = is_global_asset |預設值: false -%} {%- if bg -%} {%- comment -%} 背景圖片 {%- endcomment -%} {%- allocate tag_name = tag_name |預設值： 'div' -%} {%- 分配 self_looking = self_looking |預設值： false -%} {%- comment -%} 我們自己渲染 attrs 並過濾掉 `style`。 {%- endcomment -%} {%- 分配 attr_list = attrs | to_attrs: list: true -%} {%- capture other_attrs -%} {%- comment -%} 包含上下文中的屬性。 {%- endcomment -%} {%- attr_list 中的 attr -%} {%- 除非 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 = fse-alse -%分配has_bg_repeat = false -%} {%- for prop in bg -%} {%- case prop[0] -%} {%- 當'image'時-%} {%- 分配has_bg_image = true -%} { % - 當'size'時-%} {%- 分配has_bg_size = true -%} {%- 當'position'時-%} {%- 分配has_bg_position_x = true -%} {%- 分配has_bg_position_y = true -% } {% - 當'position-x' 時-%} {%- 分配has_bg_position_x = true -%} {%- 當'position-y' 時-%} {%- 分配has_bg_position_y = true -%} {%-當'repeat' 時 - %} {%- 分配 has_bg_repeat = true -%} {%- endcase -%} 背景-{{- prop[0] -}}: {{- prop[1] -}}; {%- endfor -%} {%- 除非 has_bg_image -%} 背景圖片: url('{{- src | asset_url: global: is_global_asset -}}'); {%- 無盡 -%} {%- 除非 has_bg_size -%} 背景大小：封面； {%- 無盡-%} {%- 除非 has_bg_position_x -%} 背景位置-x：中心； {%- 無盡 -%} {%- 除非 has_bg_position_y -%} 背景位置 y：中心； {%- 無盡-%} {%- 除非 has_bg_repeat -%} 背景重複：無重複； {%- endunless -%} {%- comment -%} 從 style 屬性新增任何樣式。 {%- endcomment -%} {{- attrs.style -}} " {%- endcapture -%} {%- comment -%} 刪除 attr，這樣我們就不會渲染它們兩次。 {%- 分配 group_attrs = group.attrs | merge_props: class: 'listcard__group' -%} {%- 分配tag_name = 'div' -%} {%- 如果可折疊-%} {%- 分配tag_name = 'details' -%} {%- endif -%} < {{ 標籤名稱 }} {{ 群組屬性 | to_attrs }}> {% 除非標題 == false 或 group.headline == nil 或 group.headline.size == 0 %} {% if collapsible %} {% 結束 %} {{ 組.標題 }} {% 若可折疊 %} {% endif %} {% 無盡%} {% for item in group.cards %} {%- include 'cardlist/listcard/item' -%} {% endfor %} {% 除非 group.group_button_link == nil 或 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` 中的數據。
如果我們想使用沒有動態資料的常數類別列表，我們可以像這樣內嵌：`{%- allocate 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 %} {%-link %} {%-link %} { %-分配tag_name = 'a' -%} {%- 分配attrs = attrs | merge_props: href: image_link -%} {% endif %} {%- 分配 attrs = attrs | merge_props: 類別: 類別 -%} {% include "atom/img" %} {% endusing %} {% if image.modal_img %} Close {% using image %} {%- comment -%} 我們在 `atom/img` 之前在 `image` 資料中新增一個類別清單。
如果 `attrs.class` 已經存在，我們的類列表將被添加到後面。
需要 `capture`，因為我們使用的是 `forloop.index` 中的數據。
如果我們想使用沒有動態資料的常數類別列表，我們可以像這樣內嵌：`{%- allocate attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- 捕獲類別 -%} listcard__modal-image listcard__modal-image--{{ forloop.index }} {%- endcapture -%} {%- 分配attrs = attrs | merge_props: 類別: 類別 -%} {% include "atom/img" %} {% endusing %} {% endif %} {% endfor %} {% if image.image_text %} {{image.image_text}} {% endif %} {% else %} {% for image in item.images %} {% using image %} {%- comment -%} 我們在 `atom/img` 之前向 `image` 資料新增一個類別清單。
如果 `attrs.class` 已經存在，我們的類列表將被添加到後面。
需要 `capture`，因為我們使用的是 `forloop.index` 中的數據。
如果我們想使用沒有動態資料的常數類別列表，我們可以像這樣內嵌：`{%- allocate 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 %} {%-link %} {%-link %} { %-分配tag_name = 'a' -%} {%- 分配attrs = attrs | merge_props: href: image_link -%} {% endif %} {%- 分配 attrs = attrs | merge_props: 類別: 類別 -%} {% include "atom/img" %} {% endusing %} {% if image.image_text %} {{image.image_text}} {% endif %} {% endfor %} {%- if item.images[0].modal_img -%} > <關閉 {% for image in item.images %} {% using image.modal_img %} {%- comment -%} 我們在 `atom/img` 之前向 `image` 資料新增一個類別清單。
如果 `attrs.class` 已經存在，我們的類列表將被添加到後面。
需要 `capture`，因為我們使用的是 `forloop.index` 中的數據。
*图片皆为参考。术后效果可能因人而异。