氢·简 Hydro-Minim
氢·简 / Hydro-Minim 是“氢”系列首款 Halo 主题,项目标识为 halo-theme-hydro-minim。主题面向独立创作者、技术博客作者和希望把 Halo 站点做得更克制、更有识别度的站长,运行时基于 Halo 原生 Thymeleaf 模板、Vite TypeScript 与 CSS,不依赖 React。
预览
交流群
主题定位
Hydro-Minim 的核心气质是轻、克制、结构化。它不是三栏信息流,也不是高对比科技仪表盘,而是一套以灰白纸面、Space Mono 字体、黑色细边线、轻颗粒、低饱和强调色和柔和动效构成的极简博客主题。
主题适合这些场景:
- 个人博客、技术博客、设计随笔、摄影记录、创作日志。
- 希望首页有明确品牌感,但不想做成营销页的内容站。
- 需要文章、分类、标签、归档、搜索、友链、瞬间、图库、文档等页面风格统一的 Halo 站点。
- 想保留可配置性,但不想后台设置变成“开关大卖场”的站长。
核心特点
克制的 Hydro 视觉系统
主题默认使用灰白背景、细线框、轻颗粒和低饱和点缀色。浅色模式保持纸面质感,深色模式保持低饱和、低噪声,不会一键变成纯黑霓虹风。
站长可在后台配置浅色背景、深色背景、浅色强调色和深色强调色。强调色会统一影响正文链接、文字选中、输入焦点、搜索命中、轻量高亮和插件搜索样式,避免站点不同区域各唱各的调。
首页内容结构
首页由 Hero、最新文章、分类模块和关于模块组成。
- Hero 支持图片或视频媒体,视频加载前会先显示封面图。
- Hero 右侧可自动读取首页最新文章,也可手动指定文章和顺序。
- 最新文章模块支持设置标题与展示数量。
- 分类模块用折叠/展示方式呈现分类入口。
- 关于模块支持自定义标题、副标题、三段正文、读者展示值和社交链接。
这套结构保留了第一屏品牌感,又没有把博客首页做成空泛宣传页,挺对味。
导航与移动端菜单
Header 保留顶部菜单到胶囊菜单的滚动切换体验。桌面端滚动后导航收缩为偏右胶囊;移动端滚动后为右上角白色长胶囊,内部包含品牌、搜索、深浅色和菜单入口。
移动端菜单会根据当前路由自动展开命中的菜单分支,不会粗暴地展开第一组。深浅色切换按钮会显示“下一步要切换到的模式”,用户不用猜。
如果 Halo 没有配置主菜单,主题会读取“默认导航”作为 Header 和页脚兜底导航。
搜索体验
主题适配官方 PluginSearchWidget 插件。搜索入口支持两种方式:
- 弹窗搜索:点击 Header 搜索按钮打开搜索插件弹窗。
- 页面搜索:跳转到主题内置
/search搜索页。
搜索页支持标题、描述、占位文本、结果数量和推荐文章数量配置。主题还包含搜索插件皮肤适配,让搜索弹窗在浅色、深色和强调色下都保持 Hydro 风格。
文章阅读系统
文章详情页是 Hydro-Minim 的重点页面之一。
- 支持文章封面 Hero。
- 支持作者信息、作者主页入口和赞赏二维码弹窗。
- 支持上一篇/下一篇导航。
- 支持评论区。
- 支持文章目录、阅读进度、阅读操作栏。
- 支持点赞、复制链接、分享海报。
- 支持相关文章推荐。
- 移动端提供固定底部阅读条,保留目录、评论、点赞和分享等高频动作。
长文阅读时,桌面端用侧向阅读操作栏,手机端用底部阅读条和半屏目录抽屉。这个处理比把侧栏硬塞到手机底部强太多,别整那种“移动端滚完正文又掉出一个侧栏”的离谱活。
分类、标签与归档
主题覆盖分类索引、分类详情、标签索引、标签详情和归档页。
- 分类索引用目录式结构呈现分类和子分类。
- 标签索引采用抽象天空和云朵标签视觉,标签不是一堆硬邦邦 chip。
- 归档页按年份和月份组织文章,支持显示统计和文章封面缩略图。
这些页面共享 Hydro Content Surface 视觉基座,但每个页面有自己的信息结构,不会全部压成同一种卡片网格。
插件页面适配
主题提供多类 Halo 插件页面适配,并在插件缺失时显示安装提示,不会让模板直接炸。
已声明的自定义页面模板包括:
- Hydro 关于页:展示站点统计、正文和社交链接。
- Hydro 追番页:适配追番插件。
- Hydro 文档中心:适配 Docsme 文档中心入口。
- Hydro 装备页:适配装备插件。
- Hydro 朋友圈页:适配朋友圈插件。
- Hydro 瞬间页:适配瞬间插件。
- Hydro 图库页:适配图库插件。
- Hydro Steam 页:适配 Steam 插件。
插件相关页面覆盖友链、瞬间、图库、装备、朋友圈、追番、Steam 和 Docsme 文档。站点没有安装对应插件时,主题会给出可读的空状态和安装入口。
友链与在线申请
友链页支持展示本站信息,包含站名、链接、Logo 和描述,方便其他站点回链。
如果安装并启用 LinksSubmit 相关能力,主题可显示在线提交入口和友链修改入口。验证方式支持邮箱验证码和图形验证码。主题前台还提供复制按钮和随机访问友链能力。
瞬间、图库和分享海报
瞬间页支持时间线、标签筛选、图片/视频/音频内容、点赞、评论和详情入口。瞬间详情页支持内嵌分享海报弹窗,不依赖额外的 /posterShare/... 路由。
图库页支持分组、分页、瀑布流展示和图片灯箱。主题拥有自己的渐进式图片加载外壳,图片加载失败时保留卡片位置并显示安静的失败状态。
文章和瞬间都可配置分享海报入口,适合内容传播。
文档与扩展内容
Docsme 文档页面支持文档目录、评论区和插件安装/升级提示。文档详情页要求 Docsme 插件版本满足主题模板需求,缺失或版本不兼容时会显示提示。
Steam 页面支持最近游玩数量、游戏库分页数量、游戏外链和前端缓存时间配置,适合把个人兴趣内容接入博客。
浮动快捷操作
主题提供右下角快捷操作按钮,可配置全局默认快捷项,也可按模板 ID 或永久链接配置页面专属快捷项。
快捷项支持三类动作:
- 跳转链接。
- 主题内置动作:打开搜索、切换深浅色、返回顶部、复制当前链接、会员签到、文章收藏、打印页面、打开移动菜单、滚动到评论区。
- 自定义函数:调用
window.HydroMinimActions或其他window全局函数。
会员签到与文章收藏依赖 PluginMember 注入的前台 API。主题不会擅自引入会员插件脚本,边界很清楚。
高级注入与扩展 API
主题支持 Head HTML、Footer HTML、自定义 CSS 和自定义 JavaScript 注入,适合接入统计、验证标签、第三方样式或自定义交互。
主题内置 window.HydroNotice 胶囊提示 API,供主题脚本、插件页面和第三方扩展显示统一风格的顶部提示。
页面覆盖
主题源码覆盖这些核心页面:
- 首页:
index.html - 文章详情:
post.html - 普通独立页:
page.html - 关于页:
page_about.html - 分类索引与详情:
categories.html、category.html - 标签索引与详情:
tags.html、tag.html - 归档:
archives.html - 作者页:
author.html - 搜索页:
search.html - 友链:
links.html - 瞬间列表与详情:
moments.html、moment.html - 图库:
photos.html - 装备:
equipments.html - 朋友圈:
friends.html - 追番:
bangumis.html - Steam:
steam.html - Docsme 文档中心、目录和详情:
docs.html、doc-catalog.html、doc.html - 登录、注册、退出、密码重置、二步验证等网关页面。
- 错误页。
技术特性
- Halo 主题标识:
halo-theme-hydro-minim - 当前版本:
1.0.0-alpha3 - 兼容目标:Halo
>=2.20.0 - 构建方式:Vite +
@halo-dev/vite-plugin-halo-theme - 运行时:Thymeleaf + TypeScript + CSS
- 动效能力:GSAP、ScrollTrigger、Lenis
- 构建包输出:
dist/halo-theme-hydro-minim-1.0.0.zip
