95 lines
2.7 KiB
Plaintext
95 lines
2.7 KiB
Plaintext
---
|
|
import BaseLayout from "../../layouts/BaseLayout.astro";
|
|
import { people, peopleIntro } from "../../data/people";
|
|
import { site } from "../../data/site";
|
|
|
|
export function getStaticPaths() {
|
|
return people.map((person) => ({
|
|
params: { slug: person.slug },
|
|
props: { person }
|
|
}));
|
|
}
|
|
|
|
const { person } = Astro.props;
|
|
---
|
|
|
|
<BaseLayout title={`${person.name} · ${peopleIntro.title} · ${site.className}`}>
|
|
<main class="page-main">
|
|
<section class="page-hero person-hero">
|
|
<div class="section-inner person-hero-inner">
|
|
<div>
|
|
<a class="back-link" href="/people/">返回同学列表</a>
|
|
<p class="eyebrow">Classmate Profile</p>
|
|
<h1>{person.name}</h1>
|
|
<p>{person.text}</p>
|
|
</div>
|
|
<aside class="profile-card">
|
|
<div class="profile-photo" style={person.photo ? `--person-photo: url("${person.photo}")` : ""}>
|
|
<span>{person.initial}</span>
|
|
</div>
|
|
<dl>
|
|
<div>
|
|
<dt>所在城市</dt>
|
|
<dd>{person.location}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>学校</dt>
|
|
<dd>{person.school}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>方向</dt>
|
|
<dd>{person.direction}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>联系方式</dt>
|
|
<dd>{person.contact}</dd>
|
|
</div>
|
|
</dl>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="section-inner detail-grid">
|
|
<article class="detail-panel wide">
|
|
<p class="eyebrow">Now</p>
|
|
<h2>这一年的近况</h2>
|
|
<p>{person.currentStatus}</p>
|
|
</article>
|
|
|
|
<article class="detail-panel">
|
|
<p class="eyebrow">Keywords</p>
|
|
<h2>三个关键词</h2>
|
|
<div class="keyword-row large">
|
|
{person.keywords.map((keyword) => <span>{keyword}</span>)}
|
|
</div>
|
|
</article>
|
|
|
|
<article class="detail-panel">
|
|
<p class="eyebrow">Highlight</p>
|
|
<h2>这一年的小事</h2>
|
|
<p>{person.highlight}</p>
|
|
</article>
|
|
|
|
<article class="detail-panel">
|
|
<p class="eyebrow">Past Self</p>
|
|
<h2>想对高中时的自己说</h2>
|
|
<p>{person.toPastSelf}</p>
|
|
</article>
|
|
|
|
<article class="detail-panel">
|
|
<p class="eyebrow">Memory</p>
|
|
<h2>最想带走的高中瞬间</h2>
|
|
<p>{person.favoriteMemory}</p>
|
|
</article>
|
|
|
|
<article class="detail-panel wide">
|
|
<p class="eyebrow">To Class</p>
|
|
<h2>想对大家说</h2>
|
|
<p>{person.messageToClass}</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</BaseLayout>
|