From 71ae6d1e825fdb782328653f121651dc515b29e9 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Mon, 20 Apr 2020 19:08:56 +0800 Subject: Optional lazy image instead of global set --- README.md | 22 ++++++++++++++++------ exampleSite/config.toml | 10 ++++++++-- layouts/_default/_markup/render-image.html | 1 - layouts/partials/sidebar.html | 2 +- layouts/shortcodes/lazyimg-col.html | 1 + layouts/shortcodes/lazyimg-row.html | 1 + layouts/shortcodes/lazyimg.html | 1 + 7 files changed, 28 insertions(+), 10 deletions(-) delete mode 100644 layouts/_default/_markup/render-image.html create mode 100644 layouts/shortcodes/lazyimg-col.html create mode 100644 layouts/shortcodes/lazyimg-row.html create mode 100644 layouts/shortcodes/lazyimg.html diff --git a/README.md b/README.md index 01d4502..3caba0a 100644 --- a/README.md +++ b/README.md @@ -53,18 +53,28 @@ $ hugo --minify ## Advance configration -You can create the files below in your site to adjust the markdown render hook, see [Hugo's Official Docs](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks). +### Lazyload images -You can use ```layouts/_default/_markup/render-link.html``` to decide whether or not links in the markdown content will open in new tab: +Lazyload images in posts, for example in ```content/post/test.md```: -```html -{{ .Text | safeHTML }} +```go-html-template +{{< lazyimg "This is alt text" "/img/sample.png" >}} +{{< lazyimg-row "This is alt text" "/img/sample.png" >}} +{{< lazyimg-col "This is alt text" "/img/sample.png" >}} ``` -You can use ```layouts/_default/_markup/render-image.html``` to change the lazyload placeholder: +```lazyimg``` will show a 16x9 placeholder before image is loaded, so ```lazyimg-row``` will show a 32x9 placeholder and ```lazyimg-col``` will show a 8x9 placeholder. You can choose different aspect ratios you want for different images. The placeholder image can be set in site's ```config.toml```. + +Note that if you use the origin markdown syntax to add images such as ```![This is alt text](/img/sample.png)```, it will not become a lazy image. + +### Markdown render hook + +You can create the files below in your site to adjust the markdown render hook, see [Hugo's Official Docs](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks). + +You can use ```layouts/_default/_markup/render-link.html``` to decide whether or not links in the markdown content will open in new tab: ```html -

{{ .Text }}

+{{ .Text | safeHTML }} ``` ## Update the theme diff --git a/exampleSite/config.toml b/exampleSite/config.toml index fd7113c..51e802e 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -54,8 +54,14 @@ paginate = 10 disqusComment = false disqusShortname = "[ENTER YOUR DISQUS SHORTNAME HERE]" - # Custom lazyload thumbnail - cdnLazyloadSRC = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.0.0/lazyload/dsr_loading.svg" + # Custom lazyload placeholder + # 16:9 + cdnLazyPlaceholder = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.1.0/lazyload/dsrca_loading_480x270.svg" + # 32:9 + cdnLazyPlaceholderRow = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.1.0/lazyload/dsrca_loading_960x270.svg" + # 8:9 + cdnLazyPlaceholderCol = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.1.0/lazyload/dsrca_loading_480x540.svg" + # Custom css & js CDN # cdnIntersectionObserverJS = "https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection-observer.min.js" # Optional cdnVanillaLazyloadJS = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js" diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html deleted file mode 100644 index 5242d97..0000000 --- a/layouts/_default/_markup/render-image.html +++ /dev/null @@ -1 +0,0 @@ -

{{ .Text }}

\ No newline at end of file diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 61f2868..8b84596 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -32,6 +32,6 @@ {{ with .Site.Params.bgmImageChart }}
{{ i18n "sidebarBangumiChart" }}
- +
{{ end }} \ No newline at end of file diff --git a/layouts/shortcodes/lazyimg-col.html b/layouts/shortcodes/lazyimg-col.html new file mode 100644 index 0000000..0192ba5 --- /dev/null +++ b/layouts/shortcodes/lazyimg-col.html @@ -0,0 +1 @@ +

{{ index .Params 0 }}

\ No newline at end of file diff --git a/layouts/shortcodes/lazyimg-row.html b/layouts/shortcodes/lazyimg-row.html new file mode 100644 index 0000000..dd07f93 --- /dev/null +++ b/layouts/shortcodes/lazyimg-row.html @@ -0,0 +1 @@ +

{{ index .Params 0 }}

\ No newline at end of file diff --git a/layouts/shortcodes/lazyimg.html b/layouts/shortcodes/lazyimg.html new file mode 100644 index 0000000..a23a15e --- /dev/null +++ b/layouts/shortcodes/lazyimg.html @@ -0,0 +1 @@ +

{{ index .Params 0 }}

\ No newline at end of file -- cgit v1.2.3