昨天刷到「星辰茶话」，在首页停了一会儿。

不是那种“哇好漂亮”的停，是觉得它坐得住：暖木色的横幅压得很低，导航是一张薄薄的白卡，四格栏目卡把「随笔 / 折腾 / 读书 / 记忆」摊在桌面上，下面是一张张紧凑的文章卡，标签是浅灰底，日期在右上角。整页没有多余的东西，但也不空。

看完就想给自己的博客也做一套。于是有了「拾光」。

一、拾光长什么样

名字是后来起的，方向一开始就定在“纸”上：纸底、白卡片、柔和投影，横幅用站点强调色做渐变，底下压着站名和一句话。首页是四张栏目卡——文章、笔记、碎语、归档——每张卡里有年份、篇数和一句短描述，右下角一个很大的浅色序号，纯装饰。

再往下是最近更新的列表：每张卡片左上角一枚「文章 / 笔记」标签，标题和日期一行，摘要两行，底部是相对时间和评论数。再往下是一条碎语，展示最近的一条短句。

文章页是单栏：标题、描述、字数与阅读时长，目录折在正文上方，正文里的图片点开是灯箱，评论区接在文末。归档、搜索、友圈、友链都有各自的页面，但共用同一套卡片语言。

配色没有自己定死。拾光只声明一层别名，纸色、墨色、强调色、线色全部取站点配色令牌。切到青瓷、黛蓝、暗色，主题跟着变；访客自己调的自定义色相也一样。

二、怎么做的

主题是纯 Liquid 模板包，不执行服务端 JavaScript。一个主题目录里放三样东西：

• theme.json：主题清单，写 id、名称、版本、截图和几个设置项（页头背景图、副标题、列表是否显示摘要）；
• templates/：layout、home、posts、single、archive、search、friends、links、moments、404，加两个分部模板；
• assets/theme.css：整套样式都在这一份里。

页面数据由站点渲染器塞进模板：首页拿到统计、最近更新和最新碎语；列表页拿到文章数组；文章页拿到正文 HTML、目录、上下篇和评论区。主题只负责排版，不查库、不算数据。

所以写主题不用动主程序。真正麻烦的是样式细节：

• 移动端导航在 360–390px 会换行，收了间距；359px 以下改成图标一行、导航一行；搜索展开时再收起导航行。
• 搜索框展开后按钮会变色，站点公共样式给展开态铺了浅底、把图标染成强调色，白放大镜压上去就糊了；主题里改成透明底、图标保持常态颜色。
• 友圈每个分组被站点样式描了上下两条线，主题里已经是卡片，线要去干净。
• 碎语的分组卡片平时不描边，只在 hover 时出一条强调色细线；为了悬停不跳 1px，平时用透明边框占位。

这些都不是大功能，但一件件抠完，页面才像“一套主题”，而不是“换了个配色”。

三、前台主题切换

主题做出来了，还得让访客能换。于是加了前台主题切换：

• 页头右下角一枚图标，点开是主题清单：经典、拾光、跟随站点默认；
• 选择写一条一年期的偏好 cookie，下次打开还是那套；
• 选完带一次性参数跳回原页面，绕开浏览器里最多 15 秒的旧 HTML；
• 切换响应带 Clear-Site-Data: "cache"，清掉这个源下的旧缓存；
• 「跟随站点默认」直接清 cookie，回到站主设定的主题；
• 整页刷新而不是局部替换——换主题要换 CSS，整页最干净。

面板是站点渲染的，不是主题自己拼的。主题布局只要输出一枚 chrome.themeSwitcher，就把这个入口挂上去；少于两套主题时它是空的。

四、缓存那个坑

刚上线就撞上一个问题：切完主题，点别的页面，又变回原来的主题。

查下来是 EdgeOne。边缘缓存只按 URL 存，不看 cookie；匿名访客请求首页时缓存了一份经典主题的 HTML，切过主题的访客再请求同一个 URL，直接命中那份旧 HTML。

第一版补法是给带主题 cookie 的请求加一条「不缓存」规则。问题按住了，但切过主题的访客每次都回源，TTFB 多一个往返。

后来改成按主题分缓存：EdgeOne 的自定义 Cache Key 里保留 blog_theme_choice 这个 Cookie，不同主题各存一份；源站这边，缓存键也按“实际生效的主题 id”分段，后台会话和站主预览仍然 private, no-store。同一套主题的访客共享一份 HTML，互不串。实测切过主题的访客，首页 TTFB 从 200ms 左右回到 60ms 上下。

现在的样子

站上有两套主题：经典和拾光。匿名访客看到站主设定的那套；想换的人点一下页头右下角的图标，选择会记在浏览器里，下次来还是那套。

拾光不算完美，但至少是照着星辰茶话那股“坐得住”的劲儿做出来了。后面大概还会改，改到它不只是“像”，而是自己的样子。