Fix medium-zoom

6 files changed, 83 insertions, 31 deletions

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 1b20943..397ff55 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,3 +1 @@
-<a href="{{ .Destination | safeURL }}" target="_blank">
-    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
-</a>
\ No newline at end of file
+<img class="img-zoomable" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 1bcdf85..85f008e 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -40,6 +40,8 @@
 {{ with .Site.Params.googleAdsense }}
 <script async data-ad-client="ca-pub-{{ . }}" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 {{ end}}
+<script async type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.esm.js"></script>
+<script async nomodule src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.js"></script>
 {{ if .Params.player }}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css" />
 {{ end }}
diff --git a/layouts/partials/scripts-end.html b/layouts/partials/scripts-end.html
index 37311b7..b945211 100644
--- a/layouts/partials/scripts-end.html
+++ b/layouts/partials/scripts-end.html
@@ -1,20 +1,17 @@
-<script async type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.esm.js"></script>
-<script async nomodule src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.js"></script>
 {{ if eq .Section "search" }}
 <script defer src="https://cdn.jsdelivr.net/combine/npm/art-template@4.13.2/lib/template-web.min.js,npm/fuse.js@6.2.0"></script>
 {{ else if eq .Section "archives" }}
 {{ else }}
+<script defer src="https://cdn.jsdelivr.net/combine/npm/medium-zoom@1.0.5,npm/lazysizes@5.2.2"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/prism-core.min.js"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script>
 {{ end }}
 <script defer src="{{ "/assets/js/fuji.min.js" | relURL }}"></script>
 {{ with .Params.player }}
 <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
-<!-- prettier-ignore -->
 <script>
     // in-post aplayer
-    /* beautify preserve:start */
+    // prettier-ignore
     var aPlayer = new APlayer({
         container: document.getElementById('post-aplayer'),
         theme: '#8f82bc',
@@ -29,7 +26,6 @@
             },
             {{- end -}}]
     });
-    /* beautify preserve:end */
     // aplayer toc anchors fix
     // see https://github.com/MoePlayer/APlayer/issues/242#issuecomment-602471423
     document.addEventListener('DOMContentLoaded', function () {
diff --git a/layouts/shortcodes/img-lazy.html b/layouts/shortcodes/img-lazy.html
index e57b8fb..a8927a5 100644
--- a/layouts/shortcodes/img-lazy.html
+++ b/layouts/shortcodes/img-lazy.html
@@ -1,22 +1,22 @@
-{{- if len .Params | eq 2 -}}
-<p>
-     <a href="{{ index .Params 1 | safeURL }}" target="_blank">
-          <img class="lazyload" src="{{ .Site.Params.lazyPlaceholder | relURL }}"
-               data-src="{{ index .Params 1 | safeURL }}" alt="{{ index .Params 0 }}" />
-     </a>
-</p>
-{{- else if len .Params | eq 3 }}{{ if eq (index .Params 0) "row" -}}
-<p>
-     <a href="{{ index .Params 2 | safeURL }}" target="_blank">
-          <img class="lazyload" src="{{ .Site.Params.lazyPlaceholderRow | relURL }}"
-               data-src="{{ index .Params 2 | safeURL }}" alt="{{ index .Params 1 }}" />
-     </a>
-</p>
-{{- else if eq (index .Params 0) "col" -}}
-<p>
-     <a href="{{ index .Params 2 | safeURL }}" target="_blank">
-          <img class="lazyload" src="{{ .Site.Params.lazyPlaceholderCol | relURL }}"
-               data-src="{{ index .Params 2 | safeURL }}" alt="{{ index .Params 1 }}" />
-     </a>
-</p>
-{{- else -}}{{- end -}}{{- else -}}{{ end -}}
\ No newline at end of file
+{{ if len .Params | eq 2 }}
+<img
+  class="lazyload img-zoomable"
+  src="{{ .Site.Params.lazyPlaceholder | relURL }}"
+  data-src="{{ index .Params 1 }}"
+  alt="{{ index .Params 0 }}"
+/>
+{{ else if len .Params | eq 3 }}{{ if eq (index .Params 0) "row" }}
+<img
+  class="lazyload img-zoomable"
+  src="{{ .Site.Params.lazyPlaceholderRow | relURL }}"
+  data-src="{{ index .Params 2 }}"
+  alt="{{ index .Params 1 }}"
+/>
+{{ else if eq (index .Params 0) "col" }}
+<img
+  class="lazyload img-zoomable"
+  src="{{ .Site.Params.lazyPlaceholderCol | relURL }}"
+  data-src="{{ index .Params 2 }}"
+  alt="{{ index .Params 1 }}"
+/>
+{{ else }}{{ end }}{{ else }}{{ end }}
diff --git a/layouts/shortcodes/img-nz-lazy.html b/layouts/shortcodes/img-nz-lazy.html
new file mode 100644
index 0000000..a606f51
--- /dev/null
+++ b/layouts/shortcodes/img-nz-lazy.html
@@ -0,0 +1,49 @@
+{{ if len .Params | eq 2 }}
+<img
+  class="lazyload"
+  src="{{ .Site.Params.lazyPlaceholder | relURL }}"
+  data-src="{{ index .Params 1 }}"
+  alt="{{ index .Params 0 }}"
+/>
+{{ else if len .Params | eq 3 }}{{ if eq (index .Params 0) "row" }}
+<img
+  class="lazyload"
+  src="{{ .Site.Params.lazyPlaceholderRow | relURL }}"
+  data-src="{{ index .Params 2 }}"
+  alt="{{ index .Params 1 }}"
+/>
+{{ else if eq (index .Params 0) "col" }}
+<img
+  class="lazyload"
+  src="{{ .Site.Params.lazyPlaceholderCol | relURL }}"
+  data-src="{{ index .Params 2 }}"
+  alt="{{ index .Params 1 }}"
+/>
+{{ else }}
+<a href="{{ index .Params 2 }}" target="_blank">
+  <img
+    class="lazyload"
+    src="{{ .Site.Params.lazyPlaceholder | relURL }}"
+    data-src="{{ index .Params 1 }}"
+    alt="{{ index .Params 0 }}"
+  />
+</a>
+{{ end }}{{ else if len .Params | eq 4 }}{{ if eq (index .Params 0) "row" }}
+<a href="{{ index .Params 3 }}" target="_blank">
+  <img
+    class="lazyload"
+    src="{{ .Site.Params.lazyPlaceholderRow | relURL }}"
+    data-src="{{ index .Params 2 }}"
+    alt="{{ index .Params 1 }}"
+  />
+</a>
+{{ else if eq (index .Params 0) "col" }}
+<a href="{{ index .Params 3 }}" target="_blank">
+  <img
+    class="lazyload"
+    src="{{ .Site.Params.lazyPlaceholderCol | relURL }}"
+    data-src="{{ index .Params 2 }}"
+    alt="{{ index .Params 1 }}"
+  />
+</a>
+{{ else }}{{ end }}{{ else }}{{ end }}
diff --git a/layouts/shortcodes/img-nz.html b/layouts/shortcodes/img-nz.html
new file mode 100644
index 0000000..30ea28a
--- /dev/null
+++ b/layouts/shortcodes/img-nz.html
@@ -0,0 +1,7 @@
+{{ if (index .Params 2) }}
+<a href="{{ index .Params 2 }}" target="_blank">
+  <img src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" />
+</a>
+{{ else }}
+<img src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" />
+{{ end }}