feat: medium zoom for images

https://github.com/francoischalifour/medium-zoom
reuixiy · Jan 2, 2020 · b7cf602 · b7cf602
1 parent ad0f403
commit b7cf602
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 3 deletions.
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -102,7 +102,7 @@
         position: relative;
         z-index: 4;
     }
-    [data-theme="dark"] .post img {
+    [data-theme="dark"] img {
         filter: brightness(50%);
     }
 {{ end }}

diff --git a/config-examples/en-us/config.toml b/config-examples/en-us/config.toml
@@ -1175,6 +1175,13 @@ uglyURLs = false
     # Note: https://github.com/cferdinandi/smooth-scroll
 
 
+    ######################################
+    # Medium Zoom
+
+    enableMediumZoom = true
+    # Note: https://github.com/francoischalifour/medium-zoom
+
+
     ######################################
     # 404 Page
 

diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
@@ -1145,6 +1145,13 @@ uglyURLs = false
     # 说明：https://github.com/cferdinandi/smooth-scroll
 
 
+    ######################################
+    # 图片缩放
+
+    enableMediumZoom = true
+    # 说明：https://github.com/francoischalifour/medium-zoom
+
+
     ######################################
     # 404 页面
 

diff --git a/...leSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.content b/...leSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.content
diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json b/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json
@@ -1 +1 @@
-{"Target":"css/meme.min.6d3c21d9e26feb664656273dcabec98fd69d798917e8a1badb2d70b7cf5c9dfb.css","MediaType":"text/css","Data":{"Integrity":"sha256-bTwh2eJv62ZGVic9yr7Jj9adeYkX6KG62y1wt89cnfs="}}
+{"Target":"css/meme.min.46b2a650b7c9df1e9a4c1f4bbdb37e988a26d2f08cc6ebc293c348fe3b595a8e.css","MediaType":"text/css","Data":{"Integrity":"sha256-RrKmULfJ3x6aTB9LvbN+mIom0vCMxuvCk8NI/jtZWo4="}}
diff --git a/layouts/partials/components/content.html b/layouts/partials/components/content.html
@@ -210,6 +210,15 @@
     {{- end -}}
 {{- end -}}
 
+<!-- Medium Zoom -->
+{{- $Content := .Scratch.Get "Content" -}}
+{{- if .Site.Params.enableMediumZoom -}}
+    {{- $regexPatternMediumZoom := `(<img)(.+)( />)` -}}
+    {{- $regexReplacementMediumZoom := `$1$2 data-zoomable$3` -}}
+    {{- $Content := $Content | replaceRE $regexPatternMediumZoom $regexReplacementMediumZoom | safeHTML -}}
+    {{- .Scratch.Set "Content" $Content -}}
+{{- end -}}
+
 <!-- Custom -->
 {{- partial "custom/content.html" . -}}
 

diff --git a/layouts/partials/script.html b/layouts/partials/script.html
@@ -70,6 +70,10 @@
     {{ end }}
 {{ end }}
 
+{{ if .Site.Params.enableMediumZoom }}
+    {{ partial "third-party/medium-zoom.html" . }}
+{{ end }}
+
 {{ partial "third-party/service-worker.html" . }}
 
 {{ partial "third-party/busuanzi.html" . }}

diff --git a/layouts/partials/third-party/medium-zoom.html b/layouts/partials/third-party/medium-zoom.html
@@ -0,0 +1,7 @@
+<script src="https://cdn.jsdelivr.net/npm/medium-zoom@latest/dist/medium-zoom.min.js"></script>
+
+<script>
+    mediumZoom('[data-zoomable]', {
+        background: 'hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.95)'
+    })
+</script>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"Target":"css/meme.min.6d3c21d9e26feb664656273dcabec98fd69d798917e8a1badb2d70b7cf5c9dfb.css","MediaType":"text/css","Data":{"Integrity":"sha256-bTwh2eJv62ZGVic9yr7Jj9adeYkX6KG62y1wt89cnfs="}}
		{"Target":"css/meme.min.46b2a650b7c9df1e9a4c1f4bbdb37e988a26d2f08cc6ebc293c348fe3b595a8e.css","MediaType":"text/css","Data":{"Integrity":"sha256-RrKmULfJ3x6aTB9LvbN+mIom0vCMxuvCk8NI/jtZWo4="}}