Writing / tools

博客换装:Spica 主题上线

因为没搞懂怎么挂别人主题的依赖,索性自己写了一个,从 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;滚动渐入刻意不碰正文段落

回头看,最重要的一次改动是删减:指针拖尾、点击星尘、暗色光斑都拿掉了。拉开差距靠的不是堆料,是克制。

站点设置
花瓣数量