diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug
index 8f16bed..3fa29cd 100644
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -22,8 +22,9 @@ 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
header#header.header
@@ -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
\ No newline at end of file
diff --git a/layout/page.pug b/layout/page.pug
index dc19451..882eaf7 100644
--- a/layout/page.pug
+++ b/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
diff --git a/layout/post.pug b/layout/post.pug
index 882eaf7..754a070 100644
--- a/layout/post.pug
+++ b/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
@@ -47,4 +48,5 @@ block content
pageview: true,
path: document.location.pathname,
});
+
\ No newline at end of file
diff --git a/scripts/fancybox.js b/scripts/fancybox.js
index 6f3ed04..ecfa602 100644
--- a/scripts/fancybox.js
+++ b/scripts/fancybox.js
@@ -1,4 +1,5 @@
// hexo.extend.filter.register('after_post_render', data => {
-// data.content = data.content.replaceAll(//ig, ``)
+
+// data.content = data.content.replaceAll(//ig, ``)
// return data
// })
\ No newline at end of file
diff --git a/source/css/_partials/button.styl b/source/css/_partials/button.styl
index f293c07..1d20d3e 100644
--- a/source/css/_partials/button.styl
+++ b/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)
diff --git a/source/css/_partials/post_page/post_page.styl b/source/css/_partials/post_page/post_page.styl
index d8fd3cc..271c6bb 100644
--- a/source/css/_partials/post_page/post_page.styl
+++ b/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
diff --git a/source/css/common.styl b/source/css/common.styl
index fc56edf..e7ffd76 100644
--- a/source/css/common.styl
+++ b/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
diff --git a/source/js/util.js b/source/js/util.js
index d8e32ef..c352578 100644
--- a/source/js/util.js
+++ b/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)