增加页

src/data/messages.ts

@@ -0,0 +1,20 @@
+export const messagesIntro = {
+  title: "留言墙",
+  text: "可以把收集来的留言放在这里。老师寄语、同学短句、匿名祝福都很适合。"
+};
+
+export const featuredMessage = {
+  text: "后来我们去了不同的地方，但那间教室像一个坐标，提醒我们曾经一起出发。",
+  author: "写给高三 X 班"
+};
+
+export const messages = [
+  {
+    title: "给一年后的自己",
+    text: "不要忘记当时为什么出发，也不要害怕路上偶尔慢一点。"
+  },
+  {
+    title: "给老同学",
+    text: "愿你打开这个页面的时候，刚好想起一个很好的下午。"
+  }
+];

src/data/people.ts

@@ -0,0 +1,43 @@
+export const peopleIntro = {
+  title: "一年后的我们",
+  text: "这里可以做成同学卡片：姓名、所在城市、学校或方向，以及一句想对大家说的话。"
+};
+
+export const people = [
+  {
+    initial: "A",
+    name: "同学 A",
+    location: "北京",
+    text: "这一年的关键词：开始、独立、想念。想和大家说：下次见面一定要拍一张新的合照。"
+  },
+  {
+    initial: "B",
+    name: "同学 B",
+    location: "上海",
+    text: "偶尔还是会梦到上课铃。高中最珍贵的是：有人陪你一起把普通日子过得很亮。"
+  },
+  {
+    initial: "C",
+    name: "同学 C",
+    location: "广州",
+    text: "现在比以前更忙，也更懂得珍惜。希望大家都在自己的路上慢慢发光。"
+  },
+  {
+    initial: "D",
+    name: "同学 D",
+    location: "成都",
+    text: "想念晚自习后的小卖部，也想念那些不用解释就能笑出来的人。"
+  },
+  {
+    initial: "E",
+    name: "同学 E",
+    location: "武汉",
+    text: "一年过去，很多事情都变了，但听到班级群消息还是会立刻点开。"
+  },
+  {
+    initial: "F",
+    name: "同学 F",
+    location: "南京",
+    text: "希望我们都成为更好的自己，也永远记得曾经一起努力过的样子。"
+  }
+];

src/data/photos.ts

@@ -0,0 +1,27 @@
+export const galleryIntro = {
+  title: "照片墙",
+  text: "后续可以把这些色块换成真实照片。建议每类选 6 到 12 张，少一点反而更有纪念册的质感。"
+};
+
+export const photos = [
+  {
+    title: "教室日常",
+    text: "黑板、课桌、窗边、试卷",
+    image: ""
+  },
+  {
+    title: "班级活动",
+    text: "运动会、晚会、春游、比赛",
+    image: ""
+  },
+  {
+    title: "毕业那天",
+    text: "合照、签名、花束、校门",
+    image: ""
+  },
+  {
+    title: "没被摆拍的瞬间",
+    text: "走廊、食堂、晚霞和笑场",
+    image: ""
+  }
+];

src/data/site.ts

