fancybox

layout/includes/layout.pug

@@ -22,7 +22,8 @@ html(lang=config.language)
     if is_post() || is_page()
       link(rel="stylesheet", href="/css/highlight.css")
       link(rel="stylesheet", href="https://unpkg.com/@waline/client@v2/dist/waline.css")
-      script.
+      link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css")
+    script(src="/js/util.js")
 
   body
     #container.container
@@ -50,3 +51,15 @@ html(lang=config.language)
         elements_selector: 'img',
         threshold: 0
       });
+    script(src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js")
+    script.
+      let postImageElements = document.querySelectorAll('.main-content img');
+      postImageElements.forEach(element => {
+        if (element.parentNode.tagName !== 'A') {
+          const dataSrc = element.getAttribute("data-src")
+          const dataCaption = element.title || element.alt || ''
+          utils.wrapElement(element, 'a', { href: dataSrc, 'data-fancybox': '', 'data-caption': dataCaption, 'data-thumb': dataSrc })
+        }
+      })
+      Fancybox.bind('[data-fancybox]', {});    
+    script

layout/page.pug

@@ -9,12 +9,7 @@ block content
     .article-container
       .article-header
         - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
-        a(
-          data-fancybox 
-          href=has_cover ? page.cover : undefined 
-          data-caption="Single image" 
-        )
-          img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
+        img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
 
         .article-info
           span.article-title= page.title

layout/post.pug

@@ -9,7 +9,8 @@ block content
     .article-container
       .article-header
         - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
-        img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
+        a.cover-container(data-fancybox data-src=page.cover)
+          img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
 
         .article-info
           span.article-title= page.title
@@ -32,7 +33,7 @@ block content
             span.author #{author}
 
       hr
-      .main-content
+      #main-content.main-content
         != page.content
 
       hr
@@ -48,3 +49,4 @@ block content
             path: document.location.pathname,
           });
       
+        

scripts/fancybox.js

@@ -1,4 +1,5 @@
 // hexo.extend.filter.register('after_post_render', data => {
-//   data.content = data.content.replaceAll(/<img (.*?)>/ig, `<img data-fancybox $1>`)
+
+//   data.content = data.content.replaceAll(/<img(.*?)src="(.*?)">/ig, `<a data-fancybox ><img data-fancybox $1>`)
 //   return data
 // })

source/css/_partials/button.styl

@@ -21,6 +21,7 @@
       background-size: 200%
       transition: all 0.2s linear 0s
       cursor: default
+      min-width: min-content
       &:hover
         background-position: -100% center
         color: rgb(180, 175, 154)

source/css/_partials/post_page/post_page.styl

@@ -29,13 +29,15 @@
 
     $post-width = 384px
     $post-heigth = 216px
-    img.post-cover
-      width: 32%
-      object-fit: cover
-      transition: all 0.2s linear 0s
-      border-color: #4a473e91;
-      border-style: solid;
-      border-width: 2px;
+    .cover-container
+      width: 50%
+      img.post-cover
+        width: 100%
+        object-fit: cover
+        transition: all 0.2s linear 0s
+        border-color: #4a473e91;
+        border-style: solid;
+        border-width: 2px;
     .article-info
       display: flex
       flex-direction: column

source/css/common.styl

@@ -31,7 +31,7 @@ body > * ::selection
 //   width: 100%
 
 #header
-  margin-top: 1%
+  margin-top: 1.5%
 #main
   flex: 1
   margin: 2em 0

source/js/util.js

@@ -1,5 +1,5 @@
 const utils = {
-  wrap: (selector, eleType, options) => {
+  wrapElement: (selector, eleType, options) => {
     const creatEle = document.createElement(eleType)
     for (const [key, value] of Object.entries(options)) {
       creatEle.setAttribute(key, value)