照片墙展示

This commit is contained in:
2026-05-03 08:16:26 +08:00 Unverified
parent f2428cfd8d
commit cc40ff3a38
3 changed files with 70 additions and 15 deletions
+27 -10
View File
@@ -29,17 +29,34 @@ const { topic } = Astro.props;
<div class="scrapbook">
{
topic.photos.map((photo) => (
<article
class="scrap-photo"
style={photo.image ? `--scrap-image: url("${photo.image}")` : ""}
>
<div class="scrap-frame">
<div class="scrap-image" aria-hidden="true"></div>
<div class="scrap-copy">
<strong>{photo.title}</strong>
<span>{photo.caption}</span>
<article class="scrap-photo">
{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-image scrap-placeholder" aria-hidden="true"></div>
<div class="scrap-copy">
<strong>{photo.title}</strong>
<span>{photo.caption}</span>
</div>
</div>
</div>
)}
</article>
))
}