返回 Blog
UI

用 shadcn Card 封装博客卡片

把博客卡片拆成可复用组件,并用 Button、Card、Image 组合出更清晰的文章列表。

博客卡片被封装在 components/BlogCard.tsx 中,列表页只负责 map 数据。这样以后新增文章时,不需要重复写一整块卡片结构。

卡片内部使用 shadcn 的 Card 和 Button 组件,封面图使用 next/image。按钮负责跳转详情页,卡片内容负责展示标题、日期、标签和摘要。

把 UI 拆成组件之后,页面会更干净:数据放在 data,获取方法放在 services,展示组件放在 components。这个结构适合继续扩展更多学习笔记。