From 01b998e0706add836333359b227141a9a1930e28 Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Sat, 6 Sep 2025 15:42:14 +0800 Subject: [PATCH 1/3] feat(article-link): replace background div with img tag --- assets/css/compiled/main.css | 49 ++++++--------- assets/css/main.css | 59 +++++++------------ layouts/partials/article-link/_shortcode.html | 40 ++++++------- .../partials/article-link/card-related.html | 10 +++- layouts/partials/article-link/card.html | 10 +++- layouts/partials/article-link/simple.html | 52 ++++++++-------- 6 files changed, 104 insertions(+), 116 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index ce5cc6a3..6de9c791 100644 --- 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; } diff --git a/assets/css/main.css b/assets/css/main.css index db602162..5bdd77d3 100644 --- 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; } diff --git a/layouts/partials/article-link/_shortcode.html b/layouts/partials/article-link/_shortcode.html index 50381dcc..511565f0 100644 --- 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 }} -
+
{{ with $featuredURL }} -
+
+ {{ $.Title }} +
{{ end }} -
+
{{ with $featuredURL }} -
+
+ {{ $.Title }} +
{{ end }} {{ if and .Draft .Site.Params.article.showDraftLabel }} diff --git a/layouts/partials/article-link/card.html b/layouts/partials/article-link/card.html index 6f9e9ba9..aaaab0c8 100644 --- a/layouts/partials/article-link/card.html +++ b/layouts/partials/article-link/card.html @@ -38,7 +38,15 @@
{{ with $featuredURL }} -
+
+ {{ $.Title }} +
{{ end }} {{ if and .Draft .Site.Params.article.showDraftLabel }} diff --git a/layouts/partials/article-link/simple.html b/layouts/partials/article-link/simple.html index 54b7c3b0..50924907 100644 --- 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 }} -
+
{{ with $featuredURL }} -
+
+ {{ $.Title }} +
{{ end }} -
+
↖ {{ end }} - + {{ if and .Draft .Site.Params.article.showDraftLabel }}
{{ partial "badge.html" (i18n "article.draft" | emojify) }}
From d21a4e6e4a1f0daf66f4d7e6269af18d9fa440a5 Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Sat, 6 Sep 2025 18:23:10 +0800 Subject: [PATCH 2/3] feat(term-link): implement the same behavior as article-link in term-link/card.html use new hover logic replace div with img tag --- layouts/partials/term-link/card.html | 72 ++++++++++++++++++---------- 1 file changed, 47 insertions(+), 25 deletions(-) diff --git a/layouts/partials/term-link/card.html b/layouts/partials/term-link/card.html index 4fa7ca31..eb2fe80f 100644 --- a/layouts/partials/term-link/card.html +++ b/layouts/partials/term-link/card.html @@ -1,23 +1,43 @@ - -
- {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }} +{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }} - {{- $images := .Page.Resources.ByType "image" -}} - {{- $featured := $images.GetMatch "*feature*" -}} - {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}} - {{- with $featured -}} - {{ if $disableImageOptimization }} - {{ with . }} -
- {{ end }} - {{ else }} - {{ with .Resize "600x" }} -
- {{ end }} - {{ end }} - {{- end -}} +{{ $featured := "" }} +{{ $featuredURL := "" }} +{{ with .Page.Params.featureimage }} + {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} + {{ $featured = resources.GetRemote . }} + {{ else }} + {{ $featured = resources.Get . }} + {{ end }} +{{ end }} +{{ if not $featured }} + {{ $images := .Page.Resources.ByType "image" }} + {{ range slice "*feature*" "*cover*" "*thumbnail*" }} + {{ if not $featured }}{{ $featured = $images.GetMatch . }}{{ end }} + {{ end }} +{{ end }} + +{{ with $featured }} + {{ $featuredURL = .RelPermalink }} + {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }} + {{ $featuredURL = (.Resize "600x").RelPermalink }} + {{ end }} +{{ end }} + + +
+
+ {{ with $featuredURL }} +
+ {{ $.Page.Title }} +
+ {{ end }} {{ if site.Params.taxonomy.showTermCount | default true }} @@ -28,14 +48,16 @@ {{ end }} - -
-
- {{ .Page.Title | emojify }} -
+ +
+ {{ .Page.Title | emojify }} +
+
- +
From 3f0dc1d6e1b7f917fc93ddc221da0104c70824e4 Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Sun, 7 Sep 2025 05:57:33 +0800 Subject: [PATCH 3/3] feat(hero): replace div with img tag Changed: basic and thumbAndBackground layout --- layouts/partials/hero/basic.html | 33 +++++---- layouts/partials/hero/thumbAndBackground.html | 72 +++++++++++-------- 2 files changed, 60 insertions(+), 45 deletions(-) diff --git a/layouts/partials/hero/basic.html b/layouts/partials/hero/basic.html index 34ec0f3b..36c6f8dc 100644 --- a/layouts/partials/hero/basic.html +++ b/layouts/partials/hero/basic.html @@ -1,6 +1,7 @@ {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }} {{ $featured := "" }} +{{ $featuredURL := "" }} {{ if .Params.featureimage }} {{ $url := .Params.featureimage }} {{ if or (strings.HasPrefix $url "http:") (strings.HasPrefix $url "https:") }} @@ -27,18 +28,22 @@ {{ end }} {{ end }} -{{- with $featured -}} - {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg") }} - {{ with . }} -
- {{ end }} - {{ else }} - {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }} -
- {{ end }} +{{ with $featured }} + {{ $featuredURL = .RelPermalink }} + {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }} + {{ $size := (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }} + {{ $featuredURL = (.Resize $size).RelPermalink }} {{ end }} -{{- end -}} +{{ end }} + +{{ with $featuredURL }} +
+ {{ $.Title }} +
+{{ end }} diff --git a/layouts/partials/hero/thumbAndBackground.html b/layouts/partials/hero/thumbAndBackground.html index a0b4cc94..e378537d 100644 --- a/layouts/partials/hero/thumbAndBackground.html +++ b/layouts/partials/hero/thumbAndBackground.html @@ -2,6 +2,7 @@ {{ $images := .Resources.ByType "image" }} {{ $background := $images.GetMatch "*background*" }} +{{ $backgroundURL := "" }} {{ if not $background }} {{ with .Site.Params.defaultBackgroundImage }} @@ -17,7 +18,16 @@ {{ if not $background }}{{ $background = $images.GetMatch . }}{{ end }} {{ end }} +{{ with $background }} + {{ $backgroundURL = .RelPermalink }} + {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }} + {{ $size := (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }} + {{ $backgroundURL = (.Resize $size).RelPermalink }} + {{ end }} +{{ end }} + {{ $featured := "" }} +{{ $featuredURL := "" }} {{ if .Params.featureimage }} {{ $url := .Params.featureimage }} {{ if or (strings.HasPrefix $url "http:") (strings.HasPrefix $url "https:") }} @@ -44,6 +54,14 @@ {{ end }} {{ end }} +{{ with $featured }} + {{ $featuredURL = .RelPermalink }} + {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }} + {{ $size := (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }} + {{ $featuredURL = (.Resize $size).RelPermalink }} + {{ end }} +{{ end }} + {{ $isParentList := eq (.Scratch.Get "scope") "list" }} {{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList)) @@ -51,40 +69,32 @@ ) }} -{{- with $featured -}} - {{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }} - {{ with . }} -
- {{ end }} - {{ else }} - {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }} -
- {{ end }} - {{ end }} -{{- end -}} - -{{- with $background -}} - -
- {{ $imageURL := .RelPermalink }} - {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }} - {{ $imageURL = (.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x")).RelPermalink }} - {{ end }} +{{ with $featuredURL }} +
{{ $.Title }} +
+{{ end }} + + +
+ {{ with $backgroundURL }} + Background Image -
-
-
-{{- end -}} + {{ end }} +
+
+
{{ if $shouldBlur | default false }}