main
lensfrex 1 year ago
parent c6c6ea46dd
commit bf30eec559
Signed by: lensfrex
GPG Key ID: 947ADABD8533C476
  1. 15
      layout/includes/layout.pug
  2. 5
      layout/page.pug
  3. 4
      layout/post.pug
  4. 3
      scripts/fancybox.js
  5. 1
      source/css/_partials/button.styl
  6. 4
      source/css/_partials/post_page/post_page.styl
  7. 2
      source/css/common.styl
  8. 2
      source/js/util.js

@ -22,7 +22,8 @@ html(lang=config.language)
if is_post() || is_page() if is_post() || is_page()
link(rel="stylesheet", href="/css/highlight.css") link(rel="stylesheet", href="/css/highlight.css")
link(rel="stylesheet", href="https://unpkg.com/@waline/client@v2/dist/waline.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 body
#container.container #container.container
@ -50,3 +51,15 @@ html(lang=config.language)
elements_selector: 'img', elements_selector: 'img',
threshold: 0 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

@ -9,11 +9,6 @@ block content
.article-container .article-container
.article-header .article-header
- const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '') - 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 .article-info

@ -9,6 +9,7 @@ block content
.article-container .article-container
.article-header .article-header
- const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '') - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
a.cover-container(data-fancybox data-src=page.cover)
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 .article-info
@ -32,7 +33,7 @@ block content
span.author #{author} span.author #{author}
hr hr
.main-content #main-content.main-content
!= page.content != page.content
hr hr
@ -48,3 +49,4 @@ block content
path: document.location.pathname, path: document.location.pathname,
}); });

@ -1,4 +1,5 @@
// hexo.extend.filter.register('after_post_render', data => { // 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 // return data
// }) // })

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

@ -29,8 +29,10 @@
$post-width = 384px $post-width = 384px
$post-heigth = 216px $post-heigth = 216px
.cover-container
width: 50%
img.post-cover img.post-cover
width: 32% width: 100%
object-fit: cover object-fit: cover
transition: all 0.2s linear 0s transition: all 0.2s linear 0s
border-color: #4a473e91; border-color: #4a473e91;

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

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

Loading…
Cancel
Save