feat(article-link): replace background div with img tag

2026-01-30 16:31:52 +01:00 · 2025-09-06 15:42:14 +08:00
parent 340364f31a
commit 01b998e070
6 changed files with 104 additions and 116 deletions
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -3019,9 +3019,9 @@ body.zen-mode-enable {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
-  .md\:flex-nowrap {
+  .md\:flex-row {
    @media (width >= 853px) {
-      flex-wrap: nowrap;
+      flex-direction: row;
    }
  }
  .md\:justify-start {
@@ -3770,24 +3770,6 @@ a {
 pre {
  text-align: left;
 }
-.thumbnail, .thumbnail_card, .thumbnail_card_related, .thumbnail_card_term, .single_hero_basic, .single_hero_background {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-.thumbnail {
-  min-width: 300px;
-  height: 180px;
-}
-.thumbnail_card {
-  height: 200px;
-}
-.thumbnail_card_related {
-  height: 150px;
-}
-.thumbnail_card_term {
-  height: 150px;
-}
 .single_hero_round {
  max-height: 50vh;
  object-fit: cover;
@@ -3799,7 +3781,23 @@ pre {
  width: 100%;
  height: 100%;
 }
-.thumbnailshadow {
+.thumbnail--card {
+  min-width: 300px;
+  height: 200px;
+}
+.thumbnail--related {
+  height: 150px;
+}
+.thumbnail--simple {
+  width: 300px;
+  min-height: 180px;
+}
+@media (width < 853px) {
+  .thumbnail--simple {
+    width: 100%;
+  }
+}
+.thumbnail-shadow {
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 .anchor {
@@ -3813,20 +3811,11 @@ pre {
  scroll-margin-top: 145px;
 }
@media (width >= 640px) {
-  .thumbnail {
-    min-width: 100%;
-    height: 180px;
-  }
  .article {
    flex-wrap: wrap;
  }
 }
@media (width >= 853px) {
-  .thumbnail {
-    min-width: 300px;
-    min-height: 180px;
-    height: auto;
-  }
  .article {
    flex-wrap: nowrap;
  }
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -163,34 +163,6 @@ pre {
  text-align: left;
 }

-.thumbnail,
-.thumbnail_card,
-.thumbnail_card_related,
-.thumbnail_card_term,
-.single_hero_basic,
-.single_hero_background {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-.thumbnail {
-  min-width: 300px;
-  height: 180px;
-}
-
-.thumbnail_card {
-  height: 200px;
-}
-
-.thumbnail_card_related {
-  height: 150px;
-}
-
-.thumbnail_card_term {
-  height: 150px;
-}
-
 .single_hero_round {
  max-height: 50vh;
  object-fit: cover;
@@ -205,7 +177,27 @@ pre {
  height: 100%;
 }

-.thumbnailshadow {
+.thumbnail--card {
+  min-width: 300px;
+  height: 200px;
+}
+
+.thumbnail--related {
+  height: 150px;
+}
+
+.thumbnail--simple {
+  width: 300px;
+  min-height: 180px;
+}
+
+@variant max-md {
+  .thumbnail--simple {
+    width: 100%;
+  }
+}
+
+.thumbnail-shadow {
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }

@@ -224,21 +216,12 @@ pre {
 }

@variant sm {
-  .thumbnail {
-    min-width: 100%;
-    height: 180px;
-  }
  .article {
    flex-wrap: wrap;
  }
 }

@variant md {
-  .thumbnail {
-    min-width: 300px;
-    min-height: 180px;
-    height: auto;
-  }
  .article {
    flex-wrap: nowrap;
  }
--- a/layouts/partials/article-link/_shortcode.html
+++ b/layouts/partials/article-link/_shortcode.html
@@ -7,29 +7,22 @@
 {{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }}
 {{ $disableImageOptimization := site.Params.disableImageOptimization | default false }}

-{{ $articleClasses := "flex flex-wrap md:flex-nowrap article relative" }}
-{{ if site.Params.list.showCards }}
-  {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
-{{ else }}
-  {{ $articleClasses = delimit (slice $articleClasses "") " " }}
-{{ end }}
+{{ $cardClasses := "flex flex-col md:flex-row relative" }}
+{{ $figureClasses := "" }}
+{{ $cardContentClasses := "" }}

-{{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }}
 {{ if site.Params.list.showCards }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "") " " }}
+  {{ $cardClasses = printf "%s overflow-hidden rounded-md border-2 border-neutral-200 dark:border-neutral-700" $cardClasses }}
+  {{ $figureClasses = "" }}
+  {{ $cardContentClasses = printf "%s p-2.5 pl-4 pb-0" $cardContentClasses }}
 {{ else }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
-{{ end }}
-
-{{ $articleInnerClasses := "" }}
-{{ if site.Params.list.showCards }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-2.5 pl-4 pb-0") " " }}
-{{ else }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }}
+  {{ $cardClasses = printf "%s" $cardClasses }}
+  {{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }}
+  {{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }}
 {{ end }}

 {{ if $constrainItemsWidth }}
-  {{ $articleClasses = delimit (slice $articleClasses "max-w-prose") " " }}
+  {{ $cardClasses = printf "%s max-w-prose" $cardClasses }}
 {{ end }}

 {{ $featured := "" }}
@@ -62,11 +55,18 @@
 {{ end }}


-<article class="{{ $articleClasses }}">
+<article class="{{ $cardClasses }}">
  {{ with $featuredURL }}
-    <div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div>
+    <figure class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
  {{ end }}
-  <div class="{{ $articleInnerClasses }}">
+  <div class="{{ $cardContentClasses }}">
    <header class="items-center text-start text-xl font-semibold">
      <a
        {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
--- a/layouts/partials/article-link/card-related.html
+++ b/layouts/partials/article-link/card-related.html
@@ -34,7 +34,15 @@
 <article
  class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
  {{ with $featuredURL }}
-    <div class="thumbnail_card_related nozoom w-full" style="background-image:url({{ . }});"></div>
+    <figure class="not-prose flex-none relative overflow-hidden thumbnail--related">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        fetchpriority="low"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
  {{ end }}
  {{ if and .Draft .Site.Params.article.showDraftLabel }}
    <span class="absolute top-0 right-0 m-2">
--- a/layouts/partials/article-link/card.html
+++ b/layouts/partials/article-link/card.html
@@ -38,7 +38,15 @@
 <article
  class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
  {{ with $featuredURL }}
-    <div class="thumbnail_card nozoom w-full" style="background-image:url({{ . }});"></div>
+    <figure class="not-prose flex-none relative overflow-hidden thumbnail--card">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        fetchpriority="low"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
  {{ end }}
  {{ if and .Draft .Site.Params.article.showDraftLabel }}
    <span class="absolute top-0 right-0 m-2">
--- a/layouts/partials/article-link/simple.html
+++ b/layouts/partials/article-link/simple.html
@@ -3,33 +3,25 @@
  2. Recent articles template (when the cardView option is not enabled)
  3. Shortcode list.html
 */}}
-{{ $constrainItemsWidth := .Page.Site.Params.list.constrainItemsWidth | default false }}
+{{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }}
+{{ $disableImageOptimization := site.Params.disableImageOptimization | default false }}

-{{ $articleClasses := "flex flex-wrap md:flex-nowrap article relative" }}
-{{ if .Site.Params.list.showCards }}
-  {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
+{{ $cardClasses := "flex flex-col md:flex-row relative" }}
+{{ $figureClasses := "" }}
+{{ $cardContentClasses := "" }}
+
+{{ if site.Params.list.showCards }}
+  {{ $cardClasses = printf "%s overflow-hidden rounded-md border-2 border-neutral-200 dark:border-neutral-700" $cardClasses }}
+  {{ $figureClasses = "" }}
+  {{ $cardContentClasses = printf "%s p-4" $cardContentClasses }}
 {{ else }}
-  {{ $articleClasses = delimit (slice $articleClasses "") " " }}
-{{ end }}
-
-{{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }}
-{{ if .Site.Params.list.showCards }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "") " " }}
-{{ else }}
-  {{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
-{{ end }}
-
-{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
-
-{{ $articleInnerClasses := "" }}
-{{ if .Site.Params.list.showCards }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-4") " " }}
-{{ else }}
-  {{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }}
+  {{ $cardClasses = $cardClasses }}
+  {{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }}
+  {{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }}
 {{ end }}

 {{ if $constrainItemsWidth }}
-  {{ $articleClasses = delimit (slice $articleClasses "max-w-prose") " " }}
+  {{ $cardClasses = printf "%s max-w-prose" $cardClasses }}
 {{ end }}

 {{ $featured := "" }}
@@ -62,11 +54,19 @@
 {{ end }}


-<article class="{{ $articleClasses }}">
+<article class="{{ $cardClasses }}">
  {{ with $featuredURL }}
-    <div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div>
+    <figure
+      class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple">
+      <img
+        src="{{ . }}"
+        alt="{{ $.Title }}"
+        loading="lazy"
+        decoding="async"
+        class="not-prose absolute inset-0 w-full h-full object-cover">
+    </figure>
  {{ end }}
-  <div class="{{ $articleInnerClasses }}">
+  <div class="{{ $cardContentClasses }}">
    <header class="items-center text-start text-xl font-semibold">
      <a
        {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}