首页焕然一新:精选文章与瀑布流布局的全新设计
一次从头到尾的首页改造
今天的开发工作集中在首页的视觉升级上。这不是简单的小修小补,而是一次彻底的、从Hero区到脚部的全方位翻新。
全新Hero区域
原本的首页顶部只是一个简单的标题+按钮,现在换成了杂志级别的Hero展示区——左侧展示醒目标语、数据统计和双CTA按钮,右侧是装饰性渐变圆球,整体布局更加大气、专业。
精选文章机制
首页新增了"精选文章"区域,采用杂志式布局:左侧一个大卡片展示头牌文章,右侧是3篇副牌文章垂直排列。更重要的是,现在只有被管理员手动标记为"精选"的文章才会出现在这个区域——再也不会所有文章都堆在首页了。
管理后台的文章列表里新增了"设精选"/"已精选"按钮,可以随时控制哪些文章出现在首页精选区。
瀑布流卡片布局
"最新动态"区域从传统的垂直列表改造成了三列瀑布流卡片布局。每张卡片顶部有一条随机渐变的彩色装饰条,配合16种不同的配色方案,让列表变得生动有趣。标题和摘要有合理的截断处理,标签自动下沉到底部。
悬停交互升级
全区域的卡片悬停效果都做了升级:卡片上浮3px、边框变色、阴影加深、箭头滑入等微交互,让浏览体验更加流畅愉悦。
链接悬停修复
修复了全局 a:hover 样式对首页链接的干扰问题:英雄文章的白色文字悬停不再变蓝,所有链接悬停不再出现不必要的下划线,保持了设计的一致性。
代码层面
新增了 is_featured 数据库字段用于控制文章精选状态,重构了 HomeController 的数据查询逻辑,新增了对应的 Repository 方法和管理后台交互功能。所有改动都保持了无框架依赖、SQLite存储、纯前端渲染的原则。