FIT2CLOUD
氢·简 的图标

氢·简

398
70

Hydro-Minim,氢系列首款极简 Halo 主题,以轻快、留白和流畅动效呈现内容。

氢·简 Hydro-Minim

氢·简 / Hydro-Minim 是“氢”系列首款 Halo 主题,项目标识为 halo-theme-hydro-minim。主题面向独立创作者、技术博客作者和希望把 Halo 站点做得更克制、更有识别度的站长,运行时基于 Halo 原生 Thymeleaf 模板、Vite TypeScript 与 CSS,不依赖 React。

预览

木因博客

交流群

点击链接加入群聊【halo博客-lywq插件】

主题定位

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.htmlcategory.html
  • 标签索引与详情:tags.htmltag.html
  • 归档:archives.html
  • 作者页:author.html
  • 搜索页:search.html
  • 友链:links.html
  • 瞬间列表与详情:moments.htmlmoment.html
  • 图库:photos.html
  • 装备:equipments.html
  • 朋友圈:friends.html
  • 追番:bangumis.html
  • Steam:steam.html
  • Docsme 文档中心、目录和详情:docs.htmldoc-catalog.htmldoc.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

讨论(0)

这是一个开源应用,我们推荐优先在开源仓库中提交 issue,以便开发者更好地接收和跟进问题。

去提交 issue