diff --git a/src/data/messages.ts b/src/data/messages.ts new file mode 100644 index 0000000..8e48728 --- /dev/null +++ b/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: "愿你打开这个页面的时候，刚好想起一个很好的下午。" + } +]; diff --git a/src/data/people.ts b/src/data/people.ts new file mode 100644 index 0000000..b3a6d31 --- /dev/null +++ b/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: "希望我们都成为更好的自己，也永远记得曾经一起努力过的样子。" + } +]; diff --git a/src/data/photos.ts b/src/data/photos.ts new file mode 100644 index 0000000..d6efc46 --- /dev/null +++ b/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: "" + } +]; diff --git a/src/data/site.ts b/src/data/site.ts index bd5518b..e2db999 100644 --- a/src/data/site.ts +++ b/src/data/site.ts @@ -9,10 +9,11 @@ export const site = { }; export const navItems = [ - { label: "三年时间线", href: "#timeline" }, - { label: "照片墙", href: "#gallery" }, - { label: "一年后的我们", href: "#people" }, - { label: "留言墙", href: "#messages" } + { label: "首页", href: "/" }, + { label: "三年时间线", href: "/timeline/" }, + { label: "照片墙", href: "/gallery/" }, + { 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: "愿你打开这个页面的时候，刚好想起一个很好的下午。" - } - ] -}; diff --git a/src/data/timeline.ts b/src/data/timeline.ts new file mode 100644 index 0000000..1f22990 --- /dev/null +++ b/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: "校服、签名、拥抱和没说完的话，都被按下快门，留在了那一年最亮的地方。" + } +]; diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro new file mode 100644 index 0000000..41526d0 --- /dev/null +++ b/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; +--- + + + + + + + {title} + + +
+ {site.className} + +
+ + + + + + diff --git a/src/pages/gallery.astro b/src/pages/gallery.astro new file mode 100644 index 0000000..3942a63 --- /dev/null +++ b/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"; +--- + + +
+
+
+ 返回首页 +

Gallery

+

{galleryIntro.title}

+

{galleryIntro.text}

+
+
+ +
+
+
+ { + photos.map((photo) => ( +
+
+ {photo.title} + {photo.text} +
+
+ )) + } +
+
+
+
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index 99879e1..0aeb465 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,169 +1,157 @@ --- -import "../styles/global.css"; -import { - gallery, - messages, - navItems, - people, - site, - stats, - timeline -} from "../data/site"; +import BaseLayout from "../layouts/BaseLayout.astro"; +import { galleryIntro, photos } 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 previewPeople = people.slice(0, 6); --- - - - - - - {site.title} - - -
- {site.className} - -
+ +
+
+

{site.anniversary}

+

{site.title}

+

{site.subtitle}

+
+ 翻开回忆 + 写一句话 +
+
+
-
-
-

{site.anniversary}

-

{site.title}

-

{site.subtitle}

-
- 翻开回忆 - 写一句话 + + +
+
+
+
+

{timelineIntro.title}

+

{timelineIntro.text}

+
+ +
+ { + previewTimeline.map((moment) => ( +
+ +
+

{moment.title}

+

{moment.text}

+
+
+ )) + } +
+ + 查看完整时间线
- + - -
-
-
-

一年后的我们

-

- 这里可以做成同学卡片：姓名、所在城市、学校或方向，以及一句想对大家说的话。 -

-
- -
- { - people.map((person) => ( -
-
{person.initial}
-

- {person.name} · {person.location} -

-

{person.text}

-
- )) - } -
-
-
- - - -
-
-

下一次见面，我们再补一张合照

-

- 这个网站会继续长大：添上真实照片、真实名字、真实留言，然后成为属于我们班的一本电子纪念册。 -

-
-
-
- -
{site.footer}
- - +
+
+

下一次见面，我们再补一张合照

+

+ 这个网站会继续长大：添上真实照片、真实名字、真实留言，然后成为属于我们班的一本电子纪念册。 +

+
+
+ + diff --git a/src/pages/messages.astro b/src/pages/messages.astro new file mode 100644 index 0000000..72319ee --- /dev/null +++ b/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"; +--- + + +
+
+
+ 返回首页 +

Messages

+

{messagesIntro.title}

+

{messagesIntro.text}

+
+
+ +
+
+
+
+

“{featuredMessage.text}”

+ {featuredMessage.author} +
+
+ { + messages.map((message) => ( +
+

{message.title}

+

{message.text}

+
+ )) + } +
+
+
+
+
+ diff --git a/src/pages/people.astro b/src/pages/people.astro new file mode 100644 index 0000000..e17b4ee --- /dev/null +++ b/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"; +--- + + +
+
+
+ 返回首页 +

Classmates

+

{peopleIntro.title}

+

{peopleIntro.text}

+
+
+ +
+
+
+ { + people.map((person) => ( +
+
{person.initial}
+

+ {person.name} · {person.location} +

+

{person.text}

+
+ )) + } +
+
+
+
+ diff --git a/src/pages/timeline.astro b/src/pages/timeline.astro new file mode 100644 index 0000000..34ada2e --- /dev/null +++ b/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"; +--- + + +
+
+
+ 返回首页 +

Timeline

+

{timelineIntro.title}

+

{timelineIntro.text}

+
+
+ +
+
+
+ { + timeline.map((moment) => ( +
+ +
+

{moment.title}

+

{moment.text}

+
+
+ )) + } +
+
+
+
+ diff --git a/src/styles/global.css b/src/styles/global.css index c72577d..99f952c 100644 --- a/src/styles/global.css +++ b/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(4) { +.photo-card:nth-child(4n + 2), +.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;