从 Heo 到 Heo Pro | RHZ 博客

type

Post

status

Published

date

Feb 9, 2026

slug

heopro

summary

Heo Pro 源于对原主题“好看但不够耐读”的反思，目标是打造更克制、耐看、服务内容表达的个人主题系统。重构重点包括以统一 Design Tokens 将高饱和硬色块改为中性、半透明、轻描边的材质化语言，统一导航、分类栏与 Footer 收口，并兼顾亮暗模式自洽；同时整理正文排版与代码块可读性，强化长期阅读体验，让内容真正成为页面主角。

为什么还要做 Heo Pro

Heo 本身已经是一套完成度很高、也很有生命力的主题。它热闹、鲜明、有记忆点，所以在很长一段时间里，我都觉得它已经足够好了。

但写得久了、用得久了，我慢慢发现自己真正想要的，好像不是一个“已经很好看”的博客，而是一个更克制、更耐读，也更贴近自己表达方式的空间。

我不太想让页面靠高饱和色块去制造存在感。相比之下，我更喜欢那种被认真打磨过的感觉：有材质、有层级、有一点呼吸感，但不过度喧哗。它应该服务阅读，而不是抢走注意力；应该托住内容，而不是压过内容本身。

于是，Heo Pro 就从这个念头开始了。

它最初当然是一次视觉上的不满足，但走到现在，它改动的其实早就不只是视觉层了。对我来说，它更像是一套围绕长期写作与内容表达，慢慢长出来的个人主题系统。

一、设计语言的重构：从“好看”到“耐看”

这次重构最核心的变化之一，是让界面逐步从高饱和、强对比的硬色块表达，转向更克制的材质化语言。

以前那种“卡片很多、颜色很亮、反馈很明显”的视觉刺激，确实很容易抓眼球。但现在我更在意的，是整体是否统一、稳定，能不能经得起长时间阅读。

1. 从硬色块转向材质感

我重新整理了一套更统一的 Design Tokens，并围绕它去调整页面中的卡片、导航、悬浮层和底部区域。

核心方向大概是这些：

用更中性的底色代替原本更强调存在感的背景色

让导航栏、下拉菜单、卡片容器逐步采用半透明磨砂材质

用更轻的描边和更克制的阴影建立层级，而不是依赖厚重投影

让不同组件之间拥有一致的材质逻辑，而不是各自为战

这类变化并不追求“第一眼惊艳”。我更在意的是长期使用时的稳定感。页面不需要很用力，也可以慢慢建立起自己的秩序。

2. 导航、分类栏与 Footer 的统一收口

这次改动也不只是改正文，而是把整站比较核心的骨架一起收了一遍。

比如顶部导航，我把原本更直接的高亮反馈，调整成更接近胶囊式的有色磨砂高亮；分类栏同步升级成统一的玻璃组件；Footer 也不再只是一个收尾区域，而是尽量在视觉上和正文背景自然过渡，减少断层感。

这些改动单拎出来看都不算惊天动地，但它们共同服务的是同一个目标：

让整个站点更像一个完整系统，而不是一组风格接近的独立模块。

3. 亮暗模式都要自洽

暗色模式从来都不只是“把白变黑”这么简单。

我更在意的是：页面进入暗色环境之后，玻璃材质还成不成立，文字对比是否温和，代码高亮有没有层次但又不刺眼，整体气质是不是还能保持克制。

所以这部分我也做了比较细的调校。它不是附加项，而是整套设计语言能不能站住脚的一部分。

二、阅读体验的重构：让内容真正成为主角

如果说设计语言决定的是“页面看起来像什么”，那阅读体验决定的就是“它读起来到底舒不舒服”。

对我来说，一个博客主题最重要的能力，从来不是展示自己做了多少视觉技巧，而是能不能让人长时间停留在内容里，并且不觉得累。

1. 正文排版的重新整理

我重新调整了正文区域的排版节奏，包括：

行高和段距的重新平衡

图片圆角、边界和画框感的统一

引用块的极简化处理

标题、正文、注释之间更清晰的层级关系

这些改动单看都不算大，但叠加起来之后，长文阅读的疲劳感会下降很多。页面不再依赖花哨装饰去撑气质，而是通过字体、留白、边界和节奏，去建立一种更安静的阅读氛围。

2. 代码块也应该有“可读性”

