diff options
| author | Eltrac <hi@guhub.cn> | 2025-04-30 15:48:21 +0800 |
|---|---|---|
| committer | Eltrac <hi@guhub.cn> | 2025-04-30 15:48:21 +0800 |
| commit | 4ed06823920334eeea2e9e00c0fc45c3e2978888 (patch) | |
| tree | b5063fd9cd04a6c1446982df3652017e91ce23f0 | |
| parent | cc4ec7c21c8e5fbe5b12f6210faf72bd276526ba (diff) | |
chore: deal with image lazyloading
- lazyload post banner image
- lazyload book cover
- tidy up lazyload attributes in image shortcode
| -rw-r--r-- | layouts/library/single.html | 6 | ||||
| -rw-r--r-- | layouts/partials/components/banner.html | 6 | ||||
| -rw-r--r-- | layouts/shortcodes/img.html | 7 |
3 files changed, 16 insertions, 3 deletions
diff --git a/layouts/library/single.html b/layouts/library/single.html index 26a6f02f..6eb32a94 100644 --- a/layouts/library/single.html +++ b/layouts/library/single.html @@ -3,7 +3,11 @@ <div class="book-page-header"> <div class="book-cover" style="view-transition-name: book-{{ .File.UniqueID }}"> - <img src="{{ .Params.cover }}" /> + <img + class="lazy" + src="{{ .Params.cover }}!thumbnail" + data-src="{{ .Params.cover }}" + /> </div> <h1 class="book-title">{{ .Title }}</h1> {{- $rating := .Params.rating -}} diff --git a/layouts/partials/components/banner.html b/layouts/partials/components/banner.html index 58fb54da..94600d4f 100644 --- a/layouts/partials/components/banner.html +++ b/layouts/partials/components/banner.html @@ -1,6 +1,10 @@ {{ with .Params.banner }} <div class="post-banner"> - <img src="{{ . }}"> + <img + class="lazy" + src="{{ . }}!thumbnail" + data-src="{{ . }}" + > </div> <style> .post-banner img { diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html index cb2d2571..10005506 100644 --- a/layouts/shortcodes/img.html +++ b/layouts/shortcodes/img.html @@ -2,7 +2,12 @@ <figure {{ with .Get "class" }}class="{{ . }}"{{ end }}> {{ with .Get "link" }}<a href="{{ . }}">{{ end }} <a href="{{ .Get "src" }}" data-fancybox {{ if isset .Params "title" }} data-caption="{{.Get "title" }}" {{ end }}> - <img class="lazy" data-src="{{ .Get "src" }}" src="{{ .Get "src" }}!thumbnail" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} /> + <img + class="lazy" + data-src="{{ .Get "src" }}" + src="{{ .Get "src" }}!thumbnail" + {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} + /> </a> {{ if .Get "link" }}</a>{{ end }} {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }} |