1
0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00

perf(core): replace lazysizes with browser-level lazy loading (#1267)

This commit is contained in:
Cotes Chung
2023-09-27 04:44:32 +08:00
committed by GitHub
parent 5015fdecf3
commit bf3a34d054
19 changed files with 171 additions and 226 deletions

View File

@@ -39,10 +39,13 @@ layout: default
{% endfor %}
{% endif %}
{% capture content %}
{% capture _content %}
<div id="post-list" class="flex-grow-1 pe-xl-2">
{% for post in posts %}
<article class="card-wrapper">
<a href="{{ post.url | relative_url }}" class="card post-preview flex-md-row-reverse">
<article class="card-wrapper card">
<a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
{% assign card_body_col = '12' %}
{% if post.image %}
{% if post.image.lqip %}
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
@@ -55,56 +58,61 @@ layout: default
{% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
<img src="{{ src }}" w="17" h="10" alt="{{ alt }}" {{ lqip }}>
<div class="col-md-5">
<img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
</div>
{% assign card_body_col = '7' %}
{% endif %}
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
<div class="col-md-{{ card_body_col }}">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
<div class="card-text content mt-0 mb-2">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
{% include datetime.html date=post.date lang=lang %}
<!-- categories -->
{% if post.categories.size > 0 %}
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
{% for category in post.categories %}
{{ category }}
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</span>
{% endif %}
<div class="card-text content mt-0 mb-3">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
</div>
{% if post.pin %}
<div class="pin ms-1">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.locales[lang].post.pin_prompt }}</span>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
{% include datetime.html date=post.date lang=lang %}
<!-- categories -->
{% if post.categories.size > 0 %}
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
{% for category in post.categories %}
{{ category }}
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</span>
{% endif %}
</div>
{% endif %}
{% if post.pin %}
<div class="pin ms-1">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.locales[lang].post.pin_prompt }}</span>
</div>
{% endif %}
</div>
<!-- .post-meta -->
</div>
<!-- .post-meta -->
<!-- .card-body -->
</div>
<!-- .card-body -->
</a>
</article>
{% endfor %}
{% endcapture %}
<div id="post-list" class="flex-grow-1 pe-xl-2">
{% include refactor-content.html content=content lang=lang %}
</div>
<!-- #post-list -->
{% endcapture %}
{% include refactor-content.html content=_content lang=lang %}
{% if paginator.total_pages > 1 %}
{% include post-paginator.html %}