部落格
保持訊息靈通和靈感!
{%- 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,這樣我們就不會渲染它們兩次。 {%- 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 -%} {%- 無盡 -%}
{%- 捕獲 id_attr -%} {{- item.id -}} {%- endcapture -%} {%- if id_attr.size > 0 -%} {%- 捕獲 id_attr -%} id="{{ item .id }}" {%- endcapture -%} {%- endif -%} {%- 分配attrs = item.attrs | merge_props: class: 'card card--post' -%} {%- if link == false 或 item.link == nil 或 item.link.size < 1 或 item.link_text == nil 或 item.link_text.size < 1 -%} {% else %} {% endif %} {%- 除非img == false 或item.img == nil -%} {%- 分配_img = item.img -%} {%- 分配img_attrs = _img.attrs | merge_props: class: 'card__image' -%} {%- include 'atom/img', alt: _img.alt, src: _img.src, srcset: _img.srcset, 尺寸: _img.sizes, attrs: img_rs, bg _img.bg -%} {%- 無盡-%} {{ 項目.標題 }} {%- 除非author == false 或item.author == nil 或item.author.size < 3 -%} {{ item.author }} {%- endunless -%} {%- 除非date == false 或item .date == nil 或item.date.size < 3 -%} {{ item.date }} {%- endunless -%} {%- 除非 Summary == false 或 item.summary == nil 或 item.summary.size < 1 -%} {{ item.summary }} {%- endunless -%} {%- 除非 link == false 或 item.link == nil 或 item.link.size < 1 或 item.link_text == nil 或 item.link_text.size < 1 -%} {{ item.link_text }} {%-無盡-%} {%- if link == false 或 item.link == nil 或 item.link.size < 1 或 item.link_text == nil 或 item.link_text.size < 1 -%} {% else %} {% endif %}