main
lensfrex 1 year ago
parent c6c6ea46dd
commit bf30eec559
Signed by: lensfrex
GPG Key ID: 947ADABD8533C476
  1. 15
      layout/includes/layout.pug
  2. 7
      layout/page.pug
  3. 6
      layout/post.pug
  4. 3
      scripts/fancybox.js
  5. 1
      source/css/_partials/button.styl
  6. 16
      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()
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

@ -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

@ -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,
});

@ -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
// })

@ -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)

@ -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

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

@ -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)

Loading…
Cancel
Save