趁着周末有空，把 Grove 的主题整体翻新了一版。上一版走的是极简黑白灰（参考某位朋友的站点原型），结果自己越看越觉得「死气沉沉」——干净是干净，但少了点呼吸感和辨识度。于是干脆推倒重来，定了一套更明亮、更有活力的方向。
这篇文章既是改动说明，也是一篇「给自己看的 changelog 长文版」。
配色：从黑白灰到蓝白活力风
核心变化是主色。原来的 #1A1A1A（近黑）换成了一抹干净的蓝色 #2563EB，背景也从冷灰 #F5F5F5 调成更暖的 #F8FAFC。
为什么是蓝
蓝色在屏幕上足够安静、不会喧宾夺主，又能在一片白底里立刻把「可点的东西」（链接、按钮、当前导航）挑出来。比起纯黑的硬边界，蓝白的对比更柔和，长时间阅读眼睛更舒服。
暗色模式也没偷懒：主色降到柔和的 #60A5FA，不再刺眼；背景压到 #111111，正文提亮到 #F5F5F5，整体是「深炭 + 暖白」的调子。
侧边栏：更像一个有导航能力的信息台
侧边栏做了三处增强，现在是全站最重要的导航入口：
- 顶部搜索框：圆角输入框，支持
⌘K/Ctrl+K快捷键唤起； - 导航项带图标：首页、归档、分类、标签、关于……每一项都配了 SVG 图标，扫一眼就能定位；
- 「分类」区块：自动统计每类文章数（比如「技术 38 / 工具 12 / 随笔 9」），点一下直接进分类页。
关于标签云
有读者反馈左侧标签太多显得挤，所以这一版把标签云从侧边栏拿掉了——需要按标签浏览时，去标签页一样能看。侧边栏现在只保留「搜索 + 导航 + 分类」，更清爽。
字体：全站统一衬线，代码块除外
之前界面用的是无衬线 Inter，正文（文章）用的是衬线 Noto Serif SC，两套字体并排，总有点「没对齐」的违和感。这版做了一个决定：整站所有文字统一成衬线体 Noto Serif SC，跟文章正文完全一致。
侧边栏、导航、标题、标签、面包屑、目录、卡片、页脚……全部衬线。只有代码块、行内代码、代码语言标签保留等宽字体（JetBrains Mono）——这是功能性需要，正文里出现代码时仍是等宽，更易辨认。顺手把已不用的 Inter 从字体加载里移除，首屏更轻。
一个权衡
代价是界面小字（比如侧边栏的元信息）会有一点点「书卷气」，但换来了整站的一致性和阅读氛围。如果你更喜欢正文衬线、界面无衬线，可以回头再调——这套切换靠改根 CSS 变量就能完成。
页脚：滚到底也钉在底部
原来的页脚是普通流内元素，内容短的时候会浮在半空，内容长的时候又跟着滚走。这版改成 position: sticky; bottom: 0——无论怎么滚，页脚都钉在视口底部，实心背景不透光，顶边一道细分隔阴影把它和正文隔开。
首页：重新设计的区块
首页是这版「不协调感」最重的地方，主要因为四个区块标题用了同一套样式类，但那个类压根没定义 CSS，于是标题是裸文本。已全部统一成带蓝色竖条的区块标题（.section-head）：两端对齐、衬线标题、灰色小字副标题（如「精选 Featured」）。
Hero 区的「此刻」卡片也去掉了原来的棕/花园配色，四张卡片的图标圈、悬停、底部脉冲点、翻面背景、引用引号全部改成蓝色主色系；顺手修了个头像字母「蓝底蓝字看不见」的小事故——现在字母是白色。
顺手修掉的两个隐藏 bug
改着改着，发现两个一直存在但没人提的 bug，一并修了：
1. .mdx 文章里的提示框变裸文本
:::tip / :::note / :::warning 这些提示框，在 .md 文章里正常，但在 .mdx 文章里却显示成了纯文本。根因是转换插件只配给了 .md 的渲染管线，.mdx 走的是另一条管线，没拿到插件。现在把插件链同时挂到 MDX 继承的 markdown.remarkPlugins / rehypePlugins，像《本地优先架构在个人项目中的实践》这类 .mdx 文章的提示框和双向链接都恢复正常了。
写法提醒
提示框的标签必须用方括号形式，例如 :::warning[注意]。以前那种 :::warning 注意（标签写在冒号同行、无括号）的写法不符合规范，不会被转换。
2. 点分类 / 标签进空白页
分类页和标签页的内容其实是生成了的，但 <main> 被内联样式藏起来（opacity:0），却漏了归档页那种 astro:page-load 揭示脚本，导致整页隐形。补齐同款脚本后，点侧边栏任意分类或标签都能正常显示。
主题日志同步到 v1.8.0
所有改动都记进了主题日志（/changelog），版本号推到 v1.8.0（2026-08-14），共七条：蓝白主题、侧边栏增强、字体全站统一衬线、页脚固定、首页重构、.mdx 提示框修复、分类/标签页空白修复。
小结
这一版的目标就一个：让 Grove 看起来既有活力，又像一个统一的整体。蓝白配色负责活力，统一字体和区块标题负责整体感，固定页脚和增强侧边栏负责好用。
如果你在浏览器里看到哪里别扭，或者想调蓝色深浅、卡片间距，随时告诉我——下一版可能就从你的反馈里长出来。
试试看
打开本站后，按 ⌘K（Mac）或 Ctrl+K（Win）可以直接搜索；切到暗色模式看看蓝色在深底上的表现；点左侧任意分类，确认不再空白。