Skip to content

Latest commit

 

History

History
116 lines (96 loc) · 3.77 KB

File metadata and controls

116 lines (96 loc) · 3.77 KB

Completed Tasks

项目基础架构

  • 搭建 Astro 项目基础结构
  • 配置 TypeScript、ESLint、Prettier 等开发环境
  • 添加 Cursor 规则,提升 AI 编程体验
  • 更新到 Astro 5.x 及相关的最新插件版本
  • 配置 TailwindCSS 与项目集成
  • 本地开发环境搭建与测试

内容管理与发布

  • 实现 Markdown/MDX 内容管理
  • 设置内容集合(Content Collections)管理博客文章
  • 实现文章发布控制(可标记文章为未发布状态)
  • 实现 RSS 订阅功能
    • 创建 RSS 样式表 (XSL)
    • 自定义 RSS 页面样式
  • 相对路径图片资源处理
    • 实现 rehype 插件转换 markdown 中的相对路径图片链接
    • 使用 vite-plugin-static-copy 确保图片资源能正确访问

页面与组件开发

  • 迁移布局组件
  • 迁移导航组件
  • 迁移页脚组件
  • 迁移博客组件
  • 实现分页组件
  • 实现主题切换组件
  • 实现 SEO 相关组件
  • FloatingImage 迁移
    • 分析旧项目浮动图片功能实现逻辑
    • 创建图片链接查找工具函数
    • 创建 Astro 版本的浮动图片组件
    • 开发 rehype 插件自动为图片链接添加标识
    • 在博客文章布局中集成浮动图片功能
    • 添加响应式设计和视觉增强样式

页面迁移

  • 新版首页
    • 移植 Perlin Noise 动画作为首页背景
    • 完成内容排版填充
    • 优化性能,修复卡顿问题
  • 迁移博客列表页
  • 迁移博客详情页
  • 迁移关于页面
  • 迁移归档页面
  • 迁移标签页面
  • 迁移 404 页面

样式系统与主题

  • 迁移全局样式与主题变量
  • 迁移排版(Typography)样式
  • 迁移响应式布局设计
  • 迁移主题系统(深色/浅色模式)
  • 初步将组件级样式从 SASS 迁移到 Tailwind CSS
  • 实现新的表格样式
  • <mark> 元素添加自定义样式支持
  • 优化移动端布局和交互

评论系统集成

  • 实现 Giscus 评论系统集成
  • 优化 giscus 评论区样式与主题联动
    • 创建自定义 giscus 主题 CSS
    • 实现主题切换时评论区主题同步变化
    • 优化评论区在移动设备上的显示
    • 完善 giscus 主题色彩系统
    • 优化深色/浅色模式下的显示效果
    • 增强评论区视觉一致性

网站能力增强

  • Markdown 图片优化
    • 配置 Astro 图片优化选项
    • 优化图片尺寸和加载性能
    • 实现图片懒加载和响应式处理
  • 外部链接在新窗口打开
    • 使用 rehype 插件自动处理外部链接
    • 提升用户体验和网站留存

性能优化与构建

  • 使用 Astro 静态站点生成(SSG)
  • 优化资源加载顺序与关键路径渲染
  • 使用 Astro 的 client 指令按需加载 JavaScript
  • 使用 Astro 组件,优化图片加载
  • 图标库优化
    • 解决 Astro 5.0 中图标库导致的构建时间问题
    • 创建自定义图标组件系统
    • 提升构建性能
  • Flow Field 性能优化
    • 优化首页背景动画性能
    • 减少 CPU 和内存占用
  • 字体文件加载加速
    • 将 google fonts 文件下载到本地
    • 调整字体引用方式

数据统计与分析

  • 接入 umami
    • 统计出站跳转点击
    • 统计部分按钮点击

上线前测试

  • 全面测试并优化所有已迁移页面和组件的响应式设计
    • 测试首页在不同设备尺寸下的表现
    • 测试博客文章页在不同设备尺寸下的表现
    • 测试归档和标签页在不同设备尺寸下的表现
  • 确保跨浏览器兼容性
  • 确保 Lighthouse 评分达标