这次我没有换主题,也没有推倒重做 WordPress。网站原来的功能其实都能用,真正让我不满意的是另一件事:页面看起来像一个“套好模块的技术模板”,却不像我自己的站。
首页曾经用了不少红黑色块,标题、卡片和按钮都很醒目,但放在一起以后有一种用力过猛的感觉。后来我把字号和模块做大,页面确实更整齐了,内容却没有因此变得更丰富,反而显得空。于是这次重构的目标很明确:保留现有主题和功能,把视觉、内容层级和细节重新做一遍。
我想要的不是“简约”,而是有内容的克制
我对新版的要求可以概括成三句话:
- 现代,但不要像批量生成的科技模板;
- 简洁,但不能靠大片留白掩盖内容不足;
- 有设计感,但不要霓虹、强发光和到处乱动。
最后确定的方向是一个偏 macOS 的个人技术工作台。浅色模式使用雾灰背景、白色内容面、细边框和柔和阴影;蓝色只用于按钮、链接和当前状态;草莓红则尽量留给 Logo,不再扩散成整站的模块主题。
先定边界:不碰父主题,不破坏现有功能
因为 AeroCorePro 是购买的主题,后续还需要正常更新,所以这次没有直接改父主题。所有新增样式、脚本和首页组件都放在 AeroCorePro-Child 子主题中。
重构过程中保留了原有文章、分类、页面地址、搜索、评论、侧栏和移动端菜单。每次部署前也会备份子主题文件与相关配置。这样即使某次改动出现问题,也可以快速回退,而不是在服务器上临时猜哪里改坏了。
首页不再只是“放大模块”
新版首页重新安排了内容顺序。首屏左侧直接说明本站记录什么,右侧展示最新文章,让访客一进来就能判断这个网站是否有自己需要的内容。
首屏之后增加了主题目录、项目展示、最近更新和站点工作台等模块。这里没有编造项目数量、性能数据或用户评价,所有文章、日期、分类和项目入口都来自 WordPress 里的真实内容。
这次调整对我来说最重要的并不是“多做了几张卡片”,而是每个模块承担了不同任务:
- 首屏负责说明网站方向;
- 主题目录负责快速浏览内容分类;
- 项目区域负责展示真正做过的工具;
- 更新列表负责体现网站仍在持续维护。
模块数量变多了,但边框、圆角和阴影都尽量克制,避免重新变成“卡片墙”。
关于本站和声明页,也重新写了一遍
旧版“关于本站”有很明显的模板文案味道:句子看起来正确,却不像一个真实的人会这样介绍自己。这次我把内容改成第一人称,直接说明我是谁、网站主要记录什么、内容是怎么产生的,以及可以通过什么方式联系我。
声明页也不再是一整块生硬文字,而是按原创内容、转载引用、下载资源、隐私与责任边界分组。该严肃的地方仍然严肃,但尽量让人能读完、能快速找到需要的部分。
重新设计像素草莓 Logo
之前的 Logo 是我自己临时拼出来的,草莓轮廓、文字比例和缩小后的识别度都不太理想。经过几轮尝试,最后保留了一颗更简单的像素草莓:三片深绿色叶冠、宽一些的红色果实、白色方形种子,以及集中在右侧和底部的暗红阴影。
上线版本不是直接使用带棋盘背景的 PNG,而是重新制作成真正透明的 SVG,并分别提供浅色和深色字标。这样在高分屏、手机和不同背景下都不会发糊,浏览器图标也同步成了同一颗草莓。
修复昼夜按钮,并给切换一个合适的动画
主题原来的浅色按钮使用了一颗带坑的黄色圆形图标,实际显示很像一块奶酪,而且太阳与月亮的状态表达也不够清楚。
现在它被替换成一个胶囊式开关:浅色模式显示太阳,深色模式显示月牙,圆形滑块会在两端之间移动。切换主题时,新颜色会从按钮所在位置向页面外侧展开,整个过程约 460 毫秒。
这个动画只在主动点击时运行,不会在页面加载时反复表演。浏览器不支持 View Transitions API 时会使用普通颜色过渡;如果系统开启了“减少动态效果”,动画会自动缩短到几乎不可见。
这次重构真正解决了什么
它没有让网站突然变成一个多么复杂的产品,也没有改变我写文章和发布项目的方式。它解决的是更基础的问题:页面终于开始像一个持续维护的个人技术站,而不是一个装了很多模块的现成主题。
对我自己来说,这次改版也留下了几条以后会继续遵守的原则:
- 真实内容比装饰重要;
- 颜色应该表达动作和状态,而不是填满页面;
- 动效应该解释变化,不能只是为了显得高级;
- 修改购买主题时,尽量通过子主题扩展,并始终保留回退方案。
网站还会继续调整,但大的视觉方向已经稳定下来。接下来比继续增加装饰更重要的,是把项目记录和真正有用的技术文章慢慢补充完整。