feat(pages): 五页型落地——首页/文章双模板/图库 masonry/瞬间/关于

- 首页：名片+身份陈述空槽+按年分组分轨列表（情绪色/mono标签）+影像格+项目墙
- 文章 /archives/{slug}（与 Halo 旧 URL 1:1）：reading→衬线纸墨 / tech→
  TOC 侧栏(≥1120 sticky)+2px 进度条+Artalk 容器占位
- 图库：grid masonry（构建期 aspect-ratio 零 JS）+原生 dialog lightbox
  （←→/Esc+EXIF 底栏）+分组筛选
- 瞬间时间线 / 关于（三轨版图+构建说明）
- sharp ^0.35.5 入依赖（Astro 7 不内置，astro:assets 缩略图管线前提）
- 裸 blockquote 默认吃 A 墨线样式（markdown 原生输出无类名的缝隙）
- 车道 30min 超时，产物完整，主会话补 sharp+断言脚本递归修正后收编

验证: pnpm astro build exit 0（7 页）；五路由产物断言过；
      scripts/check-responsive.sh 11/11 ok（1120/820/760/560 全档）

Spec: 2026-10-24_add-blog-skeleton
Co-authored-by: GLM-5.3

src/components/PostList.astro

@@ -0,0 +1,137 @@
+---
+// 年份分组 + 轨道分节的文章列表（首页与 /archives/ 共用）
+// 轨道标签单一事实源：content.config 的 POST_TRACKS，此处不另立词表
+import type { CollectionEntry } from 'astro:content';
+import { POST_TRACKS, trackOf, type PostCategory } from '../content.config';
+
+interface Props {
+  /** 调用方已完成 draft 过滤与 pubDate 倒序 */
+  posts: CollectionEntry<'posts'>[];
+}
+const { posts } = Astro.props;
+
+const byYear = new Map<number, CollectionEntry<'posts'>[]>();
+for (const post of posts) {
+  const year = post.data.pubDate.getUTCFullYear();
+  const bucket = byYear.get(year);
+  if (bucket) bucket.push(post);
+  else byYear.set(year, [post]);
+}
+const mmdd = (d: Date) =>
+  `${String(d.getUTCMonth() + 1).padStart(2, '0')}-${String(d.getUTCDate()).padStart(2, '0')}`;
+---
+
+<div class="post-list">
+  {[...byYear.entries()].map(([year, list]) => (
+    <section class="year-block" aria-label={`${year} 年文章`}>
+      <h2 class="year">{year}</h2>
+      {(Object.keys(POST_TRACKS) as PostCategory[]).map((cat) => {
+        const rows = list.filter((post) => post.data.category === cat);
+        if (rows.length === 0) return null;
+        return (
+          <div class="track-block">
+            <h3 class="track">{trackOf(cat)}</h3>
+            <ul>
+              {rows.map((post) => (
+                <li>
+                  <a class="row tap" href={`/archives/${post.id}/`}>
+                    {cat === 'reading' && (
+                      <i
+                        class="emo"
+                        style={`background:${post.data.mood ?? 'var(--mood)'}`}
+                        title="情绪色"
+                        aria-hidden="true"
+                      />
+                    )}
+                    <span class="row-title">{post.data.title}</span>
+                    {cat !== 'reading' &&
+                      post.data.tags.map((tag) => <code class="tag">{`#${tag}`}</code>)}
+                    <time class="row-date" datetime={post.data.pubDate.toISOString()}>
+                      {mmdd(post.data.pubDate)}
+                    </time>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        );
+      })}
+    </section>
+  ))}
+</div>
+
+<style>
+  .year-block + .year-block { margin-top: var(--space-5); }
+  .year {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--ink-3);
+    font-variant-numeric: tabular-nums;
+  }
+  .track {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin: var(--space-3) 0 var(--space-1);
+    font-size: 12.5px;
+    font-weight: 400;
+    color: var(--ink-4);
+    letter-spacing: 0.06em;
+  }
+  .track::before {
+    content: '';
+    width: 7px;
+    height: 7px;
+    border-radius: 2px;
+    background: var(--ink-4);
+  }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    width: 100%;
+    border-bottom: 1px solid var(--line);
+  }
+  li:last-child > .row { border-bottom: none; }
+  .emo {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    flex: none;
+  }
+  .row-title {
+    flex: 1;
+    min-width: 0;
+    font-size: 16px;
+    color: var(--ink-2);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: color var(--dur) var(--ease);
+  }
+  .row:hover .row-title { color: var(--accent); }
+  .tag {
+    flex: none;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink-3);
+    background: var(--bg-soft);
+    border-radius: 5px;
+    padding: 1px 7px;
+    white-space: nowrap;
+  }
+  .row-date {
+    flex: none;
+    font-family: var(--font-mono);
+    font-size: 13px;
+    color: var(--ink-4);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+</style>