Coverflow：从一张封面开始

写博客这些年，主题换了一茬又一茬。Landscape、Butterfly、AnZhiYu，最近用的是 Stellar。每一个都挺顺手，可每一个都让我觉得，这不太像我的东西。

最直接的感受是封面。我挑封面是认真的，几百张图里选一张，结果它在列表里只有一百二十像素宽。

所以决定自己写一套。从九月动工，改了十几轮，现在它叫 Coverflow。

首页不该是一个列表·

动笔前我先想清楚一件事：博客的入口到底该是什么。

大部分访客不是来查资料的，他们只是顺手点进来看看。给这样的人看一列卡片列表其实很浪费，每张卡片的信息太少，视觉上又太平。

于是首页变成一整屏封面。最新十篇有封面的文章全屏铺开，缓慢淡入淡出，标题压在左下角，没有摘要也没有阅读更多。你看到的是一张照片，点它就进去。

这带出了后面所有的决定。首页既然是一整屏图，文章页就不该是白底黑字，否则像从画廊走进了一间办公室。所以文章页把封面拿来当背景压暗，内容装在一张毛玻璃卡片里。点进来之后环境没变，只是光线暗了，字浮上来。右下角再挂一个目录面板，想跳哪节就跳哪节。

三层就这样定了：封面负责吸引，暗色负责沉浸，目录负责导航。

第一版做完，我给一篇文章加了 covervidevo，想试试轮播里放视频。当天就发现不对：视频二十三秒，轮播六秒一切，播到四分之一就被切走了。

原因有点蠢。代码里本来写了视频页不启动定时器，可触摸滑动结束、鼠标移入移出、按钮点击这三处，全都无脑把定时器又打开了。后来把所有入口收敛到同一个函数里，视频页一律不建定时器，离开这一屏只剩两条路：视频播完，或者用户自己切走。

麻烦的是真实环境。浏览器会拒绝自动播放，视频会加载失败，用户会锁屏切走再回来，网络慢的时候播放结束事件可能永远不来。少处理一条，访客看到的就是一帧卡死的画面。现在这几种情况都会退回定时轮播，视频那一屏终于能安安静静播完，再自己翻篇。

主题在电脑和 iPhone 上都挺好，安卓上点按钮整屏闪一下。

我一开始以为是性能问题，把动画砍了一轮，没用。后来才明白，问题不在动画，在我写代码时默认了所有人都用新浏览器。

我习惯用 inset: 0 定位，一行顶四行，可老内核对它支持很差，不支持时整个元素位置直接失效，首页的图就干脆不显示。aspect-ratio 更阴，不支持时容器高度是零，里面的图片全部消失，而你在代码里看不出任何异常。

还有一处更隐蔽，跟 CSS 无关。我每次切幻灯片都往 <html> 上写一个 CSS 变量，用来给 iOS 的工具栏后面铺图。往根元素写变量会让整页样式重新计算，表现正好就是点一下闪一下。而那个变量在安卓上根本没人用，纯属白干。

这几处修完，闪烁才真的消失。毛玻璃我仍然默认开着，只在不支持的设备上退成实色。为了兼容就一开始不做，我觉得不划算。

真正花时间的从来不是主要功能，是那些没人注意、一旦不对就浑身难受的地方。

手机上首页的页脚会和轮播控件叠在一起。留个间距听起来很简单，难的是页面放不下的时候怎么办。我的选择是收起页脚、保住控件，因为控件是功能，页脚是信息。

页脚还有个更细的毛病。电脑上贴右下角，手机上居中，切换时该有缓动，可居中的几种写法都不能过渡。最后用 left 加 transform 绕着做，跨过断点时两个值同时变，看起来就是一次先快后慢的滑行。

首页在手机上还能上下滑一小段。原因是 100vh 在手机浏览器里等于工具栏收起时的高度，比眼前可见的区域高一截，文档就多出那么点可滚动的距离。换成 100dvh 就好了。

这些改动加起来几十行，占整个主题不到百分之五，却是能不能放心用的分界线。

目录面板我做了很久，位置怎么调都不对，它总是跑进文章卡片里面。

查了半天才明白：卡片用了毛玻璃，而这个属性会让固定定位的子元素以卡片自己为坐标系。所以那个面板必须放在卡片外面。一个视觉需求，反过来管住了我的 DOM 结构。

还有个小细节。面板收起是靠脚本改属性实现的，可脚本执行前的那一瞬间它会先展开闪一下。最后在 CSS 里补了一道保险，脚本没跑起来时内容也不显示。

另一个坑在评论区。我想让评论每页显示五条，以为改个配置就行，结果 Twikoo 那个参数在前台完全没用。翻源码才看明白，前台评论用的是「加载更多」那一套，压根没有每页多少条的概念。最后只能自己在渲染层数一遍、重新排一遍，翻页条也自己画。控件还得挂在它的容器外面，否则它自己重渲染一次就被清掉了。

你以为是在配一个开源组件，其实是在给它打补丁。

移植 Stellar 标签的时候，我搬了一半就跑去用，结果所有图片都是空的。因为它的图片真实地址藏在懒加载属性里，必须有个脚本去换回来，而我只搬了标签没搬脚本。依赖是隐式的，搬一半的后果是静默失效。

配置项我给自己定了条规矩：能自动判断的绝不做成开关。评论路径不写就自动用当前页面路径，页脚署名留空就自动从域名里取，分享图按文章封面、兜底图、站点 logo 三级往下退。能少让人配一样，就少一样。

主题现在七十二个文件，主样式不到九百行，很小，功能也谈不上全。

有些事我到现在也没解决。标签页和归档页还没有专属模板，用的还是最朴素的布局。iOS 底部工具栏的沉浸也做不到，Safari 那块区域不属于页面，只有把网站添加到主屏幕才能全屏，我试过几种方案都绕不过去，最后只在交界处加了一层渐变，让它不像一道硬边。

但它有个好处，就是我知道每一行为什么在那里。知道页脚那点间距是怎么算的，知道目录面板为什么必须放在卡片外面，也知道那个多余的暂停调用为什么要加一行判断。

换主题的快乐是即时的，一个仓库拉下来，改两行配置，样式焕然一新。代价是那些你喜欢的细节和讨厌的细节一起打包给你，你没有讨价还价的余地。

自己写就没这个便利，也没这个无奈。这大概就是折腾的终点：不是为了做个比别人更好的东西，只是想做个完全对得上自己心意的东西。