代码是技术博客里很重要的一部分，它的质感会直接影响整篇文章的阅读体验。

所以我对代码块也做了专门调整：

保留 Mac 风格的窗口提示元素

统一浅色和深色模式下的代码块基调

为长代码提供按行数阈值触发的折叠能力

让短代码片段保持干净，不被多余控制项打断

我希望代码块在页面里看起来不是一段突兀的“技术噪音”，而是和整篇文章仍然属于同一个系统。

三、从页面到功能：它开始不只是一个主题

如果 Heo Pro 只停留在视觉层，那它最多只是一套更符合我审美的主题改造。

但随着改动不断深入，我越来越明确地感觉到，真正需要被重构的，不只是皮肤，还有页面的信息组织方式、内容模块之间的职责边界，以及功能本身应该怎么融入写作场景。

1. About 页：从信息堆叠到概览与引导

About 页就是一个很典型的例子。

一开始，这类页面很容易做成“什么都想放进去”的集合页：经历、标签、技能、时间线、兴趣、书单、联系方式……看起来很丰富，但读起来其实很重。

后来我的调整方向慢慢变成了：

让 About 页承担“概览 + 引导”的职责

把能独立承载的内容拆出去

让 Timeline 更摘要化，而不是无节制拉长页面

把人物、兴趣、亮点、书单这些模块重新分工

这一步对我来说很重要，因为它意味着主题设计开始进入内容架构层，而不只是视觉修饰层。

2. 微信读书与书单：从装饰模块变成内容链路

阅读一直是这个站点里很重要的一部分，所以书单系统不能只是一个“看起来有点文艺”的静态装饰。

围绕微信读书，我也逐步把它做成了一条更完整的链路：

书单数据可以持续同步

阅读记录可以沉淀为可维护的数据视图

About 页与书单页各自承担不同展示职责

页面展示不只是“列书”，而是围绕阅读记录本身组织内容

做到这里之后，我越来越确定：一个主题真正成熟的标志，并不是视觉细节有多炫，而是它能不能把内容、结构和数据关系一起处理好。

3. 灵动岛播放器：从一个组件到一套音频系统

播放器是这次改造里最有存在感的部分之一。但我越来越觉得，它真正值得写的，并不只是“像不像 Apple”，而是它已经慢慢从一个播放器组件演化成了一套音频系统。

表层上，它有这些体验特征：

常驻站点模式和文章模式之间的切换

灵动岛形态下的收起与展开

文内音频的统一接管

弹幕式歌词带来的陪伴感

但真正支撑这些体验的，是底层机制上的统一：

以音频内核作为播放基础

用自定义 UI 承载状态展示和交互反馈

为音频和元数据引入代理层

通过缓存、并发控制和回退策略保证稳定性

让全站播放器与文内内容共享同一套状态逻辑

也正因为这样，它才不只是一个“有趣的小组件”，而成了这个主题里最有个性的功能模块之一。

四、从补丁到系统：Heo Pro 的变化已经超出最初设想

回头看，Heo Pro 最开始确实可以被理解成一个主题补丁。

那时候我主要在做的，无非是这些：

调整视觉风格

收拢设计语言

优化局部阅读体验

但随着页面结构、功能模块和内容链路不断往前延展，它已经越来越难被简单概括成“美化 Heo”了。

它开始涉及：

组件职责的重新划分

页面信息架构的重组

内容展示方式的取舍

音频系统的统一接入

阅读记录与书单数据的持续沉淀

主题命名、结构与样式作用域的渐进迁移

也就是说，它已经从一套视觉补丁，慢慢演化成了一套持续重构中的个人主题系统。

这件事对我来说，其实比“做出一个更好看的博客”重要得多。

因为真正让我在意的，从来不是把一个主题改得多么花哨，而是能不能把它慢慢打磨成一个长期可写、长期可用，也长期符合自己审美和表达方式的空间。

写在最后

Heo Pro 到现在仍然不是一个结束态。

它更像是一条还在继续的路径：从设计语言开始，经过阅读体验、页面结构、功能系统，再逐步延伸到主题迁移与内容组织本身。

我越来越相信，一个真正好的个人博客，不应该只是“能发文章”的地方。它也应该是一种长期写作的环境，一套带有个人判断和气质的界面系统，甚至是一种不断校准自己的方式。

而 Heo Pro，正是我在这条路上持续留下的痕迹。