前阵子读到威言威语的一篇博客：《十九年后，我第一次跳出自己的舒适区》。
作者自述自己写博客超过十九年，博客主题换过不少，但回头一看，清一色都是双栏布局——侧边栏、分类、标签、最新评论、归档，一个不少，规规矩矩。他突然意识到，这并不是什么设计底线，是一种待了十九年的舒适区。
这次改版，他第一次认真做了个单栏主题。问自己的问题是：
如果没有侧边栏，会怎么样？如果整个页面只剩下文章，它还能不能成立？如果把功能放到第二位，把阅读放到第一位，又会是什么样？
回到我的fuwari博客，看着我的侧栏，折腾了这么久确实还是老样子---左边一整条常驻，正文被挤在右边一窄条里。我自己写东西的时候，明明最该被看见的是文章，结果视觉重心全在左侧那一堆模块上。
于是在这篇博客的影响下，我开始准备对我的博客布局动个小手术。
第一步：让侧栏默认折叠
原布局是 grid-cols-[17.5rem_auto]，左边 17.5rem（280px）的侧栏常驻，正文占剩下的 auto。
我的目标很简单：打开文章页，侧栏默认折叠，正文吃满 --page-width（1168px）；想看的，自己点开。
为此在 MainGridLayout.astro 里加了一个状态机，由 <html data-sidebar> 这一个属性统一驱动：
collapsed：第一列收成0px，卡片吃满整宽，侧栏淡出隐藏（默认）expanded：用户手动展开off：本页不适用（首页 / 归档 / 关于），保持原双栏
@media (min-width: 1024px) { html[data-sidebar="collapsed"] #main-grid { grid-template-columns: 0px auto; column-gap: 0; } html[data-sidebar="collapsed"] #sidebar { visibility: hidden; opacity: 0; pointer-events: none; }}值得注意的是：
- 偏好记忆：展开/折叠状态存
sessionStorage，一次展开，本会话内翻其他文章不再弹回折叠。 - 移动端不参与：
<1024px本就是单列堆叠，折叠逻辑只在大屏生效，死按钮不会出现。 - 开关是一个贴在正文左缘外侧空白区的小箭头，半透明，hover 才实。展开后箭头转 180° 提示”点我收起”。
第二步：收窄阅读列
刚开始实现折叠效果时，正文一下吃到 1168px。量宽太宽了——大约 73 个汉字一行，读起来眼睛要横向扫很长的距离。
经过一顿折腾，终于找到的最合适的比例----只把卡片内部的文字列收 800px 并居中，卡片外缘纹丝不动：
如果你觉得更窄一点更好看，那就改一个数字就行：46rem ≈ 46 汉字/行，42rem ≈ 42 汉字/行。
:root { --read-width: 50rem; } /* 50rem = 800px */
html[data-sidebar="collapsed"] #post-container { padding-left: max(1.5rem, calc((100% - var(--read-width)) / 2)); padding-right: max(1.5rem, calc((100% - var(--read-width)) / 2));}padding 的百分比基准是包含块宽度（= 正文列宽），所以 (100% − 800px) / 2 正好把富余宽度左右平分。折叠 / 展开切换时，正文量宽恒为 800px，只是整列左右滑动，不突兀。
收尾：博客永远不会真正完成
威言威语在文末写：
双栏也好，单栏也好，其实都只是表现形式。真正没有变的，还是我写博客的初衷。……一个博客最大的乐趣，大概就是它永远没有真正完成的时候。
这轮折腾的起点，是别人一篇写了十九年的博客；终点，是我自己屏幕上更安静的一栏文字。
侧栏折起来之后，首页、归档、关于那些”功能型”页面该双栏还双栏——减法不是为减而减，是让文章页把注意力还给文章。至于阅读列定在 800 还是 750，过阵子读到什么、自己读着顺不顺，大概还会再调。
毕竟，和十九年比，我才刚上路。
后续：折叠与沉浸合并成了一条三档光谱
写这篇之后，博客上又加过一版「沉浸阅读」——点一下把导航、banner、侧栏、页脚全隐去，正文更窄，目录变成常驻侧栏。
两套东西摆在一起之后，重复就变得很明显了：它们做的其实是同一件事，只是深度不同，却各有一个开关、各有一套状态，连 CSS 都要互相抢特异性。于是收成了一条轴上的三档，由 html[data-sidebar] 一个属性驱动：
| 档 | 收掉什么 | 正文量宽 |
|---|---|---|
| 展开 | 什么都不收（双栏） | 卡内 800px |
| 折叠（默认） | 只收侧栏，导航与 banner 都在 | 800px |
| 沉浸 | 导航 / banner / 侧栏 / 页脚全隐 | 736px |
一个按钮循环切换，顺序是「展开 → 折叠 → 沉浸 → 展开」，按钮上悬停会提示下一档是什么。
有两点和本文正文写的已经不一样了：
- 第一节里那个「贴在正文左缘外侧空白区的小箭头」已经删掉了。 它的职责被工具栏那一枚阅读模式按钮完全覆盖，而少一个按钮本身就是减法。
- 量宽并成了一条链。 当初说「想更窄一点就改一个数字」，现在依旧成立，而且只改一个地方——两档都读同一个
--read-width，沉浸档只是把它覆盖成--immersive-width（46rem）。
至于本文留下的那套折叠 CSS（html[data-sidebar="collapsed"] #main-grid / #post-container 那两段），一个字都没改，现在还是线上跑着的那份。
相关阅读
- 右侧悬浮工具栏：回顶部、随机一篇、目录抽屉与评论跳转是怎么做的：侧栏折起来之后，工具栏的目录 / 评论按钮只有在文章页才亮起，那套五个按钮就是这里说的。
- 换掉那只紫鸟：侧边栏头像与手写签名的折腾记录：上篇，头像与签名的折腾。