feat(img): setup Viewer.js to image for convenience

Ref: https://github.com/fengyuanchen/viewerjs/tree/main

Author: timfanda35

themes/simplecss/layouts/partials/footer.html

@@ -21,3 +21,15 @@
 {{- if not .Site.IsServer -}}
   {{ template "_internal/google_analytics.html" . }}
 {{- end -}}
+
+<!-- ViewerJS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js" integrity="sha512-EC3CQ+2OkM+ZKsM1dbFAB6OGEPKRxi6EDRnZW9ys8LghQRAq6cXPUgXCCujmDrXdodGXX9bqaaCRtwj4h4wgSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script>
+  const gallery = new Viewer(
+    document.querySelector("article > div:nth-child(2)"),
+    {
+      toolbar: false,
+      initialCoverage: 1
+    }
+  );
+</script>

themes/simplecss/layouts/partials/head.html

@@ -29,5 +29,8 @@
   <link rel="stylesheet" href="{{ "css/customize.css" | absURL }}">
   {{ partial "json-sitename.html" . }}
 
+  <!-- ViewerJS -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.css" integrity="sha512-za6IYQz7tR0pzniM/EAkgjV1gf1kWMlVJHBHavKIvsNoUMKWU99ZHzvL6lIobjiE2yKDAKMDSSmcMAxoiWgoWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
   <link rel="canonical" href="{{ .Permalink }}" />
 </head>

themes/simplecss/static/css/customize.css

@@ -17,3 +17,8 @@ a:hover {
 .site-header {
   font-size: xx-large;
 }
+
+/* Refine Image */
+img {
+  opacity: 1;
+}