升级
This commit is contained in:
+11
-1
@@ -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)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Generated
+1301
-2021
File diff suppressed because it is too large
Load Diff
+4
-5
@@ -9,9 +9,8 @@
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"astro": "^4.16.18",
|
||||
"typescript": "^5.6.3"
|
||||
},
|
||||
"devDependencies": {}
|
||||
"@astrojs/check": "^0.9.9",
|
||||
"astro": "^6.2.1",
|
||||
"typescript": "^6.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
+112
-10
@@ -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: ""
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
+10
-9
@@ -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) => (
|
||||
<article
|
||||
class="photo-card"
|
||||
style={photo.image ? `--photo-image: url("${photo.image}")` : ""}
|
||||
previewPhotoTopics.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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user