feat: 优化 /life 页面样式和图片显示

- 优化 /life 列表页视觉设计,增加主题标签、背景装饰、卡片动效
- 修复列表页精选文章图片显示
- 优化文章详情页图片画廊,支持切换和计数显示
- 保持整体风格一致性(米白背景 + 深灰文字 + 绿色强调)
This commit is contained in:
wxf
2026-06-24 13:45:40 +08:00
parent 94855e4055
commit b2e9924ead
11 changed files with 765 additions and 10 deletions
+45
View File
@@ -0,0 +1,45 @@
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { LifeArticlePage } from "@/components/life-article-page";
import { lifePosts, getLifePost } from "@/content/life/posts";
type PageProps = {
params: Promise<{
slug: string;
}>;
};
export function generateStaticParams() {
return lifePosts.map((post) => ({ slug: post.slug }));
}
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
const { slug } = await params;
const post = getLifePost(slug);
if (!post) {
return {
title: "文章未找到 | fly",
};
}
return {
title: `${post.title} | fly 日常分享`,
description: post.description,
};
}
export default async function LifeArticlePageRoute({ params }: PageProps) {
const { slug } = await params;
const post = getLifePost(slug);
if (!post) {
notFound();
}
const currentIndex = lifePosts.findIndex((p) => p.slug === slug);
const prevPost = currentIndex > 0 ? lifePosts[currentIndex - 1] : undefined;
const nextPost = currentIndex < lifePosts.length - 1 ? lifePosts[currentIndex + 1] : undefined;
return <LifeArticlePage post={post} prevPost={prevPost} nextPost={nextPost} />;
}
+10 -10
View File
@@ -1,12 +1,12 @@
import { PlaceholderPage } from "@/components/placeholder-page";
import type { Metadata } from "next";
import { LifePage } from "@/components/life-page";
import { lifePosts } from "@/content/life/posts";
export default function LifePage() {
return (
<PlaceholderPage
eyebrow="Life journal"
title="生活分享"
description="技术之外的个人切面:日常、阅读、音乐、照片、旅行,以及阶段性的想法。"
items={["日常记录", "阅读和音乐", "照片和旅行", "一些想法"]}
/>
);
export const metadata: Metadata = {
title: "日常分享 | fly",
description: "fly 的日常分享,记录生活片段、照片和阶段性的想法。",
};
export default function LifeIndexPage() {
return <LifePage posts={lifePosts} />;
}