这是新版布局的第一篇文章。整站不再基于 WordPress，也没有任何外部 CDN、统计脚本或推广链接——所有资源都是本地文件。
为什么重做
旧的布局建立在 float 加固定高度、子元素绝对定位之上。只要标题长一行、摘要多一段，元素就会互相压叠。列表还只能单列堆叠，宽屏下大量空间被浪费。
更麻烦的是维护成本：一个主题里塞进近 200KB 的 functions.php，再加上更新检查、版本统计上报、以及页脚里带 utm_source 的推广链接。
新架构
新方案只有三层：
- 令牌层：颜色、间距、圆角、阴影、层级、动效全部集中定义；
- 布局层：
container/stack/cluster/grid/with-aside五个原语； - 组件层：卡片、顶栏、目录、页脚，只消费令牌，不写死数值。
文章列表
列表用一行 CSS 完成响应式：
.grid {
display: grid;
gap: var(--sp-7);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}宽屏自动三列、窄屏自动单列，无需任何媒体查询。
深色模式
令牌在 :root[data-theme="dark"] 下整体替换，组件代码完全不用改。默认可跟随系统，用户手动切换后记入 localStorage，并在 <head> 里提前执行以避免闪白。
判断标准很简单：把 JavaScript 全部关掉，页面是否依然可读、可点、可跳转。
接下来
目前 js 只剩约 4KB，负责主题切换、抽屉菜单、阅读进度、目录高亮与列表筛选——全部是渐进增强，缺失也不影响主体功能。