Files
class/src/pages/people.astro
T
2026-05-03 08:38:14 +08:00

66 lines
2.8 KiB
Plaintext

---
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">
<aside class="data-guide" aria-labelledby="people-data-guide-title">
<div>
<p class="eyebrow">Data Guide</p>
<h2 id="people-data-guide-title">修改或添加同学数据</h2>
<p>
所有同学卡片都来自 <code>src/data/people.ts</code>。修改已有同学时,直接编辑对应对象;添加新同学时,复制一个对象并更换
<code>slug</code>、<code>name</code>、<code>location</code>、<code>school</code>、<code>direction</code>
等字段。
</p>
</div>
<ol>
<li><strong>自动提交:</strong>也可以在 GitHub 新建“更新「如今的我们」”issue,填完表单后会自动创建一个更新数据的 PR。</li>
<li><strong>照片:</strong><code>photo</code> 可留空;如需放照片,将图片放入 <code>public</code> 后填写以 <code>/</code> 开头的路径。</li>
<li><strong>关键词:</strong><code>keywords</code> 是数组,建议保留 1 到 3 个短词,列表页和个人页都会显示。</li>
<li><strong>个人页:</strong><code>currentStatus</code>、<code>highlight</code>、<code>toPastSelf</code>、<code>favoriteMemory</code> 和 <code>messageToClass</code> 会生成详情内容。</li>
</ol>
</aside>
<div class="people-grid page-grid">
{
people.map((person) => (
<a class="person person-link" href={`/people/${person.slug}/`}>
<div class="person-photo" style={person.photo ? `--person-photo: url("${person.photo}")` : ""}>
<span>{person.initial}</span>
</div>
<div class="person-body">
<h3>
{person.name} · {person.location}
</h3>
<div class="person-meta">
<span>{person.school}</span>
<span>{person.direction}</span>
</div>
<div class="keyword-row">
{person.keywords.map((keyword) => <span>{keyword}</span>)}
</div>
<p>{person.text}</p>
</div>
</a>
))
}
</div>
</div>
</section>
</main>
</BaseLayout>