📰 博客列表页改版方案
✅ 已拍板并施工完成（2026-08-19）：Austin 选定方案 B 列表式——最新一篇做头条大卡，其余每篇一行"左缩略图 + 右文字"；排序严格按发布时间新→旧。分类胶囊同步升级为真筛选（All + 4 类，带选中态）。
一、现状哪里不对
- 信息密度太低：桌面每张卡都是大图 + 大留白，一屏只装得下约 1.5 篇；6 篇文章要滚 4 屏多。头条卡右侧文字区有大片空白（你截图里也能看出来）。
- 双栏遇到单数就出"孤儿卡"：最后一篇孤零零挂在左下角，右边空一大块。
- 手机端同样是"一个大块接一个大块"：每篇占约 1.2 屏，6 篇滚 7 屏（右图）。
- 分类胶囊是摆设感强的入口：点了跳标签页，样式没有选中态，和内容区衔接生硬。
点图可放大（页内查看，点空白 / Esc / ✕ 关闭）。
二、方案 A：杂志式 推荐
最新一篇做头条横幅（高度收紧），其余三栏小卡。下面是用真实文章做的实机模拟：
Gift guide
What to Say (and Give) When Someone Loses a Pet
An honest guide to comforting a friend after pet loss — what to say, what to skip, and pet sympathy gifts that actually help.
Behind the scenes
Why We Only Make Pets (and Why Cute Is Harder Than It Looks)
Keepsake
Pet Memorial Keepsakes: Gentle Ways to Keep Their Memory Close
Cat dad
10 Gift Ideas for Dog Moms & Cat Dads Who Have Everything
Buying guide
Custom Pet Figurine Buyer's Guide: Styles, Sizes & What to Expect
Photo tips
How to Pick the Perfect Photo for a Custom Pet Figurine
特点：桌面一屏 ≈ 头条 + 三张小卡；三栏遇到任何篇数都不难看（缺位自然留白在行尾）；摘要只在头条上出现，小卡靠标题+标签说话。手机端：头条保持大卡，其余变成"左小图右文字"横条（见方案 B 手机演示，两案手机端同构），滚动长度约为现在的 40%。
三、方案 B：列表式（报刊风）
头条大卡保留，下面每篇一行"左缩略图 + 右标题"，最省滚动、最像内容站。右边是手机端同构演示：
Behind the scenes
Why We Only Make Pets (and Why Cute Is Harder Than It Looks)
People ask us two questions a lot. "Do you also do people?" and…
Keepsake
Pet Memorial Keepsakes: Gentle Ways to Keep Their Memory Close
Losing a pet is losing family. There's no fixing that with an object…
Cat dad
10 Gift Ideas for Dog Moms & Cat Dads Who Have Everything
Some people are easy to shop for. Pet parents are not…
特点：桌面一屏 5-6 篇、手机一屏 4 篇，扫读效率最高；代价是图片变小、"萌感"弱，整页更像资讯站而不是玩具品牌。
四、方案 C：瀑布流（和 Studio 页呼应）
图片按自身比例错落排布，视觉最活泼：
Gift guide
What to Say (and Give) When Someone Loses a Pet
Behind the scenes
Why We Only Make Pets (and Why Cute Is Harder Than It Looks)
Keepsake
Pet Memorial Keepsakes: Gentle Ways to Keep Their Memory Close
Cat dad
10 Gift Ideas for Dog Moms & Cat Dads Who Have Everything
Buying guide
Custom Pet Figurine Buyer's Guide: Styles, Sizes & What to Expect
Photo tips
How to Pick the Perfect Photo for a Custom Pet Figurine
特点：视觉最有"逛"的感觉，和 Studio 花絮页风格呼应；缺点是没有头条位（新文章不突出）、文章少时错落感出不来、扫读结构感最弱。手机端两栏瀑布流。
五、三案对比
| A 杂志式 ⭐ | B 列表式 | C 瀑布流 | |
|---|---|---|---|
| 桌面一屏可见篇数 | 约 4 篇 | 5–6 篇 | 4–5 篇 |
| 新文章的突出度 | 强（头条横幅） | 强（头条保留） | 弱（无头条位） |
| 品牌萌感 / 图片表现 | 好 | 一般（图变小） | 最好 |
| 文章少时（6 篇）观感 | 整齐 | 整齐 | 错落感不足 |
| 文章多了以后 | 翻页整齐 | 最耐扫读 | 越多越好看 |
| SEO / 结构清晰度 | 好 | 最好 | 一般 |
我的推荐顺序：A > B > C。理由：博客每周更一篇、走 SEO 长线，A 在"新文章突出、扫读效率、品牌感"三者间最平衡；等文章攒到 20+ 篇如果想换气质，再切 C 也不迟（都是改同一个文件）。
六、三案共享的通用升级（选哪案都做）
- 分类胶囊加选中态：当前所在标签高亮粉底，和政策页导航条同款；
- 手机端紧凑化：告别"一篇一大块"，滚动长度约砍到现在的 40–50%；
- 孤儿卡消失：三栏/列表/瀑布流天然不怕单数；
- meta 行保留 日期 + 阅读时长 + Read →，样式不变；
- 文章内容、标签、配图零改动——只改列表页的壳。
七、拍板记录
2026-08-19 已拍板：方案 B 列表式，排序按发布时间新→旧（最新在最上）。当天施工上线；头条保留摘要、列表行带一行摘要（手机端隐藏）。改前文件已备份可回滚。
PawChibi 博客列表改版方案 · 2026-08-19 · 拍板后施工，改前备份可回滚