From ab5bb96c27dae05d187a566d56d2ff4adafada51 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Mon, 20 Apr 2020 17:19:48 +0800
Subject: Apply lazyload to images in markdown content

---
 README.md                                  | 16 ++++++++++++++++
 exampleSite/config.toml                    |  2 +-
 layouts/_default/_markup/render-image.html |  1 +
 layouts/_default/_markup/render-link.html  |  2 +-
 4 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 layouts/_default/_markup/render-image.html

diff --git a/README.md b/README.md
index fafcc5c..01d4502 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,22 @@ If you want to generate your site, just run:
 $ 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).
+
+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
+<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a>
+```
+
+You can use ```layouts/_default/_markup/render-image.html``` to change the lazyload placeholder:
+
+```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>
+```
+
 ## Update the theme
 
 Inside the folder of your Hugo site run:
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 3aa10a7..90e6a87 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -54,7 +54,7 @@ paginate = 10
   disqusShortname = "[ENTER YOUR DISQUS SHORTNAME HERE]"
 
   # Custom lazyload thumbnail
-  cdnLazyloadSRC = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr/lazyload/dsr_loading.svg"
+  cdnLazyloadSRC = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.0.0/lazyload/dsr_loading.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
new file mode 100644
index 0000000..5242d97
--- /dev/null
+++ b/layouts/_default/_markup/render-image.html
@@ -0,0 +1 @@
+<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/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
index a5cd49a..a1a40fd 100644
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -1 +1 @@
-<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a>
\ No newline at end of file
+<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a>
\ No newline at end of file
-- 
cgit v1.2.3