github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化图库瀑布效果

This commit is contained in:
1152958806@qq.com 2023-07-24 16:26:17 +08:00
parent e25d5f14bd
commit cbedb51b4a
4 changed files with 146 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
templates/assets/js/main.js
View File

@ -78,169 +78,6 @@ document.addEventListener('DOMContentLoaded', function () {
}) })
} }
/**
* 代碼
* 只適用於Hexo默認的代碼渲染
*/
// const addHighlightTool = function () {
// const highLight = GLOBAL_CONFIG.highlight
// if (!highLight) return
//
// const isHighlightCopy = highLight.highlightCopy
// const isHighlightLang = highLight.highlightLang
// const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
// const highlightHeightLimit = highLight.highlightHeightLimit
// const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
// const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
//
// if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
//
// const isPrismjs = highLight.plugin === 'prismjs'
//
// let highlightShrinkEle = ''
// let highlightCopyEle = ''
// const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
//
// if (isHighlightShrink !== undefined) {
// highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>`
// }
//
// if (isHighlightCopy) {
// highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-copy copy-button"></i>'
// }
//
// const copy = (text, ctx) => {
// if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
// document.execCommand('copy')
// if (GLOBAL_CONFIG.Snackbar !== undefined) {
// btf.snackbarShow(GLOBAL_CONFIG.copy.success)
// } else {
// const prevEle = ctx.previousElementSibling
// prevEle.innerText = GLOBAL_CONFIG.copy.success
// prevEle.style.opacity = 1
// setTimeout(() => {
// prevEle.style.opacity = 0
// }, 700)
// }
// } else {
// if (GLOBAL_CONFIG.Snackbar !== undefined) {
// btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
// } else {
// ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport
// }
// }
// }
//
// // click events
// const highlightCopyFn = (ele) => {
// const $buttonParent = ele.parentNode
// $buttonParent.classList.add('copy-true')
// const selection = window.getSelection()
// const range = document.createRange()
// if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0])
// else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0])
// selection.removeAllRanges()
// selection.addRange(range)
// const text = selection.toString()
// copy(text, ele.lastChild)
// selection.removeAllRanges()
// $buttonParent.classList.remove('copy-true')
// }
//
// const highlightShrinkFn = (ele) => {
// const $nextEle = [...ele.parentNode.children].slice(1)
// ele.firstChild.classList.toggle('closed')
// if (btf.isHidden($nextEle[$nextEle.length - 1])) {
// $nextEle.forEach(e => {
// e.style.display = 'block'
// })
// } else {
// $nextEle.forEach(e => {
// e.style.display = 'none'
// })
// }
// }
//
// const highlightToolsFn = function (e) {
// const $target = e.target.classList
// if ($target.contains('expand')) highlightShrinkFn(this)
// else if ($target.contains('copy-button')) highlightCopyFn(this)
// }
//
// const expandCode = function () {
// this.classList.toggle('expand-done')
// }
//
// function createEle(lang, item, service) {
// const fragment = document.createDocumentFragment()
//
// if (isShowTool) {
// const hlTools = document.createElement('div')
// hlTools.className = `highlight-tools ${highlightShrinkClass}`
// hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle
// hlTools.addEventListener('click', highlightToolsFn)
// fragment.appendChild(hlTools)
// }
//
// if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) {
// const ele = document.createElement('div')
// ele.className = 'code-expand-btn'
// ele.innerHTML = '<i class="fas fa-angle-double-down"></i>'
// ele.addEventListener('click', expandCode)
// fragment.appendChild(ele)
// }
//
// if (service === 'hl') {
// item.insertBefore(fragment, item.firstChild)
// } else {
// item.parentNode.insertBefore(fragment, item)
// }
// }
//
// if (isHighlightLang) {
// if (isPrismjs) {
// $figureHighlight.forEach(function (item) {
// const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
// const highlightLangEle = `<div class="code-lang">${langName}</div>`
// btf.wrap(item, 'figure', '', 'highlight')
// createEle(highlightLangEle, item)
// })
// } else {
// $figureHighlight.forEach(function (item) {
// let langName = item.getAttribute('class').split(' ')[1]
// if (langName === 'plain' || langName === undefined) langName = 'Code'
// const highlightLangEle = `<div class="code-lang">${langName}</div>`
// createEle(highlightLangEle, item, 'hl')
// })
// }
// } else {
// if (isPrismjs) {
// $figureHighlight.forEach(function (item) {
// btf.wrap(item, 'figure', '', 'highlight')
// createEle('', item)
// })
// } else {
// $figureHighlight.forEach(function (item) {
// createEle('', item, 'hl')
// })
// }
// }
// }
/**
* PhotoFigcaption
*/
// function addPhotoFigcaption() {
// document.querySelectorAll('#article-container img').forEach(function (item) {
// const parentEle = item.parentNode
// if (!parentEle.parentNode.classList.contains('justified-gallery')) {
// const ele = document.createElement('div')
// ele.className = 'img-alt is-center'
// ele.textContent = item.getAttribute('alt')
// parentEle.insertBefore(ele, item.nextSibling)
// }
// })
// }
/** /**
* justified-gallery 圖庫排版 * justified-gallery 圖庫排版
@ -249,26 +86,43 @@ document.addEventListener('DOMContentLoaded', function () {
let detectJgJsLoad = false let detectJgJsLoad = false
const runJustifiedGallery = function (ele) { const runJustifiedGallery = function (ele) {
const $justifiedGallery = $(ele)
const $imgList = $justifiedGallery.find('img')
$imgList.unwrap()
if ($imgList.length) {
$imgList.each(function (i, o) {
if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
$(o).wrap('<div></div>')
})
}
if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery) if (detectJgJsLoad) btf.initJustifiedGallerys(ele)
else { else {
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`) $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
$.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () { $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
btf.initJustifiedGallery($justifiedGallery)
btf.initJustifiedGallerys(ele)
}) })
detectJgJsLoad = true detectJgJsLoad = true
} }
} }
// let detectJgJsLoad = false
// const runJustifiedGallery = function (ele) {
// const $justifiedGallery = $(ele)
// const $imgList = $justifiedGallery.find('img')
// $imgList.unwrap()
// if ($imgList.length) {
// $imgList.each(function (i, o) {
// if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
// $(o).wrap('<div class="fj-gallery-item"></div>')
// })
// }
// const $gallery = document.querySelectorAll('.gallery')
// if (detectJgJsLoad) btf.initJustifiedGallerys($gallery)
// else {
// $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
// $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
// btf.initJustifiedGallerys($gallery)
// })
// detectJgJsLoad = true
// }
// }
/** /**
* fancybox和 mediumZoom * fancybox和 mediumZoom
*/ */
@ -322,7 +176,7 @@ document.addEventListener('DOMContentLoaded', function () {
? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.site-card-avatar):not(.flink-item-info) > img, #article-container > img,.bber-content-img > img') ? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.site-card-avatar):not(.flink-item-info) > img, #article-container > img,.bber-content-img > img')
: [] : []
const fbLengthNoZero = $fancyboxEle.length > 0 const fbLengthNoZero = $fancyboxEle.length > 0
const $jgEle = document.querySelectorAll('#article-container .justified-gallery') const $jgEle = document.querySelectorAll('#article-container .gallery')
const jgLengthNoZero = $jgEle.length > 0 const jgLengthNoZero = $jgEle.length > 0
if (jgLengthNoZero || fbLengthNoZero) { if (jgLengthNoZero || fbLengthNoZero) {

13
templates/assets/js/utils.js
View File

@ -224,6 +224,19 @@ var btf = {
} }
}) })
}, },
initJustifiedGallerys: function (selector) {
selector.forEach((function(t) {
btf.isHidden(t) || fjGallery(t, {
itemSelector: ".fj-gallery-item",
rowHeight: 240,
gutter: 4,
onJustify: function() {
this.$container.style.opacity = "1"
}
})
}
))
},
diffDate: (d, more = false) => { diffDate: (d, more = false) => {
const dateNow = new Date() const dateNow = new Date()

4
templates/modules/head.html
View File

@ -200,8 +200,8 @@
}, },
jQuery: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js', jQuery: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js',
justifiedGallery: { justifiedGallery: {
js: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js', js: 'https://npm.elemecdn.com/flickr-justified-gallery@2.1.2/dist/fjGallery.min.js',
css: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.css' css: 'https://npm.elemecdn.com/flickr-justified-gallery@2.1.2/dist/fjGallery.css'
}, },
fancybox: { fancybox: {
js: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js', js: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js',

174
templates/photos.html
View File

@ -21,99 +21,129 @@
</div> </div>
</div> </div>
</div> </div>
<div id="photos"> <div id="article-container">
<section class="timeline page-1"> <section class="timeline page-1">
<th:block th:each="group : ${groups}"> <div class="type-gallery">
<ul class="list" id="waterfall" <div class="gallery">
th:if="${#strings.toString(group.spec.displayName)}==${#strings.toString(param.photo_group_name)}"> <th:block th:each="group : ${groups}">
<li class="item" th:each="photo : ${group.photos}"> <th:block
<img th:src="${photo.spec.url}"> th:if="${#strings.toString(group.spec.displayName)}==${#strings.toString(param.photo_group_name)}">
<span class="photo-title" th:text="${photo.spec.displayName}"></span> <div class="fj-gallery-item" th:each="photo : ${group.photos}">
</li> <div class="tag-address">[[${photo.spec.displayName}]]</div>
</ul> <img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
</th:block> th:title="${photo.spec.description}">
</div>
</th:block>
</th:block>
</div>
</div>
</section> </section>
</div> </div>
<script>heo.reflashEssayWaterFall();</script>
<style> <style>
#photos { #article-container .type-gallery {
margin-top: 1rem;
width: 100%;
}
#photos .timeline #waterfall.show {
opacity: 1;
}
#photos .timeline #waterfall {
opacity: 0;
transition: 0.3s;
}
#photos ul.list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#photos .timeline ul li.item {
position: relative;
width: 24.35%;
margin: 4px;
border-radius: 12px;
transition: 0.3s;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
overflow: hidden; overflow: hidden;
margin-top: 40px;
} }
#photos .timeline ul li:hover img { #content-inner .gallery {
transform: scale(1.1); margin: 0 0 16px;
text-align: center
} }
#photos .timeline ul li.item img { #content-inner .gallery .fj-gallery {
width: 100%; opacity: 0;
animation: fadeIn 1s; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
} }
#content-inner .gallery .fj-gallery .img-alt {
span.photo-title { display: none
bottom: 4px;
border-radius: 0 8px 0 8px;
} }
span.photo-title { #content-inner .gallery .fj-gallery.lazyload+button {
max-width: calc(100% - 7px); display: inline-block
line-height: 1.8; }
#content-inner .gallery .fj-gallery .gallery-data {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
visibility: hidden
}
#content-inner .gallery button {
display: none;
margin-top: 25px;
padding: 10px;
width: 9em;
border-radius: 5px;
background: var(--btn-bg);
color: var(--btn-color);
font-weight: 700;
font-size: 1.1em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s
}
#content-inner .gallery button>* {
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
-ms-transition: all .4s;
transition: all .4s
}
#content-inner .gallery button i {
opacity: 1;
-ms-filter: none;
filter: none;
font-size: 1.1rem
}
#content-inner .gallery button:hover {
background: var(--btn-hover-color)
}
#content-inner .gallery button:hover i {
margin-left: 2px
}
#article-container .tag-address {
display: flex;
position: absolute; position: absolute;
left: 4px; left: 8px;
font-size: 14px; top: 8px;
background: rgba(0, 0, 0, .3); padding: 4px 6px;
padding: 0 8px; border-radius: 8px;
color: #fff; background: var(--heo-black-op);
animation: fadeIn 1s; font-size: 12px;
color: var(--heo-white);
transition: .3s;
z-index: 1;
user-select: none
} }
@keyframes fadeIn { img {
0% { border-style: none;
opacity: 0 border-radius: 8px;
} max-width: 100%;
100% { transition: all .2s ease 0s;
opacity: 1 -webkit-user-drag: none;
} -khtml-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none
} }
</style> </style>
<!--/* 评论组件 */--> <!--/* 评论组件 */-->
<!--/* 评论组件 */--> <th:block th:replace="~{modules/comment :: comment(group = 'content.halo.run',
<th:block
th:replace="~{modules/comment :: comment(group = 'content.halo.run',
kind = 'SinglePage', kind = 'SinglePage',
name = 'moments', name = 'moments',
allowComment = true)}"/> allowComment = true)}" />
</div> </div>
</main> </main>