为了让博客更好刷一点,我认真模仿了一次小红书

我最近把博客的文章列表和文章内图片展示都往小红书的方式改了改。不是抄界面,而是拆它的展示逻辑,再把适合博客的部分接进来。

1 / 1

最近我把博客做了一轮比较明确的改造,方向很简单:认真模仿了一次小红书。

当然,不是想把博客做成另一个小红书。我真正想借的,是它那套内容展示逻辑。原来的博客更偏传统文章站:列表是一篇一篇往下排,文章里的图片也只是正文的补充。这套方式适合认真读,但不太适合先刷一遍、再决定点开哪篇。

所以这次我主要动了两块:文章页里的图片展示,以及文章列表的浏览模式。

文章页先补上“小红书式”的图片集逻辑

这部分是整个改造的起点。

以前博客里的图片更像普通插图,放在正文里负责辅助说明。但后来写一些界面改造、部署记录、前后对比时,我越来越觉得,很多内容天然更适合用一组图连续展示,而不是几张图零散地插在正文里。

小红书在这件事上的逻辑很成熟:它默认把图片当成一个内容单元来处理,而不是几张附件。读者进入内容后,可以连续切换,知道自己看到第几张,也能随时点开看大图。

我把这套逻辑拆开之后,先对应成几个需求:

  1. 一篇文章要原生支持多图。
  2. 多张图要作为同一个组件展示,而不是简单堆叠。
  3. 图片之间要能切换。
  4. 要有当前位置提示。
  5. 要能点开看大图。

确定需求之后,我单独做了一套 gallery 结构。数据层增加了 gallery,模板层单独渲染图片集,交互层补了上一张、下一张、页码状态、圆点导航和大图预览。后面又继续收了几轮细节,让它更像一个完整的内容浏览组件,而不是正文里的轮播图。

这一部分本质上是在把博客原来偏静态的单图展示,改成更接近小红书那种“图片组优先”的方式。

列表页再补上“双列 feed”的浏览逻辑

图片集做完之后,第二个问题就出来了:如果文章内部已经开始强调图片和封面,那文章列表继续完全沿用传统博客排法,就有点不协调了。

原来的列表更像博客目录:单列、纵向、信息完整。小红书那种模式不一样,它更强调“先快速浏览,再决定点进哪篇”。要模仿它,重点不是单纯改成两列,而是把列表从“目录视图”改成“feed 视图”。

我把需求拆成了几条:

  1. 保留原来的单列模式,同时新增双列模式。
  2. 双列模式里,每篇文章都要有封面。
  3. 标题、摘要、元信息都要重新收紧。
  4. 双列模式不能继续强依赖传统分页。
  5. 用户切换过的布局要被记住。

对应实现上,我在侧边栏加了布局切换按钮,并用 localStorage 记住用户偏好。文章列表模板也改成了卡片结构,在双列模式下优先取文章 gallery 的第一张图当封面。样式层单独给双列模式写了一套规则,重新组织标题、摘要、meta 和封面的关系。脚本层则补了一套继续加载逻辑:进入双列模式后,隐藏传统分页,通过 sentinel 和 IntersectionObserver 继续加载后续文章,让浏览方式更接近 feed。

所以这部分模仿的也不是“小红书长什么样”,而是它背后的产品逻辑:先让内容更容易被扫到,再把完整阅读留给点击之后。

改完之后,我才更清楚这套方式为什么有用

真正做完之后,我才更明显地感觉到,这次改造不是单纯“更像某个平台”,而是把博客里原来混在一起的两件事拆开了:浏览和阅读。

双列模式让列表页更适合先刷一遍,先看最近有什么值得点开的内容;图片集则让文章内部的多图内容不再散,读者可以更顺手地切图、对比和放大查看。

结果就是,博客终于不再只有一种阅读姿势了。你既可以像以前那样按传统文章流慢慢看,也可以先像刷 feed 一样快速过一遍,再决定读哪篇。对我现在这种既写观点,也写折腾记录、界面改造和产品细节的博客来说,这种变化是成立的。

我后来越来越觉得,博客完全可以借一点平台的长处。不是抄外观,而是借那些已经被验证过的内容展示逻辑。

这次我做的,其实就是一次很小的产品化尝试:内容没变,我改的只是内容被看到、被浏览、被点开的方式。

结果还挺值。

使用 Hugo 构建
主题 Stack 由 Jimmy 设计
参考 iOS 26 液态玻璃风格改造