今天给博客加了个新玩意儿：小红书风格的探索页。
说到这个，我最近一直在琢磨怎么让老文章更好找。
以前的文章列表是那种一行一行排下来的，看着挺规矩，但说实话——太无聊了。
3500多篇文章啊，翻半天也找不到想看的，谁受得了？
小红书为啥火？
它不是靠内容堆出来的，而是靠“一眼就心动”的设计。
卡片密密麻麻，颜色鲜艳，图片抓人眼球，看完还想点进去看看。
这不就是我们想要的感觉吗？
回到正题
于是我就动手做了个探索页，直接把小红书那套搬过来试试。
瀑布流布局
用 CSS Grid + Masonry 实现的，不用写一堆 JS。
每行 2 到 4 列，手机上两列，平板三列，桌面四列，自动适配屏幕宽度。
卡片高度也不固定，内容多少就占多少空间，不会卡顿。
卡片设计
封面图占上半部分，标题用 粗体，最多两行，不让你读到崩溃。
底部放日期和阅读时间，清楚明了。
鼠标悬停时有个轻微放大+阴影效果，就像在刷朋友圈一样顺手。
文字可读性
这点特别重要！
瀑布流里文字不能太小，不然根本看不清。
背景图再好看也不能盖住文字，所以加了遮罩或阴影，保证不管什么图都能看清内容。
技术实现其实没那么难
数据源
直接复用现有的 posts.json 文件，提取封面图、标题、日期就行。
要是没图？也没关系，用渐变背景 + 标题首字母顶上，照样好看。
性能优化
图片懒加载是标配，别一进来就全加载完。
后面文章多了，还可以上虚拟滚动，省资源又流畅。
加载时加个骨架屏，用户体验立马提升一个档次。
路由也很简单
/explore/是新探索页/classic/还是老样子，线性列表- 首页还是推荐精选文章，不动它
现在你可以选着看了
两种模式都保留下来了，随你心情切换：
经典模式（/classic/）
适合慢慢读，一页一页看，信息完整，排版舒服。
如果你喜欢沉下心来读文章，这个最对味。
探索模式（/explore/）
适合随手刷，看到喜欢的就点进去。
视觉冲击强，像逛商场一样轻松自在。
后续还能怎么玩？
以后打算加几个实用功能：
- 按分类、年份筛选，方便定位
- 无限滚动加载，不用点“加载更多”
- 收藏和喜欢按钮，记录你的偏好
- 推荐算法，根据你看过的内容猜你喜欢
说到底，就是想让大家更容易找到感兴趣的文章。
别再对着枯燥列表发呆啦，试试新页面，说不定会有惊喜！