装载
{%- 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 %} {%-分配 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 %} {%-分配 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` 中的数据。
*不保证单个结果，并且可能因人而异。 图片可能包含模型。