diff options
| -rw-r--r-- | README.md | 22 | ||||
| -rw-r--r-- | exampleSite/config.toml | 10 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-image.html | 1 | ||||
| -rw-r--r-- | layouts/partials/sidebar.html | 2 | ||||
| -rw-r--r-- | layouts/shortcodes/lazyimg-col.html | 1 | ||||
| -rw-r--r-- | layouts/shortcodes/lazyimg-row.html | 1 | ||||
| -rw-r--r-- | layouts/shortcodes/lazyimg.html | 1 |
7 files changed, 28 insertions, 10 deletions
@@ -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 -<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a> +```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 ``````, 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 -<p><img class="lazy" src="https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.0.0/lazyload/dsr_loading.svg" data-src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} /></p> +<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a> ``` ## 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 @@ -<p><img class="lazy" src="https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.0.0/lazyload/dsr_loading.svg" data-src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} /></p>
\ 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 }} <div id="widget-bgm"> <h5>{{ i18n "sidebarBangumiChart" }}</h5> - <img class="lazy" src="{{ $.Site.Params.cdnLazyloadSRC }}" data-src="https://bgm.tv/chart/img/{{ . }}" /> + <img class="lazy" src="{{ $.Site.Params.cdnLazyPlaceholder }}" data-src="https://bgm.tv/chart/img/{{ . }}" /> </div> {{ 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 @@ +<p><img class="lazy" src="{{ .Site.Params.cdnLazyPlaceholderCol }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /></p>
\ 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 @@ +<p><img class="lazy" src="{{ .Site.Params.cdnLazyPlaceholderRow }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /></p>
\ 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 @@ +<p><img class="lazy" src="{{ .Site.Params.cdnLazyPlaceholder }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /></p>
\ No newline at end of file |