78 lines
4.0 KiB
HTML
78 lines
4.0 KiB
HTML
{{template "header" .}}
|
|
<div class="sub-title">- {{ .Title }} -</div>
|
|
<div class="gallery-photos page">
|
|
<img src="https://cdn.jsdelivr.net/gh/jkjoy/14e/img/loading.svg" style="margin:auto">
|
|
</div>
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/fancyapps-ui/4.0.27/fancybox.min.css" media="print" onload="this.media='all'">
|
|
<script src="https://cdn.staticfile.org/fancyapps-ui/4.0.27/fancybox.umd.min.js"></script>
|
|
<style>
|
|
/* 页面初始化 */
|
|
.page-title{display: none;}
|
|
.page-top-card {border-radius: 12px;}
|
|
/* 页面初始化结束 */
|
|
#article-container a img {margin: 0; border-radius:0;}
|
|
.gallery-photos{width:100%;margin-top: 10px;}
|
|
.gallery-photo{min-height:5rem;width:24.97%;padding:4px;position: relative;}
|
|
.gallery-photo a{display:block;overflow: hidden;border: var(--leonus-border);}
|
|
.gallery-photo img{display: block;width:100%;animation: fadeIn 1s;cursor: pointer;transition: all .4s ease-in-out !important;}
|
|
.gallery-photo span.photo-title,.gallery-photo span.photo-time{max-width: calc(100% - 7px);position:absolute;line-height:1.8;left:4px;font-size:14px;background: rgba(0, 0, 0, 0.3);padding:0px 8px;color: #fff;animation: fadeIn 1s;}
|
|
.gallery-photo span.photo-title{bottom:4px;}
|
|
.gallery-photo span.photo-time{top:4px;}
|
|
.gallery-photo:hover img{transform: scale(1.1);}
|
|
@media screen and (max-width: 1100px) {
|
|
.gallery-photo{width:33.3%;}
|
|
}
|
|
@media screen and (max-width: 900px) {.page-top-card {margin: 0;}}
|
|
@media screen and (max-width: 768px) {
|
|
.gallery-photo{width:49.9%;padding:3px}
|
|
.gallery-photo span.photo-time{display:none}
|
|
.page-top-card {border-radius: 8px;}
|
|
.gallery-photo span.photo-title{left:3px;bottom:3px;}
|
|
}
|
|
@keyframes fadeIn{0% {opacity: 0;}100%{opacity: 1;}}
|
|
</style>
|
|
<script>
|
|
if (1) {
|
|
let url = '{{ .Data.memos_url }}' // 修改api
|
|
fetch(url + '/api/v1/memo?creatorId={{ .Data.memos_user }}&tag={{ .Data.memos_tag }}').then(res => res.json()).then(data => {
|
|
// let url = 'https://notes.starss.cc' // 修改api
|
|
// fetch(url + '/api/v1/memo?creatorId=JiXieShi&tag=相册').then(res => res.json()).then(data => {
|
|
let html = '',
|
|
imgs = []
|
|
data.forEach(item => {
|
|
let ls = item.content.match(/\!\[.*?\]\(.*?\)/g)
|
|
if (ls) imgs = imgs.concat(ls)
|
|
if (item.resourceList.length) {
|
|
item.resourceList.forEach(t => {
|
|
if (t.externalLink) imgs.push(``)
|
|
else imgs.push(``)
|
|
})
|
|
}
|
|
})
|
|
|
|
if (imgs) imgs.forEach(item => {
|
|
let img = item.replace(/!\[.*?\]\((.*?)\)/g, '$1'),
|
|
time, title, tat = item.replace(/!\[(.*?)\]\(.*?\)/g, '$1')
|
|
if (tat.indexOf(' ') != -1) {
|
|
time = tat.split(' ')[0]
|
|
title = tat.split(' ')[1]
|
|
} else title = tat
|
|
|
|
html += `<div class="gallery-photo"><a href="${img}" data-fancybox="gallery" class="fancybox" data-thumb="${img}"><img class="no-lazyload photo-img" loading='lazy' decoding="async" src="${img}"></a>`
|
|
title ? html += `<span class="photo-title">${title}</span>` : ''
|
|
time ? html += `<span class="photo-time">${time}</span>` : ''
|
|
html += `</div>`
|
|
})
|
|
console.log(Fancybox);
|
|
document.querySelector('.gallery-photos.page').innerHTML = html
|
|
imgStatus.watch('.photo-img', () => { waterfall('.gallery-photos') })
|
|
window.Lately && Lately.init({ target: '.photo-time' })
|
|
}).catch()
|
|
}
|
|
|
|
</script>
|
|
<script defer src="https://cdn.jsdelivr.net/gh/jkjoy/14e/js/waterfall.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/gh/jkjoy/14e/js/imgStatus.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/gh/jkjoy/14e/js/lately.min.js"></script>
|
|
{{template "footer" .}}
|