时间线

src/components/ArchiveTimeline.astro

@@ -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>

src/pages/archives/index.astro

@@ -3,6 +3,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 import Pagination from '@/components/Pagination.astro';
 import PageHeaderCard from '@/components/PageHeaderCard.astro';
 import StatsChart from '@/components/StatsChart.astro';
+import ArchiveTimeline from '@/components/ArchiveTimeline.astro';
 import { getAllPosts } from '@/lib/posts';
 import { getPageSlice } from '@/lib/pagination';
 
@@ -21,14 +22,7 @@ const archiveStats = [...posts.reduce((months, post) => {
   <section class="content-wrap narrow">
     <PageHeaderCard title="归档" subtitle={`共 ${posts.length} 篇文章`} />
     <StatsChart title="归档发布趋势" subtitle="按月份统计文章发布数量" type="line" items={archiveStats} />
-    <div class="archive-list">
+    <ArchiveTimeline posts={pageData.items} />
-      {pageData.items.map((post) => (
-        <a href={post.href}>
-          <time datetime={post.date.toISOString()}>{post.dateText}</time>
-          <span>{post.title}</span>
-        </a>
-      ))}
-    </div>
     <Pagination currentPage={pageData.currentPage} totalPages={pageData.totalPages} basePath="/archives/" />
   </section>
 </BaseLayout>

src/pages/archives/page/[page].astro

@@ -3,6 +3,7 @@ import Pagination from '@/components/Pagination.astro';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import PageHeaderCard from '@/components/PageHeaderCard.astro';
 import StatsChart from '@/components/StatsChart.astro';
+import ArchiveTimeline from '@/components/ArchiveTimeline.astro';
 import { getAllPosts } from '@/lib/posts';
 import { getPageSlice, getPaginationPaths } from '@/lib/pagination';
 
@@ -31,14 +32,7 @@ const archiveStats = [...posts.reduce((months, post) => {
   <section class="content-wrap narrow">
     <PageHeaderCard title="归档" subtitle={`共 ${posts.length} 篇文章，第 ${pageData.currentPage} 页`} />
     <StatsChart title="归档发布趋势" subtitle="按月份统计文章发布数量" type="line" items={archiveStats} />
-    <div class="archive-list">
+    <ArchiveTimeline posts={pageData.items} />
-      {pageData.items.map((post) => (
-        <a href={post.href}>
-          <time datetime={post.date.toISOString()}>{post.dateText}</time>
-          <span>{post.title}</span>
-        </a>
-      ))}
-    </div>
     <Pagination currentPage={pageData.currentPage} totalPages={pageData.totalPages} basePath="/archives/" />
   </section>
 </BaseLayout>