时间线

2026-06-19 16:20:21 +08:00
parent b8e1e0e13b
commit 0eca3c2e9c
4 changed files with 266 additions and 25 deletions
@@ -0,0 +1,79 @@
+---
+import type { BlogPost } from '@/lib/posts';
+
+interface Props {
+  posts: BlogPost[];
+}
+
+type ArchiveMonth = {
+  key: string;
+  label: string;
+  posts: BlogPost[];
+};
+
+type ArchiveYear = {
+  year: number;
+  count: number;
+  months: ArchiveMonth[];
+};
+
+const { posts } = Astro.props;
+const monthFormatter = new Intl.DateTimeFormat('zh-CN', { month: 'long' });
+const dayFormatter = new Intl.DateTimeFormat('zh-CN', { day: '2-digit' });
+const archiveYears = posts.reduce<ArchiveYear[]>((years, post) => {
+  const year = post.date.getFullYear();
+  const monthKey = `${year}-${String(post.date.getMonth() + 1).padStart(2, '0')}`;
+  let yearGroup = years.find((item) => item.year === year);
+
+  if (!yearGroup) {
+    yearGroup = { year, count: 0, months: [] };
+    years.push(yearGroup);
+  }
+
+  let monthGroup = yearGroup.months.find((item) => item.key === monthKey);
+
+  if (!monthGroup) {
+    monthGroup = {
+      key: monthKey,
+      label: monthFormatter.format(post.date),
+      posts: [],
+    };
+    yearGroup.months.push(monthGroup);
+  }
+
+  yearGroup.count += 1;
+  monthGroup.posts.push(post);
+
+  return years;
+}, []);
+---
+
+<div class="archive-timeline">
+  {archiveYears.map((yearGroup) => (
+    <section class="archive-year" aria-labelledby={`archive-year-${yearGroup.year}`}>
+      <div class="archive-year-marker" aria-hidden="true"></div>
+      <header class="archive-year-head">
+        <h2 id={`archive-year-${yearGroup.year}`}>{yearGroup.year}</h2>
+        <span>{yearGroup.count} 篇</span>
+      </header>
+      <div class="archive-months">
+        {yearGroup.months.map((monthGroup) => (
+          <section class="archive-month" aria-label={`${yearGroup.year} ${monthGroup.label}`}>
+            <div class="archive-month-label">
+              <span>{monthGroup.label}</span>
+              <small>{monthGroup.posts.length} 篇</small>
+            </div>
+            <div class="archive-list">
+              {monthGroup.posts.map((post) => (
+                <a href={post.href}>
+                  <time datetime={post.date.toISOString()}>{dayFormatter.format(post.date)}</time>
+                  <span>{post.title}</span>
+                </a>
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
+    </section>
+  ))}
+</div>