Shopify Dawn - Blog Comments / Junaid Ahmed

创建于 差异永不过期
2 删除
384 行
14 添加
396 行
{{ 'section-blog-post.css' | asset_url | stylesheet_tag }}
{{ 'section-blog-post.css' | asset_url | stylesheet_tag }}


<article class="article-template">
<article class="article-template">
{%- for block in section.blocks -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- case block.type -%}
{%- when '@app' -%}
{%- when '@app' -%}
<div class="page-width page-width--narrow">
<div class="page-width page-width--narrow">
{% render block %}
{% render block %}
</div>
</div>
{%- when 'featured_image' -%}
{%- when 'featured_image' -%}
{%- if article.image -%}
{%- if article.image -%}
<div
<div
class="article-template__hero-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
class="article-template__hero-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
{{ block.shopify_attributes }}
{{ block.shopify_attributes }}
>
>
<div
<div
class="article-template__hero-{{ block.settings.image_height }} media"
class="article-template__hero-{{ block.settings.image_height }} media"
{% if block.settings.image_height == 'adapt' and article.image %}
{% if block.settings.image_height == 'adapt' and article.image %}
style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
{% endif %}
{% endif %}
>
>
<img
<img
srcset="
srcset="
{% if article.image.width >= 350 %}{{ article.image | image_url: width: 350 }} 350w,{% endif %}
{% if article.image.width >= 350 %}{{ article.image | image_url: width: 350 }} 350w,{% endif %}
{% if article.image.width >= 750 %}{{ article.image | image_url: width: 750 }} 750w,{% endif %}
{% if article.image.width >= 750 %}{{ article.image | image_url: width: 750 }} 750w,{% endif %}
{% if article.image.width >= 1100 %}{{ article.image | image_url: width: 1100 }} 1100w,{% endif %}
{% if article.image.width >= 1100 %}{{ article.image | image_url: width: 1100 }} 1100w,{% endif %}
{% if article.image.width >= 1500 %}{{ article.image | image_url: width: 1500 }} 1500w,{% endif %}
{% if article.image.width >= 1500 %}{{ article.image | image_url: width: 1500 }} 1500w,{% endif %}
{% if article.image.width >= 2200 %}{{ article.image | image_url: width: 2200 }} 2200w,{% endif %}
{% if article.image.width >= 2200 %}{{ article.image | image_url: width: 2200 }} 2200w,{% endif %}
{% if article.image.width >= 3000 %}{{ article.image | image_url: width: 3000 }} 3000w,{% endif %}
{% if article.image.width >= 3000 %}{{ article.image | image_url: width: 3000 }} 3000w,{% endif %}
{{ article.image | image_url }} {{ article.image.width }}w
{{ article.image | image_url }} {{ article.image.width }}w
"
"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
src="{{ article.image | image_url: width: 1100 }}"
src="{{ article.image | image_url: width: 1100 }}"
loading="eager"
loading="eager"
fetchpriority="high"
fetchpriority="high"
width="{{ article.image.width }}"
width="{{ article.image.width }}"
height="{{ article.image.height }}"
height="{{ article.image.height }}"
alt="{{ article.image.alt | escape }}"
alt="{{ article.image.alt | escape }}"
>
>
</div>
</div>
</div>
</div>
{%- endif -%}
{%- endif -%}


{%- when 'title' -%}
{%- when 'title' -%}
<header
<header
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
{{ block.shopify_attributes }}
{{ block.shopify_attributes }}
>
>
<h1
<h1
class="article-template__title"
class="article-template__title"
>
>
{{ article.title | escape }}
{{ article.title | escape }}
</h1>
</h1>
{%- if block.settings.blog_show_date -%}
{%- if block.settings.blog_show_date -%}
<span class="circle-divider caption-with-letter-spacing">
<span class="circle-divider caption-with-letter-spacing">
{{- article.published_at | time_tag: format: 'date' -}}
{{- article.published_at | time_tag: format: 'date' -}}
</span>
</span>
{%- endif -%}
{%- endif -%}
{%- if block.settings.blog_show_author -%}
{%- if block.settings.blog_show_author -%}
<span class="caption-with-letter-spacing">
<span class="caption-with-letter-spacing">
<span>{{ article.author }}</span>
<span>{{ article.author }}</span>
</span>
</span>
{%- endif -%}
{%- endif -%}
</header>
</header>


{%- when 'content' -%}
{%- when 'content' -%}
<div
<div
class="article-template__content page-width page-width--narrow rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
class="article-template__content page-width page-width--narrow rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{{ block.shopify_attributes }}
>
>
{{ article.content }}
{{ article.content }}
</div>
</div>


{%- when 'share' -%}
{%- when 'share' -%}
<div
<div
class="article-template__social-sharing page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
class="article-template__social-sharing page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{{ block.shopify_attributes }}
>
>
{% assign share_url = request.origin | append: article.url %}
{% assign share_url = request.origin | append: article.url %}
{% render 'share-button', block: block, share_link: share_url %}
{% render 'share-button', block: block, share_link: share_url %}
</div>
</div>
{%- endcase -%}
{%- endcase -%}
{%- endfor -%}
{%- endfor -%}


<div class="article-template__back element-margin-top center{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<div class="article-template__back element-margin-top center{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<a href="{{ blog.url }}" class="article-template__link link animate-arrow">
<a href="{{ blog.url }}" class="article-template__link link animate-arrow">
<span class="icon-wrap">
<span class="icon-wrap">
<span class="svg-wrapper">
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
</span>
</span>
</span>
{{ 'blogs.article.back_to_blog' | t: title: blog.title | escape }}
{{ 'blogs.article.back_to_blog' | t: title: blog.title | escape }}
</a>
</a>
</div>
</div>
{%- if blog.comments_enabled? -%}
{%- if blog.comments_enabled? -%}
<div class="article-template__comment-wrapper background-secondary">
<div class="article-template__comment-wrapper background-secondary">
<div
<div
id="comments"
id="comments"
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
>
>