feat: image lazyload & refactor: external js import

4 files changed, 19 insertions, 6 deletions

diff --git a/hugo.toml b/hugo.toml
index d4746487..5e1c8440 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -23,6 +23,10 @@ extraCSSFiles = [
     'https://unpkg.com/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.css',
     'https://unpkg.com/@waline/client@v3/dist/waline.css'
 ]
+externalJSFIles = [
+    'https://unpkg.com/swup@4',
+    'https://unpkg.com/vanilla-lazyload@19.1.3/dist/lazyload.min.js'
+]
 
 [[params.nav]]
 name = "关于"
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 75a1ec36..d8daaaa0 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,5 +1,7 @@
 <!-- third-party libraries -->
-<script src="https://unpkg.com/swup@4"></script>
+{{ range .Site.Params.externalJSFiles -}}
+<script src="{{ $.Site.Params.staticPrefix }}{{ . | relURL }}"></script>
+{{- end }}
 <script type="module">
 import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
 
@@ -24,7 +26,14 @@ function loadWalineComment() {
 
 loadWalineComment();
 
+/* === lazyload === */
+var lazyLoadInstance = new LazyLoad();
+lazyLoadInstance.update();
+
 /* === swup === */
 const swup = new Swup();
-swup.hooks.on('page:view', loadWalineComment);
+swup.hooks.on('page:view', () => {
+  loadWalineComment();
+  lazyLoadInstance.update();
+});
 </script>
diff --git a/layouts/shortcodes/book.html b/layouts/shortcodes/book.html
index 17747acc..31999088 100644
--- a/layouts/shortcodes/book.html
+++ b/layouts/shortcodes/book.html
@@ -1,7 +1,7 @@
 <div class="book-showcase">
     <div class="book-cover">
         <a href="{{ .Get "cover" }}" data-fancybox>
-            <img src="{{ .Get "cover" }}"  />
+            <img class="lazy" data-src="{{ .Get "cover" }}"  />
         </a>
     </div>
     <div class="book-description">
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index 4fd1f739..8bf45ad4 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -2,8 +2,8 @@
 <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 src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} />
-    </a> 
+        <img class="lazy" data-src="{{ .Get "src" }}" {{ 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") }}
     <figcaption>{{ if isset .Params "title" }}
@@ -17,4 +17,4 @@
     </figcaption>
 {{ end }}
 </figure>
-<!-- image -->
\ No newline at end of file
+<!-- image -->