氢·简 Hydro-Minim：从设计取舍到发布流程的 Halo 主题实践

氢·简是为荒溯小站深度定制的 Halo 2 主题，以低饱和清透描边、可关闭的 Canvas 氢粒子和内容侧栏形成克制视觉；采用 Thymeleaf 加 Vite TypeScript，适配 12 类页面与插件，并以 CI/CD 连接 Release 和 Halo 应用市场。

个人博客既要有辨识度，又不能让动画和装饰压过文章；既要覆盖完整内容生态，也要保持页面一致。氢·简（Hydro-Minim）是“氢”系列首款 Halo 主题，为荒溯小站深度定制，重在清透材质、内容层级与可维护性平衡。

问题与定位：把视觉记忆点让位给阅读

设计首先确立“清透描边、可交互氢粒子、内容侧栏”三个关键词。浅色、深色和跟随系统三种配色开箱可用，访客可以切换；全局强调色统一驱动文字选中、正文链接、输入焦点、光标、搜索命中和轻量高亮。

强调色默认保持低饱和，而不是使用高对比霓虹色，原因是博客的主体是内容而不是主题本身。首页贴纸和侧栏提供性格，但不改变阅读区域的主次关系。

取舍是：如果只追求静态极简，主题容易缺少记忆点；如果堆叠动效，又会增加阅读干扰和设备负担。因此氢粒子被设计为可交互但可关闭的背景层，动效是增强项而不是阅读前提。访客不喜欢运动时可以一键关闭，主题仍保留完整的信息结构和导航。

核心方案：原生模板承载内容，TypeScript 承载交互

Thymeleaf 加 Vite，而不是引入 React

主题运行时采用 Halo 原生 Thymeleaf 模板与 Vite TypeScript 交互，不引入 React。

Thymeleaf 契合 Halo 的模板机制，由服务端输出内容，有利于 SEO 友好的 HTML 和较小运行时边界；Vite 负责 TypeScript 编译与热更新。取舍是放弃 React 组件生态，换来更贴合博客内容驱动场景的简单边界。

Canvas 2D 氢粒子

首页氢粒子使用 Canvas 2D 与 requestAnimationFrame，响应鼠标或触控。画布尺寸、设备像素比、输入事件和动画循环分开处理，并按屏幕尺寸调整粒子数量。关闭入口让主内容不依赖 Canvas；资料没有跨设备 FPS 或功耗测量，正文不把动态数量写成性能指标。

页面模板与插件生态

主题内置 12 个可在独立页面选择的模板：关于页 about、留言页 guestbook、轻言页 hitokoto、友链页 links、追番页 bangumis、文档中心 docs、装备页 equipments、朋友圈页 friends、瞬间页 moments、图库页 photos、Steam 页 steam 与项目集页 portfolio。

这些页面并非只做静态占位，而是按对应插件的内容形态衔接。搜索依赖官方 PluginSearchWidget，设置中可选择弹窗或页面入口；未安装搜索插件时不展示无效入口，其他页面在依赖插件缺失时给出提示而不是直接报错。

关键工程实现：主题系统与发布链路同时设计

主题系统的关键是集中管理状态：配色模式影响浅色、深色和系统跟随；强调色作为交互反馈的共同变量，避免链接、焦点、选中和搜索命中各自使用一套颜色。

模板层负责页面结构，TypeScript 负责切换、搜索入口、粒子开关和输入响应；插件适配则在页面能力检测后决定展示内容。这样的分层可以让“未安装插件”成为可预期状态，而不是把依赖错误暴露给读者。

发布流程采用 CI/CD：CI 在推送、Pull Request 和手动触发时执行 check + test + build，非 PR 触发临时上传构建 zip 便于回溯。

CD 在 Release 后复用 Halo 官方 reusable workflow，将产物分发到 GitHub Release 与 Halo 应用市场。每次发布先经同一套检查与构建，来源更易追踪，也减少手工打包。

边界与验证

主题事实包括 Halo、Thymeleaf、TypeScript、Vite、12 个模板、插件适配和 CI/CD 设计；不据此宣称访问量、性能分数、真实用户规模或市场安装量。
应验证三种配色切换、系统主题变化、强调色在链接/焦点/选中/搜索命中中的一致性，以及粒子鼠标和触控交互。
应在关闭粒子后检查页面仍能正常阅读，并覆盖不同屏幕尺寸、设备像素比和缺少插件的页面状态。
应逐页检查 12 个 slug 的模板选择、搜索弹窗/页面入口、插件缺失提示和内容侧栏布局。
发布验证应覆盖 CI 的 check、test、build，Release 构建 zip，以及 GitHub Release 与 Halo 应用市场的分发配置；自动化流程存在不等于每次都已完成真实发布。