返回项目日志
kuailu-blog ·

快鹿博客类别页面美化与内容填充

完成了博客文章列表（blog/index.astro）的美化，引入了仿 Claude 风格的胶囊分类标签、双列卡片式布局以及平滑的分类过滤动画。同时填充了4篇中英文结合的高美感博客测试文章。

Git Commit: df793e2

今天的主要工作是优化博客的“专栏文章 (Blog)”类别列表页。此前列表页没有卡片结构且分类过滤不够美观，且由于缺少内容，整体页面处于空置状态。

完成的改进：

  1. 视觉美学优化：

    • 顶部加入了柔和且人文气息的专栏标题和副标题。
    • 分类过滤栏改为了圆角胶囊药丸 (Pills) 风格的 Tab，并且动态显示了各个分类下的文章数量。
    • 布局升级为现代网格双列布局，首篇焦点文章在宽屏下自动以 1.4:1 比例横向铺满展示，极具杂志排版的艺术感。

  2. 内容填充：

    • 在 src/content/blog/ 下新增了四篇不同分类的技术与随感文章，涵盖 Tech (Astro 6, CSS 布局)、Design (Claude 美学探讨)、Thoughts (独立开发日记)。
    • 使用本地图片资源作为各卡片的 heroImage，测试了图片优化管道。

  3. 过滤动画与交互：

    • 实现了纯客户端分类过滤逻辑，通过监听分类 Tab 切换事件隐藏不符的文章，并为新露出的文章触发微小的 translateY 和 opacity 淡入动效。
    • 完成了动态的 featured-post 重算逻辑，保证当前处于 All 页面时排在首位的文章能始终展示为 Featured 大卡片。

  4. 日志完整性：

    • 新建了此篇日志（src/content/diary/diary-2026-06-16.md），使系统在 npm run build 时的 diary 集合警告顺利解除。