66 lines
2.8 KiB
Plaintext
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>
|