因为没搞懂怎么挂别人主题的依赖,索性自己写了一个,从 UI 参考稿开始。最初取名 Hoshino(星野),后来主题长出了入夜的星空和室女座,干脆改名 Spica——室女座最亮的那颗星、角宿一,也是织星这个名字的落点。
至于为什么要一直打磨这个主题,我仍然想和其他人拉出差距,而不是停留在可以复刻的平庸上。
长什么样
- 米黄色打底,樱花粉做唯一主色。颜色全部用 oklch 写,亮色、暗色、跟随系统三种模式
- 全站字体是 Maple Mono CN——中英 2:1 的等宽字体,我一直想用它
- 文章头图不放图片,改成「星图」:拿标题做哈希种子,构建时生成一张星座连线 SVG。同一篇文章永远是同一张,每篇文章互不相同
- 和很多很多小惊喜
一些实现碎片
- EJS 模板 + 两个 CSS 文件,没上任何框架
- 暗色模式用
data-color-mode切换,颜色全走 CSS 变量,星图封面也跟着一起变色
上线之后
主题没有停在发布那天,之后一直在长。挑几条值得留档的:
- 首页夜空:重写成一条汇向角宿一的星河;暗色下点亮 Spica,可以许愿。樱花花瓣分了景深层,入夜自动关闭——夜晚的页面应该比白天更安静
- 文章组件:多了五个 tag plugin——剧透条、台词、评分、链接卡、图组。剧透条在写 ATRI 那篇时第一次实战
- 引用分了两种:
>旁注换楷体排,借中文排印「换一种声音」的老办法;带署名的blockquote标签才配引号。装饰不能谎报语义 - 星图封面:环境光移出了 SVG,穿过 mask 融进正文,不再被视口和渐隐裁出硬边;远景小星从中性灰改成带彩度的玫瑰灰,浅色下不再像一层灰尘;入场时星座会先把自己描绘一遍
- 杂项:阅读统计换成不蒜子;全站交互收在一个
shared.js;滚动渐入刻意不碰正文段落
回头看,最重要的一次改动是删减:指针拖尾、点击星尘、暗色光斑都拿掉了。拉开差距靠的不是堆料,是克制。