我的博客首页改版设计思路
从单栏居中布局改版为深色侧边栏三栏卡片式布局的设计过程和实现思路。
改版动机
博客首页用了一段时间的单栏居中布局，虽然简洁但信息密度太低。文章列表占了全部内容，想找分类或标签得滚动很久。最近改版成了深色侧边栏三栏布局，记录一下设计思路。
布局设计
三栏 CSS Grid
布局用 CSS Grid 实现：
className="grid grid-cols-1 sm:grid-cols-[260px_1fr] lg:grid-cols-[260px_1fr_280px]"- 左侧 260px：固定导航栏
- 中间自适应：文章流
- 右侧 280px：统计面板
断点设在 640px 和 1024px，分别对应手机、平板和桌面三种布局。
移动端适配
移动端收起侧边栏，显示汉堡菜单。点开后从左侧滑出抽屉，内容和桌面端侧边栏一致。用 usePathname 监听路由变化自动关闭抽屉。
视觉风格
毛玻璃效果
选择了深色毛玻璃风格：
- 背景用深色
#09090b - 卡片用半透明白色
bg-white/[0.03]叠加backdrop-blur - 边框用
border-white/10做出若隐若现的分界线
.card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
border-radius: 16px;
}交互反馈
hover 时卡片轻微上浮并增强阴影：
.card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}背景光斑
在 layout 里加了两个模糊的渐变光斑，增加视觉层次：
<div className="fixed top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-brand/5 blur-[120px] pointer-events-none" />
<div className="fixed bottom-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full bg-accent/5 blur-[120px] pointer-events-none" />组件结构
改版后的主要组件：
- Sidebar — 左侧导航栏，桌面端 sticky 固定
- MobileTopBar — 移动端顶栏 + 汉堡菜单
- RightAside — 右侧统计面板，只在 lg 以上显示
- PostCard — 文章卡片，统一风格
- BlogHomeClient — 首页的搜索和分类筛选
后续优化
改版基本完成后，后续还想做的：
- 文章封面图优化，支持懒加载
- 分类筛选做成客户端交互
- 右侧栏加标签云
- 深色/浅色主题切换动画优化
整体改版下来，信息密度提高了，视觉上也更有科技感。
相关推荐
互动