feat: 添加文章归档页面

src/routes/archive/+page.server.ts

@@ -0,0 +1,44 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ platform }) => {
+	const db = platform?.env?.DB;
+	if (!db) {
+		throw error(500, 'Database connection not found');
+	}
+
+	try {
+		// Fetch all posts, ordered by published_at descending
+		const result = await db.prepare(`
+			SELECT slug, title, published_at 
+			FROM posts 
+			ORDER BY published_at DESC
+		`).all();
+
+		const posts = result.results as Array<{ slug: string; title: string; published_at: string }>;
+
+		// Group posts by year
+		const archives: Record<string, typeof posts> = {};
+		
+		posts.forEach(post => {
+			const date = new Date(post.published_at);
+			const year = date.getFullYear().toString();
+			
+			if (!archives[year]) {
+				archives[year] = [];
+			}
+			archives[year].push(post);
+		});
+
+		// Sort years descending
+		const years = Object.keys(archives).sort((a, b) => Number(b) - Number(a));
+
+		return {
+			archives,
+			years
+		};
+	} catch (err: any) {
+		console.error('Error fetching archives:', err);
+		throw error(500, 'Failed to fetch archives');
+	}
+};

src/routes/archive/+page.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { page } from '$app/stores';
+
+	let { data }: { data: PageData } = $props();
+
+	function formatDate(dateString: string) {
+		const d = new Date(dateString);
+		return `${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
+	}
+</script>
+
+<svelte:head>
+	<title>{$page.data.aliases?.post || '文章'}归档 - {$page.data.site?.title || 'BlogFlare'}</title>
+</svelte:head>
+
+<main id="pjax-container">
+	<div class="wrapper container narrow contents-wrap">
+		<article class="article-detail yue">
+			<div class="banner-title">
+				<h1 class="post-title">{$page.data.aliases?.post || '文章'}归档</h1>
+				<p class="post-meta">这里是站点的所有回忆</p>
+			</div>
+
+			<div class="archive-timeline">
+				{#each data.years as year}
+					<div class="archive-year-group">
+						<h2 class="archive-year">{year}</h2>
+						<ul class="archive-list">
+							{#each data.archives[year] as post}
+								<li class="archive-item">
+									<time class="archive-date">{formatDate(post.published_at)}</time>
+									<a href="/posts/{post.slug}" class="archive-title">{post.title}</a>
+								</li>
+							{/each}
+						</ul>
+					</div>
+				{/each}
+			</div>
+		</article>
+	</div>
+</main>
+
+<style>
+	.archive-timeline {
+		margin-top: 2rem;
+	}
+
+	.archive-year-group {
+		margin-bottom: 3rem;
+	}
+
+	.archive-year {
+		font-size: 2rem;
+		font-weight: 600;
+		color: var(--title-color, #333);
+		margin-bottom: 1.5rem;
+		border-bottom: none !important;
+		padding-bottom: 0 !important;
+	}
+
+	.archive-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	.archive-item {
+		display: flex;
+		align-items: baseline;
+		padding: 0.8rem 0;
+		border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+		transition: transform 0.3s ease;
+	}
+
+	.archive-item:hover {
+		transform: translateX(5px);
+	}
+
+	.archive-item:last-child {
+		border-bottom: none;
+	}
+
+	.archive-date {
+		font-family: 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
+		color: var(--text-muted, rgba(0, 0, 0, 0.5));
+		font-size: 0.95rem;
+		margin-right: 1.5rem;
+		flex-shrink: 0;
+	}
+
+	.archive-title {
+		font-size: 1.1rem;
+		color: var(--text-color);
+		text-decoration: none;
+		border-bottom: 1px solid transparent !important; /* Override standard a tag border */
+		transition: all 0.3s ease !important;
+	}
+
+	.archive-title:hover {
+		color: var(--accent-color, #419b38) !important;
+		border-bottom: 1px solid var(--accent-color, #419b38) !important;
+	}
+
+	@media screen and (max-width: 767px) {
+		.archive-item {
+			flex-direction: column;
+		}
+		
+		.archive-date {
+			margin-bottom: 0.3rem;
+			font-size: 0.85rem;
+		}
+	}
+</style>