astro-yukunhh-blog/src/pages/posts/index.astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import PostCard from '../../components/PostCard.astro';
import TagChip from '../../components/TagChip.astro';
import { getPublishedPosts, getAllTags } from '../../lib/utils';

const all = await getPublishedPosts();
const tags = getAllTags(all);
---

<BaseLayout title="全部文章" description="Yukun's Blog 的全部文章列表">
  <section class="container" style="padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 96px));">
    <header class="page-head reveal">
      <h1 class="page-title">全部文章</h1>
      <p class="page-sub">共 {all.length} 篇 · 按发布时间倒序排列</p>
    </header>

    <div class="tag-bar reveal">
      <span class="label">筛选标签</span>
      <div class="tag-list">
        <TagChip tag="全部" href="/posts" active />
        {tags.map((t) => <TagChip tag={t.tag} count={t.count} />)}
      </div>
    </div>
  </section>

  <section class="container" style="padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(64px, 8vw, 120px);">
    <div class="post-grid">
      {all.map((post) => <PostCard post={post} class="reveal" />)}
    </div>
  </section>
</BaseLayout>

<style>
  .page-head { margin-bottom: clamp(32px, 5vw, 48px); }
  .page-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 1rem + 5vw, 4.5rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--ink);
  }
  .page-sub { color: var(--ink-60); margin-top: 14px; font-size: 0.9rem; letter-spacing: 0.05em; }
  .tag-bar {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  .tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(20px, 2.5vw, 32px);
  }
</style>