biss/class
1
0
Fork 0
Code Actions Wiki Activity

照片墙展示

Browse Source
This commit is contained in:
biss
2026-05-03 08:16:26 +08:00
Unverified
parent f2428cfd8d
commit cc40ff3a38
3 changed files with 70 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/BaseLayout.astro
+14
View File
@@ -15,6 +15,10 @@ const { title = site.title } = Astro.props;
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title> <title>{title}</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>
</head> </head>
<body> <body>
<header class="site-header" aria-label="网站导航"> <header class="site-header" aria-label="网站导航">
@@ -69,5 +73,15 @@ const { title = site.title } = Astro.props;
}); });
} }
</script> </script>
<script
is:inline
src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"
></script>
<script is:inline>
window.Fancybox?.bind("[data-fancybox]", {
animated: true,
dragToClose: true
});
</script>
</body> </body>
</html> </html>
src/pages/gallery/[slug].astro
+21 -4
View File
@@ -29,17 +29,34 @@ const { topic } = Astro.props;
<div class="scrapbook"> <div class="scrapbook">
{ {
topic.photos.map((photo) => ( topic.photos.map((photo) => (
<article <article class="scrap-photo">
class="scrap-photo" {photo.image ? (
style={photo.image ? `--scrap-image: url("${photo.image}")` : ""} <a
class="scrap-frame scrap-link"
href={photo.image}
data-fancybox={`gallery-${topic.slug}`}
data-caption={`${photo.title} - ${photo.caption}`}
> >
<img
class="scrap-image scrap-image-file"
src={photo.image}
alt={photo.title}
loading="lazy"
/>
<div class="scrap-copy">
<strong>{photo.title}</strong>
<span>{photo.caption}</span>
</div>
</a>
) : (
<div class="scrap-frame"> <div class="scrap-frame">
<div class="scrap-image" aria-hidden="true"></div> <div class="scrap-image scrap-placeholder" aria-hidden="true"></div>
<div class="scrap-copy"> <div class="scrap-copy">
<strong>{photo.title}</strong> <strong>{photo.title}</strong>
<span>{photo.caption}</span> <span>{photo.caption}</span>
</div> </div>
</div> </div>
)}
</article> </article>
)) ))
} }
src/styles/global.css
+29 -5
View File
@@ -480,6 +480,7 @@ h2 {
} }
.scrap-frame { .scrap-frame {
display: block;
padding: 10px 10px 16px; padding: 10px 10px 16px;
border: 1px solid rgba(31, 43, 42, 0.1); border: 1px solid rgba(31, 43, 42, 0.1);
border-radius: 4px; border-radius: 4px;
@@ -489,23 +490,46 @@ h2 {
inset 0 0 0 1px rgba(255, 255, 255, 0.7); inset 0 0 0 1px rgba(255, 255, 255, 0.7);
} }
.scrap-link {
cursor: zoom-in;
transition:
box-shadow 180ms ease,
transform 180ms ease;
}
.scrap-link:hover {
transform: translateY(-3px);
box-shadow:
0 24px 50px rgba(39, 55, 52, 0.18),
inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.scrap-image { .scrap-image {
min-height: clamp(190px, 24vw, 320px); width: 100%;
border-radius: 3px; border-radius: 3px;
}
.scrap-image-file {
height: auto;
background: #f7f2e7;
}
.scrap-placeholder {
min-height: clamp(190px, 24vw, 320px);
background: var(--scrap-image, linear-gradient(135deg, #376d5a, #e8a84c)); background: var(--scrap-image, linear-gradient(135deg, #376d5a, #e8a84c));
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.scrap-photo:nth-child(4n + 2) .scrap-image { .scrap-photo:nth-child(4n + 2) .scrap-placeholder {
background: var(--scrap-image, linear-gradient(135deg, #456f94, #f0c66d)); background: var(--scrap-image, linear-gradient(135deg, #456f94, #f0c66d));
} }
.scrap-photo:nth-child(4n + 3) .scrap-image { .scrap-photo:nth-child(4n + 3) .scrap-placeholder {
background: var(--scrap-image, linear-gradient(135deg, #c96452, #f1d9a6)); background: var(--scrap-image, linear-gradient(135deg, #c96452, #f1d9a6));
} }
.scrap-photo:nth-child(4n) .scrap-image { .scrap-photo:nth-child(4n) .scrap-placeholder {
background: var(--scrap-image, linear-gradient(135deg, #263e5c, #7ab28b)); background: var(--scrap-image, linear-gradient(135deg, #263e5c, #7ab28b));
} }
@@ -955,7 +979,7 @@ footer {
transform: none !important; transform: none !important;
} }
.scrap-image { .scrap-placeholder {
min-height: 220px; min-height: 220px;
} }
} }