@@ -9,10 +9,11 @@ export const site = {
 };
 
 export const navItems = [
-  { label: "三年时间线", href: "#timeline" },
+  { label: "首页", href: "/" },
-  { label: "照片墙", href: "#gallery" },
+  { label: "三年时间线", href: "/timeline/" },
-  { label: "一年后的我们", href: "#people" },
+  { label: "照片墙", href: "/gallery/" },
-  { label: "留言墙", href: "#messages" }
+  { label: "一年后的我们", href: "/people/" },
+  { label: "留言墙", href: "/messages/" }
 ];
 
 export const stats = [
@@ -20,101 +21,3 @@ export const stats = [
   { value: "365", label: "离开校园后的第一年" },
   { value: "∞", label: "还会被想起的瞬间" }
 ];
-
-export const timeline = [
-  {
-    date: "高一 · 九月",
-    title: "第一次点名",
-    text: "很多名字还对不上脸，但同一间教室已经开始收藏我们的吵闹、紧张和新鲜感。"
-  },
-  {
-    date: "高二 · 秋天",
-    title: "运动会和晚自习后的风",
-    text: "有人在跑道上冲线，有人在看台上喊到嗓子哑。那天的风，后来吹进了很多照片里。"
-  },
-  {
-    date: "高三 · 春天",
-    title: "倒计时牌越来越小",
-    text: "黑板角落的数字每天少一点，我们一边嫌累，一边悄悄把彼此记得更牢。"
-  },
-  {
-    date: "毕业 · 六月",
-    title: "合照里的那个下午",
-    text: "校服、签名、拥抱和没说完的话，都被按下快门，留在了那一年最亮的地方。"
-  }
-];
-
-export const gallery = [
-  {
-    title: "教室日常",
-    text: "黑板、课桌、窗边、试卷"
-  },
-  {
-    title: "班级活动",
-    text: "运动会、晚会、春游、比赛"
-  },
-  {
-    title: "毕业那天",
-    text: "合照、签名、花束、校门"
-  },
-  {
-    title: "没被摆拍的瞬间",
-    text: "走廊、食堂、晚霞和笑场"
-  }
-];
-
-export const people = [
-  {
-    initial: "A",
-    name: "同学 A",
-    location: "北京",
-    text: "这一年的关键词：开始、独立、想念。想和大家说：下次见面一定要拍一张新的合照。"
-  },
-  {
-    initial: "B",
-    name: "同学 B",
-    location: "上海",
-    text: "偶尔还是会梦到上课铃。高中最珍贵的是：有人陪你一起把普通日子过得很亮。"
-  },
-  {
-    initial: "C",
-    name: "同学 C",
-    location: "广州",
-    text: "现在比以前更忙，也更懂得珍惜。希望大家都在自己的路上慢慢发光。"
-  },
-  {
-    initial: "D",
-    name: "同学 D",
-    location: "成都",
-    text: "想念晚自习后的小卖部，也想念那些不用解释就能笑出来的人。"
-  },
-  {
-    initial: "E",
-    name: "同学 E",
-    location: "武汉",
-    text: "一年过去，很多事情都变了，但听到班级群消息还是会立刻点开。"
-  },
-  {
-    initial: "F",
-    name: "同学 F",
-    location: "南京",
-    text: "希望我们都成为更好的自己，也永远记得曾经一起努力过的样子。"
-  }
-];
-
-export const messages = {
-  featured: {
-    text: "后来我们去了不同的地方，但那间教室像一个坐标，提醒我们曾经一起出发。",
-    author: "写给高三 X 班"
-  },
-  items: [
-    {
-      title: "给一年后的自己",
-      text: "不要忘记当时为什么出发，也不要害怕路上偶尔慢一点。"
-    },
-    {
-      title: "给老同学",
-      text: "愿你打开这个页面的时候，刚好想起一个很好的下午。"
-    }
-  ]
-};

src/data/timeline.ts

@@ -0,0 +1,27 @@
+export const timelineIntro = {
+  title: "从第一节课，到最后一次回头",
+  text: "把班级大事按时间放在这里。现在是示例内容，之后可以替换成军训、运动会、成人礼、百日誓师、毕业照等真实节点。"
+};
+
+export const timeline = [
+  {
+    date: "高一 · 九月",
+    title: "第一次点名",
+    text: "很多名字还对不上脸，但同一间教室已经开始收藏我们的吵闹、紧张和新鲜感。"
+  },
+  {
+    date: "高二 · 秋天",
+    title: "运动会和晚自习后的风",
+    text: "有人在跑道上冲线，有人在看台上喊到嗓子哑。那天的风，后来吹进了很多照片里。"
+  },
+  {
+    date: "高三 · 春天",
+    title: "倒计时牌越来越小",
+    text: "黑板角落的数字每天少一点，我们一边嫌累，一边悄悄把彼此记得更牢。"
+  },
+  {
+    date: "毕业 · 六月",
+    title: "合照里的那个下午",
+    text: "校服、签名、拥抱和没说完的话，都被按下快门，留在了那一年最亮的地方。"
+  }
+];

src/layouts/BaseLayout.astro

@@ -0,0 +1,31 @@
+---
+import "../styles/global.css";
+import { navItems, site } from "../data/site";
+
+interface Props {
+  title?: string;
+}
+
+const { title = site.title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <header class="site-header" aria-label="网站导航">
+      <a class="brand" href="/">{site.className}</a>
+      <nav class="nav">
+        {navItems.map((item) => <a href={item.href}>{item.label}</a>)}
+      </nav>
+    </header>
+
+    <slot />
+
+    <footer>{site.footer}</footer>
+  </body>
+</html>

src/pages/gallery.astro

@@ -0,0 +1,38 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { galleryIntro, photos } from "../data/photos";
+import { site } from "../data/site";
+---
+
+<BaseLayout title={`${galleryIntro.title} · ${site.className}`}>
+  <main class="page-main">
+    <section class="page-hero">
+      <div class="section-inner">
+        <a class="back-link" href="/">返回首页</a>
+        <p class="eyebrow">Gallery</p>
+        <h1>{galleryIntro.title}</h1>
+        <p>{galleryIntro.text}</p>
+      </div>
+    </section>
+
+    <section class="gallery-band">
+      <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}")` : ""}
+              >
+                <div>
+                  <strong>{photo.title}</strong>
+                  <span>{photo.text}</span>
+                </div>
+              </article>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+  </main>
+</BaseLayout>

src/pages/index.astro

@@ -1,169 +1,157 @@
 ---
-import "../styles/global.css";
+import BaseLayout from "../layouts/BaseLayout.astro";
-import {
+import { galleryIntro, photos } from "../data/photos";
-  gallery,
+import { featuredMessage, messages, messagesIntro } from "../data/messages";
-  messages,
+import { people, peopleIntro } from "../data/people";
-  navItems,
+import { site, stats } from "../data/site";
-  people,
+import { timeline, timelineIntro } from "../data/timeline";
-  site,
+
-  stats,
+const previewTimeline = timeline.slice(0, 4);
-  timeline
+const previewPhotos = photos.slice(0, 4);
-} from "../data/site";
+const previewPeople = people.slice(0, 6);
 ---
 
-<!doctype html>
+<BaseLayout title={site.title}>
-<html lang="zh-CN">
+  <section
-  <head>
+    id="top"
-    <meta charset="utf-8" />
+    class="hero"
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    style={`--hero-image: url("${site.heroImage}")`}
-    <title>{site.title}</title>
+  >
-  </head>
+    <div class="hero-content">
-  <body>
+      <p class="eyebrow">{site.anniversary}</p>
-    <header class="site-header" aria-label="网站导航">
+      <h1>{site.title}</h1>
-      <a class="brand" href="#top">{site.className}</a>
+      <p>{site.subtitle}</p>
-      <nav class="nav">
+      <div class="hero-actions">
-        {navItems.map((item) => <a href={item.href}>{item.label}</a>)}
+        <a class="button primary" href="/timeline/">翻开回忆</a>
-      </nav>
+        <a class="button" href="/messages/">写一句话</a>
-    </header>
+      </div>
+    </div>
+  </section>
 
-    <section
+  <aside class="stats" aria-label="纪念数据">
-      id="top"
+    {
-      class="hero"
+      stats.map((item) => (
-      style={`--hero-image: url("${site.heroImage}")`}
+        <div class="stat">
-    >
+          <strong>{item.value}</strong>
-      <div class="hero-content">
+          <span>{item.label}</span>
-        <p class="eyebrow">{site.anniversary}</p>
-        <h1>{site.title}</h1>
-        <p>{site.subtitle}</p>
-        <div class="hero-actions">
-          <a class="button primary" href="#timeline">翻开回忆</a>
-          <a class="button" href="#messages">写一句话</a>
         </div>
+      ))
+    }
+  </aside>
+
+  <main>
+    <section id="timeline">
+      <div class="section-inner">
+        <div class="section-title">
+          <h2>{timelineIntro.title}</h2>
+          <p>{timelineIntro.text}</p>
+        </div>
+
+        <div class="timeline">
+          {
+            previewTimeline.map((moment) => (
+              <article class="moment">
+                <time>{moment.date}</time>
+                <div>
+                  <h3>{moment.title}</h3>
+                  <p>{moment.text}</p>
+                </div>
+              </article>
+            ))
+          }
+        </div>
+
+        <a class="section-link" href="/timeline/">查看完整时间线</a>
       </div>
     </section>
 
-    <aside class="stats" aria-label="纪念数据">
+    <section id="gallery" class="gallery-band">
-      {
+      <div class="section-inner">
-        stats.map((item) => (
+        <div class="section-title">
-          <div class="stat">
+          <h2>{galleryIntro.title}</h2>
-            <strong>{item.value}</strong>
+          <p>{galleryIntro.text}</p>
-            <span>{item.label}</span>
+        </div>
-          </div>
-        ))
-      }
-    </aside>
 
-    <main>
+        <div class="photo-grid">
-      <section id="timeline">
+          {
-        <div class="section-inner">
+            previewPhotos.map((photo) => (
-          <div class="section-title">
+              <article
-            <h2>从第一节课，到最后一次回头</h2>
+                class="photo-card"
-            <p>
+                style={photo.image ? `--photo-image: url("${photo.image}")` : ""}
-              把班级大事按时间放在这里。现在是示例内容，之后可以替换成军训、运动会、成人礼、百日誓师、毕业照等真实节点。
+              >
-            </p>
+                <div>
-          </div>
+                  <strong>{photo.title}</strong>
+                  <span>{photo.text}</span>
+                </div>
+              </article>
+            ))
+          }
+        </div>
 
-          <div class="timeline">
+        <a class="section-link" href="/gallery/">查看全部照片</a>
+      </div>
+    </section>
+
+    <section id="people">
+      <div class="section-inner">
+        <div class="section-title">
+          <h2>{peopleIntro.title}</h2>
+          <p>{peopleIntro.text}</p>
+        </div>
+
+        <div class="people-grid">
+          {
+            previewPeople.map((person) => (
+              <article class="person">
+                <div class="avatar">{person.initial}</div>
+                <h3>
+                  {person.name} · {person.location}
+                </h3>
+                <p>{person.text}</p>
+              </article>
+            ))
+          }
+        </div>
+
+        <a class="section-link" href="/people/">查看所有同学</a>
+      </div>
+    </section>
+
+    <section id="messages" class="gallery-band">
+      <div class="section-inner">
+        <div class="section-title">
+          <h2>{messagesIntro.title}</h2>
+          <p>{messagesIntro.text}</p>
+        </div>
+
+        <div class="message-wall">
+          <article class="message featured">
+            <p>“{featuredMessage.text}”</p>
+            <cite>{featuredMessage.author}</cite>
+          </article>
+          <div class="small-messages">
             {
-              timeline.map((moment) => (
+              messages.slice(0, 2).map((message) => (
-                <article class="moment">
+                <article class="message">
-                  <time>{moment.date}</time>
+                  <h3>{message.title}</h3>
-                  <div>
+                  <p>{message.text}</p>
-                    <h3>{moment.title}</h3>
-                    <p>{moment.text}</p>
-                  </div>
                 </article>
               ))
             }
           </div>
         </div>
-      </section>
 
-      <section id="gallery" class="gallery-band">
+        <a class="section-link" href="/messages/">查看全部留言</a>
-        <div class="section-inner">
+      </div>
-          <div class="section-title">
+    </section>
-            <h2>照片墙先留四个位置</h2>
-            <p>
-              后续可以把这些色块换成真实照片。建议每类选 6 到 12 张，少一点反而更有纪念册的质感。
-            </p>
-          </div>
 
-          <div class="photo-grid">
+    <section class="ending">
-            {
+      <div class="section-inner">
-              gallery.map((item) => (
+        <h2>下一次见面，我们再补一张合照</h2>
-                <article class="photo-card">
+        <p>
-                  <div>
+          这个网站会继续长大：添上真实照片、真实名字、真实留言，然后成为属于我们班的一本电子纪念册。
-                    <strong>{item.title}</strong>
+        </p>
-                    <span>{item.text}</span>
+      </div>
-                  </div>
+    </section>
-                </article>
+  </main>
-              ))
+</BaseLayout>
-            }
-          </div>
-        </div>
-      </section>
-
-      <section id="people">
-        <div class="section-inner">
-          <div class="section-title">
-            <h2>一年后的我们</h2>
-            <p>
-              这里可以做成同学卡片：姓名、所在城市、学校或方向，以及一句想对大家说的话。
-            </p>
-          </div>
-
-          <div class="people-grid">
-            {
-              people.map((person) => (
-                <article class="person">
-                  <div class="avatar">{person.initial}</div>
-                  <h3>
-                    {person.name} · {person.location}
-                  </h3>
-                  <p>{person.text}</p>
-                </article>
-              ))
-            }
-          </div>
-        </div>
-      </section>
-
-      <section id="messages" class="gallery-band">
-        <div class="section-inner">
-          <div class="section-title">
-            <h2>留言墙</h2>
-            <p>可以把收集来的留言放在这里。老师寄语、同学短句、匿名祝福都很适合。</p>
-          </div>
-
-          <div class="message-wall">
-            <article class="message featured">
-              <p>“{messages.featured.text}”</p>
-              <cite>{messages.featured.author}</cite>
-            </article>
-            <div class="small-messages">
-              {
-                messages.items.map((message) => (
-                  <article class="message">
-                    <h3>{message.title}</h3>
-                    <p>{message.text}</p>
-                  </article>
-                ))
-              }
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section class="ending">
-        <div class="section-inner">
-          <h2>下一次见面，我们再补一张合照</h2>
-          <p>
-            这个网站会继续长大：添上真实照片、真实名字、真实留言，然后成为属于我们班的一本电子纪念册。
-          </p>
-        </div>
-      </section>
-    </main>
-
-    <footer>{site.footer}</footer>
-  </body>
-</html>

src/pages/messages.astro

@@ -0,0 +1,39 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { featuredMessage, messages, messagesIntro } from "../data/messages";
+import { site } from "../data/site";
+---
+
+<BaseLayout title={`${messagesIntro.title} · ${site.className}`}>
+  <main class="page-main">
+    <section class="page-hero">
+      <div class="section-inner">
+        <a class="back-link" href="/">返回首页</a>
+        <p class="eyebrow">Messages</p>
+        <h1>{messagesIntro.title}</h1>
+        <p>{messagesIntro.text}</p>
+      </div>
+    </section>
+
+    <section class="gallery-band">
+      <div class="section-inner">
+        <div class="message-wall">
+          <article class="message featured">
+            <p>“{featuredMessage.text}”</p>
+            <cite>{featuredMessage.author}</cite>
+          </article>
+          <div class="small-messages">
+            {
+              messages.map((message) => (
+                <article class="message">
+                  <h3>{message.title}</h3>
+                  <p>{message.text}</p>
+                </article>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</BaseLayout>

src/pages/people.astro

@@ -0,0 +1,36 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { people, peopleIntro } from "../data/people";
+import { site } from "../data/site";
+---
+
+<BaseLayout title={`${peopleIntro.title} · ${site.className}`}>
+  <main class="page-main">
+    <section class="page-hero">
+      <div class="section-inner">
+        <a class="back-link" href="/">返回首页</a>
+        <p class="eyebrow">Classmates</p>
+        <h1>{peopleIntro.title}</h1>
+        <p>{peopleIntro.text}</p>
+      </div>
+    </section>
+
+    <section>
+      <div class="section-inner">
+        <div class="people-grid page-grid">
+          {
+            people.map((person) => (
+              <article class="person">
+                <div class="avatar">{person.initial}</div>
+                <h3>
+                  {person.name} · {person.location}
+                </h3>
+                <p>{person.text}</p>
+              </article>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+  </main>
+</BaseLayout>

src/pages/timeline.astro

@@ -0,0 +1,36 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { site } from "../data/site";
+import { timeline, timelineIntro } from "../data/timeline";
+---
+
+<BaseLayout title={`${timelineIntro.title} · ${site.className}`}>
+  <main class="page-main">
+    <section class="page-hero">
+      <div class="section-inner">
+        <a class="back-link" href="/">返回首页</a>
+        <p class="eyebrow">Timeline</p>
+        <h1>{timelineIntro.title}</h1>
+        <p>{timelineIntro.text}</p>
+      </div>
+    </section>
+
+    <section>
+      <div class="section-inner">
+        <div class="timeline">
+          {
+            timeline.map((moment) => (
+              <article class="moment">
+                <time>{moment.date}</time>
+                <div>
+                  <h3>{moment.title}</h3>
+                  <p>{moment.text}</p>
+                </div>
+              </article>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+  </main>
+</BaseLayout>

src/styles/global.css

@@ -245,6 +245,55 @@ h2 {
   background: var(--soft);
 }
 
+.page-main {
+  min-height: 100vh;
+}
+
+.page-hero {
+  padding-top: 132px;
+  padding-bottom: 70px;
+  color: #fffdf7;
+  background:
+    linear-gradient(135deg, rgba(31, 43, 42, 0.96), rgba(55, 109, 90, 0.88)),
+    #1f2b2a;
+}
+
+.page-hero h1 {
+  max-width: 900px;
+}
+
+.page-hero p:not(.eyebrow) {
+  max-width: 680px;
+  margin: 22px 0 0;
+  color: rgba(255, 253, 247, 0.82);
+  font-size: clamp(17px, 2vw, 21px);
+}
+
+.back-link,
+.section-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 9px 15px;
+  border-radius: 8px;
+  font-weight: 800;
+}
+
+.back-link {
+  margin-bottom: 28px;
+  border: 1px solid rgba(255, 253, 247, 0.38);
+  color: #fffdf7;
+  background: rgba(255, 253, 247, 0.12);
+}
+
+.section-link {
+  margin-top: 26px;
+  border: 1px solid var(--line);
+  color: var(--green);
+  background: #fff;
+}
+
 .photo-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -260,30 +309,30 @@ h2 {
   color: #fff;
   background:
     linear-gradient(0deg, rgba(26, 35, 34, 0.76), rgba(26, 35, 34, 0.08)),
-    var(--tile-bg);
+    var(--photo-image, var(--tile-bg));
   background-size: cover;
   background-position: center;
   box-shadow: var(--shadow);
 }
 
-.photo-card:nth-child(1) {
+.photo-card:nth-child(4n + 1) {
   --tile-bg: linear-gradient(135deg, #376d5a, #e8a84c);
 }
 
-.photo-card:nth-child(2) {
+.photo-card:nth-child(4n + 2) {
   --tile-bg: linear-gradient(135deg, #456f94, #f0c66d);
 }
 
-.photo-card:nth-child(3) {
+.photo-card:nth-child(4n + 3) {
   --tile-bg: linear-gradient(135deg, #c96452, #f1d9a6);
 }
 
-.photo-card:nth-child(4) {
+.photo-card:nth-child(4n) {
   --tile-bg: linear-gradient(135deg, #263e5c, #7ab28b);
 }
 
-.photo-card:nth-child(2),
+.photo-card:nth-child(4n + 2),
-.photo-card:nth-child(4) {
+.photo-card:nth-child(4n) {
   min-height: 300px;
 }
 
@@ -304,6 +353,10 @@ h2 {
   gap: 16px;
 }
 
+.page-grid {
+  align-items: stretch;
+}
+
 .person {
   min-height: 210px;
   padding: 22px;