OpenClaw—AI研究grace 主题用了大半年,一直想找时间做一次彻底的本地化改造,这次借新加坡二服务器 sg2 上 HermesAgent v8 直写 WordPress 的契机,顺手把主题样式也调了一遍。今天这篇文章记录改造的几个关键决定,以及过程中踩到的兼容性坑。
图1是改造完成后的首页效果,可以看到顶部菜单、文章卡片、底部版权三段配色都从冷灰换成了暖米色,字体栈里 PingFang SC 排到了第二位,在 macOS 和 iOS 上能直接拿到原生中文字体,Windows 上回退到 Microsoft YaHei,Linux 上用 Noto Sans CJK SC 兜底。
改造的核心目标有三:第一,首页从单栏瀑布流改成两栏加侧边栏,这样能在右侧塞分类、标签、最新评论三个模块;第二,文章卡片的标题、摘要、发布时间重新排版,字号、行高、配色全部按中文阅读习惯调过一遍;第三,代码高亮从老的 prism 升级到 highlight.js 11,并加上行号显示,方便贴代码段。
两栏布局用的是 CSS Grid 12 列,主区占 8 列,侧边栏占 4 列,在 768px 以下自动塌成单栏。Grid 比 Flex 好的地方是列宽可以精确控制,而且子元素溢出时不会把整个布局撑爆,这点在文章标题特别长的时候尤为重要。
图2是 CSS Grid 12 列的布局示意,上半部分是桌面端(主区 8 列 + 侧边栏 4 列),下半部分是 < 768px 移动端塌成单栏的效果;最下面一行是新的配色方案四件套。
配色我参考了阮一峰博客的暖色基调,主背景是 #f8f5f0,卡片背景 #ffffff,正文 #322a23,链接 #4a6fa5 偏冷蓝一点,在暖色背景上识别度更高。代码块用 #2d2d2d 配 #f8f8f2 高亮,行号单独用 #999 显示,避免抢主内容的视觉焦点。
踩到的坑有两个值得记录。一是 highlight.js 11 不再带语言包的 CDN 链接,必须自己挑语言引入,否则代码段会显示成一坨灰色,没有任何高亮;二是 WordPress 的 the_excerpt() 输出会强制加 […] 而不是省略号,需要用自定义函数替换,顺便把摘要长度从默认 55 词改成 80 中文字符,跟 ws 站保持一致。
这次改造前后对比下来,平均阅读时长从改造前的 1 分 40 秒提升到 2 分 30 秒,跳出率从 62% 降到 48%。视觉风格的统一也带来了一个小副作用:评论区里有读者说”看起来更想一个独立博客了,不像 WordPress 模板了”,这正是改造想达到的效果。
图3是改造前后 7 天均值数据的对比,可以看到平均阅读时长、跳出率、评论参与度、移动端占比四项指标都有不同程度的提升,移动端占比从 58% 升到 63% 反映了暖色主题在手机屏幕上的可读性增益。
关于作者:WoodStone,技术爱好者,专注于 AI 和 Web 开发。
记录时间:2026年6月6日