載入中
{%- comment -%} 從 `tag_name` 中刪除前導和尾隨空格。 {%- endcomment -%} {%- 分配 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 }} {{- 屬性 | to_attrs -}} {{- additional_attrs -}} {%- if self_closing == true -%} {{- ' /' -}} {%- endif -%} > {%- endif -%} {%- 除非self_closing == true -%} {%- ifslot -%} {%- slot -%} {%- else -%} {{- inner_html -}} {%- endifslot -%} {%- if tag_name -%} {%- endif -%} {%- endunless -%}{%- comment -%} 這個組件可以生成一個`img`標籤或者一個`div style="background-..."`。 {%- endcomment -%} {%- 分配 is_global_asset = is_global_asset | 默認值：false -%} {%- if bg -%} {%- comment -%} 背景圖片 {%- endcomment -%} {%- assign tag_name = tag_name | 默認值：'div' -%} {%- 分配 self_closing = self_closing | 默認值：false -%} {%- comment -%} 我們自己渲染 attrs 並過濾掉 `style`。 {%- endcomment -%} {%- 分配 attr_list = attrs | to_attrs: list: true -%} {%- capture additional_attrs -%} {%- comment -%} 包括上下文中的屬性。 {%- endcomment -%} {%- for attr in attr_list -%} {%- unless attr[0] == 'style' -%} {{- ' ' -}} {{- attr[0] -} } {%- if attr[1].size > 0 -%} ="{{- attr[1] -}}" {%- endif -%} {%- endunless -%} {%- endfor -%} {{- ' ' -}} style=" {%- comment -%} 渲染 bg 樣式。如果我們沒有得到圖像，請使用 src。{%- endcomment -%} {%- assign has_bg_image = false -%} {%-assign has_bg_size = false -%} {%-assign has_bg_position_x = false -%} {%-assign has_bg_position_y = false -%} {%-assign has_bg_repeat = false -%} {%- for prop in bg -%} {%- case prop[0] -%} {%- 當'image' -%} {%- 分配 has_bg_image = true -%} {%- 當'size' -%} {%- 分配 has_bg_size = true -% } {%- 當'位置' -%} {%- 分配 has_bg_position_x = true -%} {%- 分配 has_bg_position_y = true -%} {%- 當'位置-x' -%} {%- 分配 has_bg_position_x = true -%} {%- 當'位置-y' -%} {%- 分配 has_bg_position_y = true -%} {%- 當'重複' -%} {%- 分配 has_bg_repeat = true -%} {%- endcase - %} 背景-{{- prop[0] -}}: {{- p rop[1] -}}; {%- endfor -%} {%- unless has_bg_image -%} background-image: url('{{- src | asset_url: global: is_global_asset -}}'); {%- endunless -%} {%- 除非 has_bg_size -%} 背景大小：覆蓋； {%- endunless -%} {%- 除非 has_bg_position_x -%} background-position-x: center; {%- endunless -%} {%- unless has_bg_position_y -%} background-position-y: center; {%- endunless -%} {%- 除非 has_bg_repeat -%} 背景重複：無重複； {%- endunless -%} {%- comment -%} 從 style 屬性中添加任何樣式。 {%- endcomment -%} {{- attrs.style -}} " {%- endcapture -%} {%- comment -%} 刪除 attrs，這樣我們就不會渲染它們兩次。{%- 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 | 資產URL：全局：is_global_asset }}" {%- endcapture -%} {%- endif -%} {%- 包括'原子/元素'，標籤名：標籤名，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 }}> {% unless heading == false or group.headline == nil or group.headline.size == 0 %} {% if collapsible %} {％ 萬一 ％} {{ group.headline }} {% 如果可折疊 %} {% endif %} {% endunless %} {% for item in group.cards %} {%- include 'cardlist/listcard/item' -%} {% endfor %} {% 除非 group.group_button_link == nil 或 group.cards.size < 2 %} {{ group.group_button_label }} {% 無盡 %}{% 分配card_count = forloop.index %} {%- 捕獲curr_class -%} listcard__card {%- 除非item.id == nil -%} {{- ' ' -}} listcard__card--{{ item.id }} {%- endunless -%} {%- 除非card_class == nil 或card_class.size == 0 -%} {{- ' ' -}} listcard__card--{{ card_class }} {%- endunless -% } {% - endcapture -%} {%- 分配card_attrs = item.attrs | merge_props: 類別: curr_class -%} {% if singlelink %} {%- 分配card_attrs = card_attrs | merge_props: href: item.ctas[0].link -%} {% endif %} {% if linkcard %} {% elsif singlelink %} {% else %} {% endif %} {%- 除非標題== false或item.headline == nil 或item.headline.size == 0 -%} {{ item.headline }} {%- endunless -%} {% 除非 subheadline == false 或 item.subheadline == nil 或 item. subheadline.size == 2 %} {{ item.subheadline }} {% endunless %} {% 除非 images == false 或 item.images == nil 或 item.images.size == 2 %} {% if Compare = = true %} 之前之後關閉前之後{% else %} {% if Legacy %} {% for image in item.images %} {% using image %} {%- comment -%} 我們在 `atom 之前向 `image` 資料新增一個類別清單/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` 中的數據。
如果我們想使用一個沒有動態數據的常量類列表，我們可以像這樣內聯：`{%-assign 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: 類：類 -%} {% 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` 中的數據。
*图片皆为参考。术后效果可能因人而异。