升级

astro.config.mjs

@@ -1,5 +1,15 @@
 import { defineConfig } from "astro/config";
+import { fileURLToPath } from "node:url";
 
 export default defineConfig({
-  site: "https://example.com"
+  site: "https://example.com",
+  vite: {
+    resolve: {
+      alias: {
+        "astro/entrypoints/prerender": fileURLToPath(
+          new URL("./node_modules/astro/dist/entrypoints/prerender.js", import.meta.url)
+        )
+      }
+    }
+  }
 });

package.json

@@ -9,9 +9,8 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.4",
+    "@astrojs/check": "^0.9.9",
-    "astro": "^4.16.18",
+    "astro": "^6.2.1",
-    "typescript": "^5.6.3"
+    "typescript": "^6.0.3"
-  },
+  }
-  "devDependencies": {}
 }

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: "黑板、课桌、窗边、试卷",
+    text: "黑板、课桌、窗边、试卷，还有那些写在草稿纸边角的小情绪。",
-    image: ""
+    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: "运动会、晚会、春游、比赛",
+    text: "运动会、晚会、春游、比赛，所有离开课桌之后还在一起发光的时刻。",
-    image: ""
+    cover: "",
+    photos: [
+      {
+        title: "运动会看台",
+        caption: "喊到嗓子哑的那一天。",
+        image: ""
+      },
+      {
+        title: "班级节目",
+        caption: "排练时觉得麻烦，回头看全是可爱。",
+        image: ""
+      },
+      {
+        title: "集体出游",
+        caption: "人群、阳光、背包和没停过的聊天。",
+        image: ""
+      },
+      {
+        title: "比赛现场",
+        caption: "赢没赢都记得，站在一起才是重点。",
+        image: ""
+      }
+    ]
   },
   {
+    slug: "graduation-day",
     title: "毕业那天",
-    text: "合照、签名、花束、校门",
+    text: "合照、签名、花束、校门和没说完的话，都放在这个专题里。",
-    image: ""
+    cover: "",
+    photos: [
+      {
+        title: "最后一张合照",
+        caption: "这里最适合放班级毕业照。",
+        image: ""
+      },
+      {
+        title: "校服签名",
+        caption: "名字挤在一起，像那天没来得及说完的话。",
+        image: ""
+      },
+      {
+        title: "校门口",
+        caption: "出发的地方，也成了回头看的地方。",
+        image: ""
+      },
+      {
+        title: "花和证书",
+        caption: "仪式感不用太多，一束花就够亮。",
+        image: ""
+      },
+      {
+        title: "散场之前",
+        caption: "那一刻大家都在笑，但心里都知道要分别了。",
+        image: ""
+      }
+    ]
   },
   {
+    slug: "candid",
     title: "没被摆拍的瞬间",
-    text: "走廊、食堂、晚霞和笑场",
+    text: "走廊、食堂、晚霞和笑场。真正会让人停下来的，常常是不太整齐的照片。",
-    image: ""
+    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) => (
+            photoTopics.map((topic) => (
-              <article
+              <a
-                class="photo-card"
+                class="photo-card topic-card"
-                style={photo.image ? `--photo-image: url("${photo.image}")` : ""}
+                href={`/gallery/${topic.slug}/`}
+                style={topic.cover ? `--photo-image: url("${topic.cover}")` : ""}
               >
                 <div>
-                  <strong>{photo.title}</strong>
+                  <strong>{topic.title}</strong>
-                  <span>{photo.text}</span>
+                  <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>

src/pages/index.astro

@@ -1,13 +1,13 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
-import { galleryIntro, photos } from "../data/photos";
+import { galleryIntro, photoTopics } from "../data/photos";
 import { featuredMessage, messages, messagesIntro } from "../data/messages";
 import { people, peopleIntro } from "../data/people";
 import { site, stats } from "../data/site";
 import { timeline, timelineIntro } from "../data/timeline";
 
 const previewTimeline = timeline.slice(0, 4);
-const previewPhotos = photos.slice(0, 4);
+const previewPhotoTopics = photoTopics.slice(0, 4);
 const previewPeople = people.slice(0, 6);
 ---
 
@@ -74,16 +74,17 @@ const previewPeople = people.slice(0, 6);
 
         <div class="photo-grid">
           {
-            previewPhotos.map((photo) => (
+            previewPhotoTopics.map((topic) => (
-              <article
+              <a
-                class="photo-card"
+                class="photo-card topic-card"
-                style={photo.image ? `--photo-image: url("${photo.image}")` : ""}
+                href={`/gallery/${topic.slug}/`}
+                style={topic.cover ? `--photo-image: url("${topic.cover}")` : ""}
               >
                 <div>
-                  <strong>{photo.title}</strong>
+                  <strong>{topic.title}</strong>
-                  <span>{photo.text}</span>
+                  <span>{topic.text}</span>
                 </div>
-              </article>
+              </a>
             ))
           }
         </div>

src/styles/global.css

@@ -315,6 +315,17 @@ h2 {
   box-shadow: var(--shadow);
 }
 
+.topic-card {
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.topic-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 24px 60px rgba(39, 55, 52, 0.18);
+}
+
 .photo-card:nth-child(4n + 1) {
   --tile-bg: linear-gradient(135deg, #376d5a, #e8a84c);
 }
@@ -357,6 +368,109 @@ h2 {
   align-items: stretch;
 }
 
+.scrapbook-section {
+  padding-top: clamp(48px, 7vw, 92px);
+}
+
+.scrapbook {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: clamp(14px, 2vw, 26px);
+  align-items: start;
+  padding-block: 18px 36px;
+}
+
+.scrap-photo {
+  --rotate: 0deg;
+  --shift: 0px;
+  grid-column: span 4;
+  transform: translateY(var(--shift)) rotate(var(--rotate));
+  transform-origin: center;
+}
+
+.scrap-photo:nth-child(6n + 1) {
+  --rotate: -2.2deg;
+  --shift: 18px;
+  grid-column: span 5;
+}
+
+.scrap-photo:nth-child(6n + 2) {
+  --rotate: 1.6deg;
+  --shift: -8px;
+  grid-column: span 3;
+}
+
+.scrap-photo:nth-child(6n + 3) {
+  --rotate: -0.8deg;
+  --shift: 36px;
+  grid-column: span 4;
+}
+
+.scrap-photo:nth-child(6n + 4) {
+  --rotate: 2.4deg;
+  --shift: -2px;
+  grid-column: span 4;
+}
+
+.scrap-photo:nth-child(6n + 5) {
+  --rotate: -1.4deg;
+  --shift: 28px;
+  grid-column: span 3;
+}
+
+.scrap-photo:nth-child(6n) {
+  --rotate: 1.1deg;
+  --shift: 8px;
+  grid-column: span 5;
+}
+
+.scrap-frame {
+  padding: 10px 10px 16px;
+  border: 1px solid rgba(31, 43, 42, 0.1);
+  border-radius: 4px;
+  background: #fffef9;
+  box-shadow:
+    0 18px 38px rgba(39, 55, 52, 0.14),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
+}
+
+.scrap-image {
+  min-height: clamp(190px, 24vw, 320px);
+  border-radius: 3px;
+  background: var(--scrap-image, linear-gradient(135deg, #376d5a, #e8a84c));
+  background-size: cover;
+  background-position: center;
+}
+
+.scrap-photo:nth-child(4n + 2) .scrap-image {
+  background: var(--scrap-image, linear-gradient(135deg, #456f94, #f0c66d));
+}
+
+.scrap-photo:nth-child(4n + 3) .scrap-image {
+  background: var(--scrap-image, linear-gradient(135deg, #c96452, #f1d9a6));
+}
+
+.scrap-photo:nth-child(4n) .scrap-image {
+  background: var(--scrap-image, linear-gradient(135deg, #263e5c, #7ab28b));
+}
+
+.scrap-copy {
+  padding: 12px 4px 0;
+}
+
+.scrap-copy strong {
+  display: block;
+  font-size: 18px;
+  line-height: 1.35;
+}
+
+.scrap-copy span {
+  display: block;
+  margin-top: 5px;
+  color: var(--muted);
+  font-size: 14px;
+}
+
 .person {
   min-height: 210px;
   padding: 22px;
@@ -475,6 +589,16 @@ footer {
     grid-template-columns: 1fr 1fr;
   }
 
+  .scrapbook {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .scrap-photo,
+  .scrap-photo:nth-child(n) {
+    grid-column: span 3;
+    transform: none;
+  }
+
   .moment {
     grid-template-columns: 1fr;
   }
@@ -500,4 +624,19 @@ footer {
   .photo-card:nth-child(4) {
     min-height: 220px;
   }
+
+  .scrapbook {
+    display: grid;
+    grid-template-columns: 1fr;
+    padding-block: 0;
+  }
+
+  .scrap-photo,
+  .scrap-photo:nth-child(n) {
+    grid-column: auto;
+  }
+
+  .scrap-image {
+    min-height: 220px;
+  }
 }