First init
This commit is contained in:
biss committed
commit
0d1f56cbb8
10 files changed
+7195
No files matched your search
@@ -0,0 +1,120 @@
|
||||
export const site = {
|
||||
className: "高三 X 班",
|
||||
title: "毕业一年后，我们依然在场",
|
||||
subtitle:
|
||||
"把散落在相册、聊天记录和心里的瞬间放回同一个地方。这里先留给高中的三年，也留给一年后的我们。",
|
||||
anniversary: "2025.06 - 2026.06 · 毕业一周年纪念",
|
||||
heroImage: "/assets/campus-hero.png",
|
||||
footer: "高三 X 班毕业一周年纪念网站 · 初版"
|
||||
};
|
||||
|
||||
export const navItems = [
|
||||
{ label: "三年时间线", href: "#timeline" },
|
||||
{ label: "照片墙", href: "#gallery" },
|
||||
{ label: "一年后的我们", href: "#people" },
|
||||
{ label: "留言墙", href: "#messages" }
|
||||
];
|
||||
|
||||
export const stats = [
|
||||
{ value: "1095+", label: "一起经过的高中日子" },
|
||||
{ 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: "愿你打开这个页面的时候，刚好想起一个很好的下午。"
|
||||
}
|
||||
]
|
||||
};
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
@@ -0,0 +1,169 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
import {
|
||||
gallery,
|
||||
messages,
|
||||
navItems,
|
||||
people,
|
||||
site,
|
||||
stats,
|
||||
timeline
|
||||
} from "../data/site";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{site.title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header" aria-label="网站导航">
|
||||
<a class="brand" href="#top">{site.className}</a>
|
||||
<nav class="nav">
|
||||
{navItems.map((item) => <a href={item.href}>{item.label}</a>)}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section
|
||||
id="top"
|
||||
class="hero"
|
||||
style={`--hero-image: url("${site.heroImage}")`}
|
||||
>
|
||||
<div class="hero-content">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="stats" aria-label="纪念数据">
|
||||
{
|
||||
stats.map((item) => (
|
||||
<div class="stat">
|
||||
<strong>{item.value}</strong>
|
||||
<span>{item.label}</span>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<section id="timeline">
|
||||
<div class="section-inner">
|
||||
<div class="section-title">
|
||||
<h2>从第一节课，到最后一次回头</h2>
|
||||
<p>
|
||||
把班级大事按时间放在这里。现在是示例内容，之后可以替换成军训、运动会、成人礼、百日誓师、毕业照等真实节点。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<section id="gallery" class="gallery-band">
|
||||
<div class="section-inner">
|
||||
<div class="section-title">
|
||||
<h2>照片墙先留四个位置</h2>
|
||||
<p>
|
||||
后续可以把这些色块换成真实照片。建议每类选 6 到 12 张，少一点反而更有纪念册的质感。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="photo-grid">
|
||||
{
|
||||
gallery.map((item) => (
|
||||
<article class="photo-card">
|
||||
<div>
|
||||
<strong>{item.title}</strong>
|
||||
<span>{item.text}</span>
|
||||
</div>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
</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>
|
||||
Loaded 3 of 10 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user