折腾记录

没有换主题，而是把在用的 reimu 从头到脚重做了一遍样式。这篇记录改动清单、理由和踩到的坑。

改造前后对比

为什么要改

用久了会发现几个怎么调参数都绕不过去的问题：

  • 侧栏组件宽度参差不齐，最新文章 很宽、标签云 很窄，看着像没对齐；
  • 侧栏菜单是 border: 10px double 画出来的大方框，选中项被填成纯黑，太重；
  • 首页卡片左右交替 + 封面 clip-path 斜切，压在花哨的插画上显脏；
  • 顶部导航背景是透明的，而 script.js 在向下滚动时会把它移出屏幕、向上滚动时又拉回来，回到页面中部时就变成白字压低在白色正文上，几乎读不出来；
  • 深色模式下 --red-0 直接引用了深绿 --red-1，链接和标题在深色底上糊成一片。

所以这次的目标很明确：保持模板结构不动，把配色、层级、间距和状态反馈全部重做一遍。

配色与设计令牌

主色还是那套绿，只调整了明度让层次拉开，并补上几个语义化变量：

1
2
3
4
5
6
:root
  --red-0: rgb(24, 58, 26)        // 原来是比较生硬的纯黑
  --red-3: rgb(150, 172, 148)     // 边框灰，降低对比
  --color-border: rgba(45, 90, 45, 0.12)
  --bg-top: #f7fbf5               // 页面顶部渐变
  --color-card-border: rgba(45, 90, 45, 0.08)

圆角和阴影也统一收进变量，全站只用一套：post-radius = 16px、radius-sm = 10px、radius-pill = 100px，再加 card-shadow / card-shadow-hover 两级阴影。

顶部导航

改成常驻的毛玻璃条：白色半透明 + backdrop-filter: blur(16px)，文字用深绿。这样无论它停在横幅上还是滚回正文上方，都始终可读；鼠标悬停时加深，图标和链接各有一个圆角胶囊的 hover 反馈。

关键的一行是给 #header-nav 加一个铺满的伪元素来承载背景，而不是直接改它的 background：

1
2
3
4
5
6
7
#header-nav:before
  content: ""
  position: absolute
  inset: 0
  z-index: -1
  background: rgba(255, 255, 255, 0.72)
  backdrop-filter: blur(16px) saturate(1.6)

首页卡片

  • 去掉封面上的斜切 clip-path，改成干净的圆角矩形；
  • 卡片高度从写死的 230px 放开，用 min-height 兜底，1px 描边 + 柔阴影；
  • 悬停时整卡上浮 5px、封面缓慢放大，不再整体缩放导致文字发虚；
  • 日期/字数/预计阅读时间这三行原本在标题上方、靠右对齐，中间留一大片空白——用 flex 的 order 把它挪到摘要下面，靠左对齐，信息密度正常了；
  • 置顶 标记从小方块改成毛玻璃胶囊。

侧栏

  • 所有小组件显式 width: 100%，宽度整齐；
  • 菜单项改成整行圆角胶囊，hover 右移 3px，选中项用绿色渐变 + 白字；
  • 统计区去掉两条红绿竖线，改成上下细边框 + 主色数字；
  • 标签云从挤成一行的纯文字改成圆角 chip，hover 变实心绿。

文章页

正文内容区加宽到 35px 的内边距，段落行高放到 1.9；引用块从”浅绿底 + 6px 粗边 + 阴影”改成左侧 3px 实线 + 圆角，正文里的 行内代码 加底色，分隔线从点状渐变换成 1px 细线，链接用 text-decoration-color 做细下划线。

深色模式

深色不是简单地把浅色反过来：浅色下的深绿在深色底上对比度不够，所以深色块单独给了一套浅绿（--red-1: rgb(108, 188, 90)），底色用 #1f2329、卡片用 #272b30，边框改成半透明白。

怎么改的

关键是不改上游的任何 partial 文件，而是新增一个覆盖层，放在样式入口的最后：

1
2
// style.styl 末尾
@import "_partial/overhaul"

因为同特异性下后加载的规则生效，所以覆盖层可以放心地用相同的选择器重写默认样式；将来主题升级时，冲突范围也一目了然。这次改动的文件只有：

  • themes/reimu/source/css/_variables.styl：配色与圆角/阴影令牌
  • themes/reimu/source/css/_partial/overhaul.styl：新增覆盖层
  • themes/reimu/source/css/style.styl：最后引入覆盖层
  • themes/reimu/layout/_widget/tagcloud.ejs：给 tagcloud() 传 min_font / max_font

还能继续做的

  • 侧栏现在在左边（#content.sidebar-right 的 flex-direction: row-reverse 被注释掉了），恢复注释就能回到右侧；
  • 归档页的年份可以加个小圆点时间轴；
  • 评论区的 waline 样式还没动，可以接着对齐这套设计。