从 Heo 到 Heo Pro | RHZ 博客

type

Post

status

Published

date

Feb 9, 2026

slug

heopro

summary

Heo 是一款充满活力的主题，但在长期的写作实践中，我开始向往一种更克制、更具“材质感”的表达方式。我希望我的博客不仅是一个信息载体，更像是一台精致的 MacBook 屏幕，让阅读变成一种享受。

💡 当 Heo 遇上 macOS

Heo 是一款充满活力且相当完美精致的主题，所以我想在此基础上做些锦上添花的设计，我的想法是一种更克制、更具“材质感”的表达方式。我希望我的博客不仅是一个信息载体，更像是一台精致的 MacBook 屏幕，让阅读变成一种享受。

于是，我对现有的 Heo 主题进行了一次深度的“基因重塑”。

🛠 设计语言的重构

1. 全局材质：从色块到玻璃

我们彻底放弃了原生的硬色块，引入了一套系统级的Design Tokens。

底色：使用了 macOS 系统同款的中性灰（Light #f5f5f7 / Dark #0f1115）。

玻璃拟态：将导航栏与卡片容器全面升级为半透明材质，配合 backdrop-filter: saturate(180%) blur(16px)，营造出 Safari 般的通透感。

细描边与光影：用 1px 的极细描边替代沉重的阴影，让层级更加细腻。

2. 阅读体验：密度 B 计划

为了解决长文阅读的疲劳感，我将排版系统调整为“密度 B”模式：

呼吸感：将正文行高锁定在 1.78，配合 0.9em 的段间距。

画框感图片：文章内的图片被赋予了 12px 的圆角与微弱阴影，让每一张图都像是一件艺术品。

极简引用：重塑了 blockquote，去掉了浮夸的装饰，仅保留纯净的排版节奏。

3. 代码块：极客的执着

代码是程序员的语言，它的质感至关重要。

Mac 窗口风格：保留经典的三色点，并将代码块在浅色模式下也默认为暗色背景，增加视觉冲击力。

智能折叠 (Scheme C)：引入了行数检测逻辑，只有超过 30 行的长代码才会触发极简折叠条（S1 方案），短 snippet 保持干净利落。

4. 更简洁大气的footer

移动端的Footer bottom 会是三段纵向排列：

left（PoweredBy/作者）

center（社交图标）

right（备案/统计）

桌面端的会变成横向并列，社交图标在中间且不会撑高 Footer。

🌗 暗色模式：深度调优

这不仅仅是“把白色变黑”。我们重新调整了所有玻璃材质的饱和度和透明度，确保在深夜阅读时，代码高亮不刺眼，背景文字对比度温和。

📦 获取方式

我将这次所有的改动打包成了一个“样式补丁包”，你可以通过简单的文件替换，将你的 Heo 主题瞬间升级为 HeoPro。

项目地址：

GitHub - RHZHZ/NotionNextHeoPro: 这是一套为 NotionNext 的 Heo 主题深度定制的视觉补丁，旨在将主题风格转化为极简、精致的 macOS / Apple 官网质感。

这是一套为 NotionNext 的 Heo 主题深度定制的视觉补丁，旨在将主题风格转化为极简、精致的 macOS / Apple 官网质感。 - RHZHZ/NotionNextHeoPro

https://github.com/RHZHZ/NotionNextHeoPro