升级

src/data/photos.ts

@@ -1,27 +1,129 @@
 export const galleryIntro = {
   title: "照片墙",
-  text: "后续可以把这些色块换成真实照片。建议每类选 6 到 12 张，少一点反而更有纪念册的质感。"
+  text: "照片按专题收纳：教室日常、班级活动、毕业那天、没被摆拍的瞬间。点进专题后，就像把一叠照片随手摊在桌上慢慢翻。"
 };
 
-export const photos = [
+export const photoTopics = [
   {
+    slug: "classroom",
     title: "教室日常",
-    text: "黑板、课桌、窗边、试卷",
-    image: ""
+    text: "黑板、课桌、窗边、试卷，还有那些写在草稿纸边角的小情绪。",
+    cover: "",
+    photos: [
+      {
+        title: "窗边的座位",
+        caption: "把真实照片放到 public/photos/classroom/window-seat.jpg 后，再把 image 改成对应路径。",
+        image: ""
+      },
+      {
+        title: "黑板角落",
+        caption: "适合放倒计时、值日表、板书和课代表留下的提醒。",
+        image: ""
+      },
+      {
+        title: "堆满书的桌面",
+        caption: "那些看起来很乱、后来又很想念的普通一天。",
+        image: ""
+      },
+      {
+        title: "晚自习灯光",
+        caption: "可以放教室灯亮着、窗外天色暗下来的照片。",
+        image: ""
+      },
+      {
+        title: "课间十分钟",
+        caption: "不用太正式，越像随手拍越有高中味道。",
+        image: ""
+      }
+    ]
   },
   {
+    slug: "events",
     title: "班级活动",
-    text: "运动会、晚会、春游、比赛",
-    image: ""
+    text: "运动会、晚会、春游、比赛，所有离开课桌之后还在一起发光的时刻。",
+    cover: "",
+    photos: [
+      {
+        title: "运动会看台",
+        caption: "喊到嗓子哑的那一天。",
+        image: ""
+      },
+      {
+        title: "班级节目",
+        caption: "排练时觉得麻烦，回头看全是可爱。",
+        image: ""
+      },
+      {
+        title: "集体出游",
+        caption: "人群、阳光、背包和没停过的聊天。",
+        image: ""
+      },
+      {
+        title: "比赛现场",
+        caption: "赢没赢都记得，站在一起才是重点。",
+        image: ""
+      }
+    ]
   },
   {
+    slug: "graduation-day",
     title: "毕业那天",
-    text: "合照、签名、花束、校门",
-    image: ""
+    text: "合照、签名、花束、校门和没说完的话，都放在这个专题里。",
+    cover: "",
+    photos: [
+      {
+        title: "最后一张合照",
+        caption: "这里最适合放班级毕业照。",
+        image: ""
+      },
+      {
+        title: "校服签名",
+        caption: "名字挤在一起，像那天没来得及说完的话。",
+        image: ""
+      },
+      {
+        title: "校门口",
+        caption: "出发的地方，也成了回头看的地方。",
+        image: ""
+      },
+      {
+        title: "花和证书",
+        caption: "仪式感不用太多，一束花就够亮。",
+        image: ""
+      },
+      {
+        title: "散场之前",
+        caption: "那一刻大家都在笑，但心里都知道要分别了。",
+        image: ""
+      }
+    ]
   },
   {
+    slug: "candid",
     title: "没被摆拍的瞬间",
-    text: "走廊、食堂、晚霞和笑场",
-    image: ""
+    text: "走廊、食堂、晚霞和笑场。真正会让人停下来的，常常是不太整齐的照片。",
+    cover: "",
+    photos: [
+      {
+        title: "走廊偶遇",
+        caption: "模糊一点也没关系，像真的从记忆里翻出来。",
+        image: ""
+      },
+      {
+        title: "食堂那一桌",
+        caption: "饭菜不一定好吃，但聊天是真的好笑。",
+        image: ""
+      },
+      {
+        title: "操场晚霞",
+        caption: "很多故事都发生在天快黑的时候。",
+        image: ""
+      },
+      {
+        title: "笑场",
+        caption: "最不端正的照片，往往最像我们。",
+        image: ""
+      }
+    ]
   }
 ];

src/pages/gallery.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
-import { galleryIntro, photos } from "../data/photos";
+import { galleryIntro, photoTopics } from "../data/photos";
 import { site } from "../data/site";
 ---
 
@@ -19,16 +19,17 @@ import { site } from "../data/site";
       <div class="section-inner">
         <div class="photo-grid page-grid">
           {
-            photos.map((photo) => (
-              <article
-                class="photo-card"
-                style={photo.image ? `--photo-image: url("${photo.image}")` : ""}
+            photoTopics.map((topic) => (
+              <a
+                class="photo-card topic-card"
+                href={`/gallery/${topic.slug}/`}
+                style={topic.cover ? `--photo-image: url("${topic.cover}")` : ""}
               >
                 <div>
-                  <strong>{photo.title}</strong>
-                  <span>{photo.text}</span>
+                  <strong>{topic.title}</strong>
+                  <span>{topic.text}</span>
                 </div>
-              </article>
+              </a>
             ))
           }
         </div>

src/pages/gallery/[slug].astro

@@ -0,0 +1,50 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { galleryIntro, photoTopics } from "../../data/photos";
+import { site } from "../../data/site";
+
+export function getStaticPaths() {
+  return photoTopics.map((topic) => ({
+    params: { slug: topic.slug },
+    props: { topic }
+  }));
+}
+
+const { topic } = Astro.props;
+---
+
+<BaseLayout title={`${topic.title} · ${galleryIntro.title} · ${site.className}`}>
+  <main class="page-main">
+    <section class="page-hero">
+      <div class="section-inner">
+        <a class="back-link" href="/gallery/">返回照片墙</a>
+        <p class="eyebrow">Photo Topic</p>
+        <h1>{topic.title}</h1>
+        <p>{topic.text}</p>
+      </div>
+    </section>
+
+    <section class="gallery-band scrapbook-section">
+      <div class="section-inner">
+        <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>
+                  </div>
+                </div>
+              </article>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+  </main>
+</BaseLayout>