update fancybox 5.0

rzy0901 · Nov 28, 2023 · a3e8e25 · a3e8e25
1 parent 6fcaf7f
commit a3e8e25
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,8 @@
   1. Dark/Light mode.
   2. Solve Mathjax bug (quite important for latex users).
   3. Add "print the page as pdf" option (just enter a blog post, right click and select "print..." to have a try).
-  4. Some other tiny changes such as excluding some posts from archives...
+  4. Upgrade fancybox gallery to 5.0 for the aim of dark mode compatibility.
+  5. Some other tiny changes such as excluding some posts from archives...
 
   I don't make a pull request to the original [even](https://github.com/olOwOlo/hugo-theme-even) since the owner seems to be disappeared. And my codes are a little messy that I do not have time to distinguish them into several independent commits.
 

diff --git a/config.toml b/config.toml
@@ -87,7 +87,7 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
   # Some global options, you can also close or open something in front matter for a single post, see more information from `archetypes/default.md`.
   toc = true                                                                            # 是否开启目录
   autoCollapseToc = false   # Auto expand and collapse toc                              # 目录自动展开/折叠
-  fancybox = false           # see https://github.com/fancyapps/fancybox                 # 是否启用fancybox（图片可点击）
+  fancybox = true           # see https://github.com/fancyapps/fancybox                 # 是否启用fancybox（图片可点击）
 
   # mathjax
   mathjax = true           # see https://www.mathjax.org/                              # 是否使用mathjax（数学公式）
@@ -123,8 +123,10 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
     enable = false
     jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>'
     slideout = '<script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>'
-    fancyboxJS = '<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>'
-    fancyboxCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">'
+    # fancyboxJS = '<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>'
+    # fancyboxCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">'
+    fancyboxJS = '<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>'
+    fancyboxCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>'
     timeagoJS = '<script src="https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.min.js" integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin="anonymous"></script>'
     timeagoLocalesJS = '<script src="https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.locales.min.js" integrity="sha256-ZwofwC1Lf/faQCzN7nZtfijVV6hSwxjQMwXL4gn9qU8=" crossorigin="anonymous"></script>'
     flowchartDiagramsJS = '<script src="https://cdn.jsdelivr.net/npm/raphael@2.2.7/raphael.min.js" integrity="sha256-67By+NpOtm9ka1R6xpUefeGOY8kWWHHRAKlvaTJ7ONI=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/flowchart.js@1.8.0/release/flowchart.min.js" integrity="sha256-zNGWjubXoY6rb5MnmpBNefO0RgoVYfle9p0tvOQM+6k=" crossorigin="anonymous"></script>'
@@ -153,7 +155,7 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
     repo = ""               # The repo to store comments
     clientId = ""           # Your client ID
     clientSecret = ""       # Your client secret
-
+    
   # Valine.
   # You can get your appid and appkey from https://leancloud.cn
   # more info please open https://valine.js.org

diff --git a/content/post/usage.md b/content/post/usage.md
@@ -50,7 +50,8 @@ Compared with orignal [even](https://github.com/olOwOlo/hugo-theme-even), my the
 1. Dark/Light mode.
 2. Solve Mathjax bug (quite important for latex users).
 3. Add "print the page as pdf" option (just right click and select "print..." to have a try).
-4. Some other tiny changes such as excluding some posts from archives...
+4. Upgrade fancybox gallery to 5.0 for the aim of dark mode compatibility.
+5. Some other tiny changes such as excluding some posts from archives...
 
 I don't make a pull request to the original [even](https://github.com/olOwOlo/hugo-theme-even) since the owner seems to be disappeared. And my codes are a little messy that I do not have time to distinguish them into several independent commits.
 

diff --git a/themes/even/layouts/partials/head.html b/themes/even/layouts/partials/head.html
@@ -66,7 +66,8 @@
 {{ if .Site.Params.publicCDN.enable -}}
   {{ if .Site.Params.fancybox }}{{ .Site.Params.publicCDN.fancyboxCSS | safeHTML }}{{ end }}
 {{- else -}}
-  {{ if .Site.Params.fancybox }}<link href="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.css" | relURL }}" rel="stylesheet">{{ end }}
+  <!-- {{ if .Site.Params.fancybox }}<link href="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.css" | relURL }}" rel="stylesheet">{{ end }} -->
+  {{ if .Site.Params.fancybox }}<link href="{{ "lib/fancybox/fancybox.css" | relURL }}" rel="stylesheet">{{ end }}
 {{- end -}}
 
 <!-- custom css -->

diff --git a/themes/even/layouts/partials/scripts.html b/themes/even/layouts/partials/scripts.html
@@ -11,8 +11,23 @@
 {{- else -}}
   <script type="text/javascript" src="{{ "lib/jquery/jquery-3.2.1.min.js" | relURL }}"></script>
   <script type="text/javascript" src="{{ "lib/slideout/slideout-1.0.1.min.js" | relURL }}"></script>
-  {{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.js" | relURL }}"></script>{{ end }}
+  <!-- {{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.js" | relURL }}"></script>{{ end }} -->
+  {{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/fancybox.umd.js" | relURL }}"></script>{{ end }}
 {{- end -}}
+<!-- https://fancyapps.com/fancybox/getting-started/ -->
+<script>
+  $(document).ready(function() {
+    // Find all images in the content and add data-fancybox attribute
+    $("article img").each(function() {
+      $(this).attr("data-fancybox", "gallery");
+    });
+
+    // Initialize Fancybox
+    Fancybox.bind("[data-fancybox]", {
+      // Optional configuration options
+    });
+  });
+</script>
 
 <!-- timeago.JS -->
 {{- if and (or .Params.enableOutdatedInfoWarning (and .Site.Params.outdatedInfoWarning.enable (ne .Params.enableOutdatedInfoWarning false))) (or .IsPage .IsHome) }}
@@ -168,7 +183,9 @@
   if(!isMobile){
      document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv));
   }
-</script> 
+</script>
+{{ end }}
+
 <script>
   //通过时间判断夜间模式，否则会完全手动切换并本地持久化模式，下次自动渲染本地持久化的模式
 var darkMode = {
@@ -268,4 +285,4 @@
 };
 darkMode.init();
 </script> 
-{{ end }}
+
diff --git a/themes/even/static/lib/fancybox/fancybox.css b/themes/even/static/lib/fancybox/fancybox.css
diff --git a/themes/even/static/lib/fancybox/fancybox.umd.js b/themes/even/static/lib/fancybox/fancybox.umd.js