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

Fri, 05 Jun 2026 15:10:00 +0800

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我把需求拆成了几条：

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

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

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

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

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

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

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

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

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

结果还挺值。

前端 on CHEN 的博客

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

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

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

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