diff options
| -rw-r--r-- | hugo.toml | 4 | ||||
| -rw-r--r-- | layouts/partials/scripts.html | 13 | ||||
| -rw-r--r-- | layouts/shortcodes/book.html | 2 | ||||
| -rw-r--r-- | layouts/shortcodes/img.html | 6 |
4 files changed, 19 insertions, 6 deletions
@@ -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 --> |