Chroma Blog - 关于本站

一、本站定位

很多个人站的问题是: 上线时很惊艳，后续维护却很吃力。

我在做本站时，最在意的是两件事:

写内容要顺手，所见即所得的编辑体验，尽可能的自动化。

站点要有美感，避免千篇一律的设计，简约同时功能完善。

所以这套站点最终解决的是三个长期问题:

内容怎么持续产出: AI 增强、翻译、编辑器和元数据补全协同工作。

互动怎么形成闭环: 点赞、评论、回复、通知、站外推送可以串起来。

站点怎么可观测: 访客行为和管理操作都有记录，不靠感觉运营。

二、设计亮点

1) 双主题不是“换个颜色”，而是两套视觉语言

站点内置两种完整风格:

Light: iOS Glassmorphism（玻璃态、柔和层次、圆润卡片）

Dark: Cyberpunk（高对比、霓虹感、锐利边界）

我希望它在不同场景下都成立: 白天清爽、夜间有氛围。

因此从导航、卡片、背景到细节动效都随主题同步变化，而不是只切换几组颜色变量。

2) 多端适配不是缩放，移动端有独立设计体系

这套站点不是把桌面页面直接压缩到手机，而是为移动端单独设计信息层级、布局节奏和交互路径。

在移动端里，我优先保证“当前任务链路”完整，把并列信息收敛为单列叙事，减少跳转和视线来回。

具体做法包括:

结构独立: 导航、列表和详情层级按手机阅读顺序重排，而不是简单换行。

交互独立: 触控热区、底部导航、抽屉/全屏输入等都按拇指可达范围重设。

视觉独立: 字号、间距、卡片密度与留白按移动端可读性重新标定。

3) 双语国际化是完整内容链路，不只是文案翻译

站点通过 zh/en 双语路由驱动页面渲染，保证不同语言下的信息结构一致、阅读路径稳定。

这套双语设计重点是:

路由级切换: zh/en 两套 URL 明确分离，分享和回访时语言状态可直达。

全链路覆盖: 导航、筛选、读时、按钮、空态和模块文案都随 locale 同步切换。

结构一致性: 同一模块在不同语言下保持相同信息层级，降低跨语言浏览心智负担。

4) 内容写作体验是“所见即所得”，尽量不打断思路

我在编辑器上采用了 BlockNote 的所见即所得方案，目标很直接:

像 Typora、Notion 一样，把写作动作本身做得简约、顺滑、低负担。

它带来的体验提升主要是:

视觉和最终阅读效果更接近，减少“写完再预览”的来回切换。

常见内容结构（标题、段落、列表、引用）上手成本很低。

和 AI 增强、翻译、内容回写联动时，不需要频繁跳出编辑上下文。

5) 留言墙做成了“空间感交互”，不只是评论列表

留言模块在桌面和移动上采用不同交互形态:

桌面: 留言墙布局 + 悬浮输入器 + 线程回复

移动: 全屏/抽屉化输入与浏览

富文本 + Emoji 渲染 + 高亮定位（支持从通知直达）

这部分我想表达的是: 互动区不一定只能是传统评论区，也可以有自己的个性。

6) 全站AI增强，贯穿内容生产流程

AI 已经接入 博客/ 项目 / 资源 / 动态 等核心模块，支持:

内容补全、润色、扩写、翻译

结构化元数据输出（标题、摘要、标签、分类等）

流式返回与阶段进度

撤销与失败回退（保留 last good state）

其中 Resource 翻译接口采用流式阶段事件（progress/complete/done），并支持块级内容 hash 比对后的增量翻译，避免无意义全量覆盖。

7) 登录模块的设计重点是“低心智成本”

我希望登录是“有用但不打扰”的，所以在设计上做了这些取舍:

身份验证支持 OTP（邮箱验证码）与 GitHub/Google 三方快速登录。

评论/留言这类需要归属的动作才强依赖登录。

非评论场景尽量不强制登录，主要通过身份区分来承接数据跨端同步。

简单说就是: 需要身份时再登录，不让登录成为阅读和浏览的前置门槛。

8) 通知做成双通道闭环

站内通知中心: 聚合评论、回复、点赞

站外 PushPlus: 关键互动可推送到微信侧

这意味着我不需要一直盯着后台，也能及时知道站内有新反馈。

9) 观测体系采用混合策略

运营不是单数据源:

Umami: 访客访问与行为趋势

本地 ActivityLog: 管理员审计轨迹

管理员权限保护: 非 admin 不可访问访客日志页面

这个设计同时满足“看增长”和“看治理”两种视角。

10) 动画设计让站点有节奏，也有记忆点

1. Welcome 动画: 通过收拢、居中、加载、分裂、切页的阶段化转场，把进入站点这一步做成可感知的仪式感。

2. Updates 动画: 通过左右拖拽阈值、弹性回弹和层叠过渡，让信息切换更顺手，减少机械翻页感。

三、功能汇总

四、结语

对我来说，本站的意义不在“功能有多少”，而在“这套系统能否长期服务我的表达”。

它让我可以把更多精力放在内容本身，而不是反复折腾基础设施。

如果你也在做个人站，我的经验是: 先把结构搭稳，再让风格生长。