HALO 2 博客主题
Halo-Theme-Ethereal
一款基于 halo-theme-fuwari 二次开发
为 Halo 2 打造的 Fuwari 风格增强型主题
文档:主题文档 | 交流群:1098801176
界面预览

介绍
Ethereal 是一款为 Halo 2 打造的 Fuwari 风格博客主题:界面简洁清爽,配置灵活,开箱即用;壁纸、布局、侧边栏组件与访客交互均可按需调整。
- 多形态壁纸:支持关闭 / 横幅 / 全屏 / 全屏透明四种模式,图片、视频、轮播均可,全屏下另有经典 / 沉浸(Hero)布局,移动端可单独配置图源;
- 灵活布局:支持三栏 / 两栏切换(含右栏模式),目录可挂左栏或右栏,列表封面比例可选;
- 侧边栏组件:十余种小组件可任意排序、按需吸顶,移动端支持独立列表;
- 访客样式切换:访客可在前台「显示设置」中实时调整主题色相与卡片样式,开放范围由后台控制;
- 基础体验:页面过渡动画、深浅色模式、中 / 英 / 繁体多语言全站覆盖,支持自定义字体、站点 Logo 与个人在线状态。
演示站点
| 站点 | 说明 |
|---|---|
| 楠枝小笺 | 主题开发者 |
| Leave_Time(时泠)的幻想书屋 | 主题贡献者 |
| LQBBY | 主题贡献者 |
| PanDaTech’s Blog | 主题贡献者 |
| fufuの小窝 | 主题用户 |
下载趋势
安装
系统要求
- Halo >= 2.25.0
在线安装(推荐)
- Halo 应用商店搜索「Ethereal」即可一键安装
手动安装
- 前往 Releases 下载最新版本的主题包(
.zip) - 进入「Halo 后台 → 主题 → 安装」,上传主题包
详细的配置说明请参阅 主题文档。
功能特性
核心速览
- 四种壁纸模式:关闭 / 横幅 / 全屏 / 全屏透明自由切换,图片 / 视频 / 轮播均可用,全屏另有经典 / 沉浸(Hero)两种布局;
- 多种布局组合:三栏 / 两栏(含右栏模式)× 目录左 / 右 / 悬浮三处挂载 × 列表 / 网格视图,任意搭配;
- 可编排侧边栏:十余种小组件条目化配置,自由排序、按需吸顶,移动端支持独立列表,同类型组件可多处复用;
- 访客实时换肤:前台「显示设置」实时切换主题色相、卡片样式、壁纸与特效,开放范围由后台控制。
壁纸与 Banner
- 四种显示模式:关闭 / 横幅 / 全屏 / 全屏透明;全屏提供经典 / 沉浸(Hero)布局(Hero 下滑渐变为模糊、标题上移淡出),背景模糊度、卡片透明度可调
- 三种媒材:单图(PNG/JPEG/WebP/APNG/GIF)、视频(MP4/WebM)、多图轮播(淡入淡出 / 滑动切换)
- 标题与按钮:居中大标题(自定义标题 / 副标题 / 字号,打字机 / 文字下坠动效),下方可加一排链接按钮
- 底部波浪动效:Banner 底部波浪过渡,移动端可单独关闭
- 移动端与加载:可为移动端单独配置图源;图片按屏幕自适应分档加载,适配内置存储与主流 CDN 图床
布局与排版
- 三栏 / 两栏随切:两栏支持「右栏模式」,侧栏与正文可左右互换;宽屏下正文列宽不随布局跳变
- 目录自由挂载:左侧栏 / 右侧栏 / 悬浮目录任选,无目录页面提供移动端目录弹窗
- 列表视图:卡片列表 / 网格切换;网格封面高度自适应,列表封面比例可选「撑满卡片 / 固定 16:9」,窄屏自动居中裁切
- 导航与页头:分类导航栏(水平 pill、液态滑块,默认关闭);页头统一为「眉题 + 标题 + 统计方片 + 大图标水印」仪表条,筛选池支持胶囊滑动选中
- 响应式与配色:卡片化设计全站响应式,深色 / 浅色 / 跟随系统一键切换
侧边栏组件
小组件条目化配置:自由排序、单独勾选「吸顶」、移动端独立列表,同类型组件可多处复用。
| 组件 | 说明 |
|---|---|
| 公告 | 展示公告内容,支持关闭与跳转链接 |
| 个人简介 | 站点头像、名称、简介展示 |
| 天气 | 基于腾讯位置服务,自动定位显示天气 |
| 音乐播放器 | 支持网易云、QQ、酷狗等平台歌单 / 歌曲 |
| 一言 | 随机显示一句名言或短句,支持自定义 API 地址与失败兜底文案 |
| 站点统计 | 文章数、标签数、运行天数等,统计项可自定义勾选 |
| 文章分类 | 分类列表导航 |
| 文章标签 | 标签云导航 |
| 热门文章 | 热度排行 |
| 自定义 HTML | 自由嵌入任意内容,支持自定义名称 |
| 目录(TOC) | 文章内容导航,可挂载左侧栏或右侧栏 |
| 最近日程 | 配合「日程日历」插件,展示近期日程安排,展示条数可配置 |
视觉与动效
- 磨砂玻璃:导航栏模糊质感,全屏壁纸下首页顶部透明、下滚渐变为玻璃底;全屏透明模式下内容与卡片亦可磨砂半透明
- 卡片质感:细边框浅阴影、卡片跟随主题色、悬浮上移 + 主题色阴影(桌面端 ≥768px)
- 樱花特效:OffscreenCanvas + Web Worker 绘制,换页与滚动不掉帧
- 页面过渡:基于 Swup 的无刷新换页;登录界面为动画角色交互面板
个性化与交互
- 自定义主题色:Hue 调节随心换色
- 访客样式面板:按「外观 / 壁纸 / 特效」组织,实时切换主题色相、列表 / 网格、卡片样式(边框阴影 / 跟随主题色 / 磨砂 / 瀑布流)、壁纸模式与特效参数,开放范围由后台控制
- 多语言:前台实时切换简体中文 / 繁體中文 / English(同步后台界面语言),i18n 全站覆盖
- 更多:菜单 Iconify 图标与站点 Logo、外链跳转模态框、个人在线状态(管理员可在前台直接切换)
媒体与性能
- 图片加速:CDN / 对象存储实时压缩缩放,降低封面与正文图片加载体积
- 自定义字体:上传 TTF / OTF / WOFF / WOFF2 或引用 Google Fonts CSS
- 分享海报与赞赏:文章页生成分享海报与赞赏入口
页面支持
- 首页、文章归档、标签 / 分类列表与详情
- 时间轴、技能、关于页面、打赏页面(主题页面模板,在「扩展页面」中配置)
- 图库、瞬间、友情链接、朋友圈、装备、项目作品集、心愿便签、日程日历、追番(需安装对应插件,见下方 插件支持)
- 自定义页面、404 错误页
插件支持
Ethereal 与以下 Halo 插件深度集成,建议搭配使用以获得完整体验:
| 插件 | 市场链接 | 功能 |
|---|---|---|
| 搜索插件 | 应用市场 | 文章全文搜索 |
| 评论插件 | 应用市场 | 文章评论系统 |
| 瞬间插件 | 应用市场 | 瞬间 / 说说功能 |
| 图库插件 | 应用市场 | 图库展示 |
| 链接管理插件 | 应用市场 | 友情链接管理 & 朋友圈 & 自助提交友链 |
| 装备管理 | 应用市场 | 装备展示 |
| 项目集 | 应用市场 | 项目作品集展示 |
| 心愿便签 | 应用市场 | 心愿墙便签发布与展示 |
| 日程日历 | 应用市场 | 日程 / 日历展示,配合最近日程小组件 |
| 追番插件 | 应用市场 | 追番 / 追剧展示页面 |
| 文章订阅 | 应用市场 | 关于页「订阅更新」卡片邮箱订阅 |
| API 扩展包 | 应用市场 | 文章字数统计 API & 降低后端压力 |
同时,也建议安装以下插件,以获得更好的体验:
| 插件 | 市场链接 | 功能 |
|---|---|---|
| RSS | 应用市场 | 为站点生成 RSS 订阅链接 |
| Sitemap | 应用市场 | 为站点生成站点地图 |
| lightgallery.js 灯箱 | 应用市场 | 在内容页放大显示图片 |
| Shiki 代码高亮 | 应用市场 | 在内容页高亮显示代码块 |
外部服务依赖
本主题以下功能依赖外部第三方服务,请在使用前了解:
| 功能 | 外部服务 | 说明 |
|---|---|---|
| 天气 | 腾讯位置服务 | 需用户自行申请 WebService API Key(免费注册),用于 IP 定位和天气数据查询 |
| 音乐播放器 | Meting | 默认使用 Meting 公共 API 获取网易云、QQ、酷狗等平台的歌单歌曲数据,支持在设置中替换为自建 API |
| 一言 | 一言开发者中心 | 随机获取一句名言短句,无需 API Key;支持自定义 API 地址、5 秒超时和本地兜底文案 |
| 入场欢迎卡片 | 腾讯位置服务 | 复用天气小组件的 WebService API Key 进行 IP 定位,无需单独配置;默认关闭,需在「布局设置 → 欢迎弹窗」开启 |
以上服务均为可选功能,不影响主题核心的博客浏览体验。天气、音乐、一言、入场欢迎卡片需在侧边栏 / 布局设置中手动添加或开启后才会发起网络请求。
项目结构
展开查看完整目录结构
halo-theme-ethereal/
├── .github/ # GitHub 配置
│ ├── ISSUE_TEMPLATE/ # Issue 模板
│ ├── workflows/
│ │ ├── ci.yaml # 构建、版本检测与发布 Release
│ │ ├── cd.yaml # 发布时同步到 Halo 应用市场
│ │ └── codeql.yml # 代码安全扫描
│ └── dependabot.yml # 依赖自动更新
├── .husky/ # git 钩子
├── .nvmrc # Node 版本
├── i18n/ # 国际化翻译文件
│ ├── default.properties # 默认语言(英文)
│ ├── zh_CN.properties # 简体中文
│ └── zh_TW.properties # 繁体中文
├── public/ # 静态资源
│ ├── assets/ # JS 脚本、图片等
│ ├── fragments/ # Halo 页面片段
│ └── gateway_fragments/ # 网关认证片段
├── screenshot/ # 主题截图
├── scripts/ # 构建脚本
├── src/
│ ├── components/ # 组件
│ │ ├── *.astro # Astro 静态组件
│ │ ├── *.svelte # Svelte 交互组件
│ │ ├── control/ # 控件组件
│ │ ├── misc/ # 杂项组件
│ │ ├── photos/ # 照片相关组件
│ │ └── widget/ # 侧边栏小组件
│ ├── constants/ # 常量定义
│ ├── env.d.ts # 环境类型声明
│ ├── global.d.ts # 全局类型声明
│ ├── layouts/ # 页面布局
│ │ ├── Layout.astro # 根布局
│ │ └── MainGridLayout.astro # 主网格布局
│ ├── pages/ # 页面模板
│ │ ├── index.astro # 首页
│ │ ├── post.astro # 文章页
│ │ ├── archives.astro # 归档页
│ │ ├── tags.astro # 标签列表
│ │ ├── tag.astro # 标签详情
│ │ ├── categories.astro # 分类列表
│ │ ├── category.astro # 分类详情
│ │ ├── photos.astro # 图库列表
│ │ ├── photo.astro # 图库详情
│ │ ├── moment.astro # 瞬间详情
│ │ ├── moments.astro # 瞬间列表
│ │ ├── links.astro # 友情链接
│ │ ├── friends.astro # 朋友圈
│ │ ├── equipments.astro # 装备展示
│ │ ├── portfolio.astro # 项目集列表
│ │ ├── portfolio-detail.astro # 项目集详情
│ │ ├── wishes.astro # 心愿便签
│ │ ├── schedule-calendar.astro # 日程日历
│ │ ├── schedule-calendar-card.astro # 日程日历卡片组件
│ │ ├── timeline.astro # 时间轴页面
│ │ ├── skills.astro # 技能页面
│ │ ├── about.astro # 关于页面
│ │ ├── reward.astro # 打赏页面
│ │ ├── bangumis.astro # 追番页面
│ │ ├── layout.astro # 插件前台页面契约布局模板
│ │ ├── error/ # 错误页面
│ │ │ └── 404.astro # 404 页面
│ │ └── page.astro # 自定义页面
│ ├── scripts/ # 脚本源码
│ │ ├── app.ts # 初始化逻辑
│ │ ├── assets/ # 经典脚本源码
│ │ └── vendor/ # 第三方脚本
│ ├── styles/ # 全局样式
│ ├── types/ # TypeScript 类型定义
│ │ ├── config.ts # 主题配置类型
│ │ └── searchResult.ts # 搜索结果类型
│ └── utils/ # 工具函数
│ └── photos/ # 相册相关工具
├── AGENTS.md # AI 协作开发约定
├── CHANGELOG.md # 更新日志
├── CONTRIBUTING.md # 贡献指南
├── LICENSE # 许可证
├── annotation-setting.yaml # Halo 注解设置
├── release.md # 发布说明
├── astro.config.mjs # Astro 构建配置
├── nodemon.json # 开发热更新配置
├── settings.yaml # Halo 主题设置定义
├── svelte.config.js # Svelte 配置
├── theme.yaml # Halo 主题元信息
├── tsconfig.json # TypeScript 配置
├── pnpm-lock.yaml # pnpm 依赖锁定文件
├── pnpm-workspace.yaml # pnpm 工作区配置
└── package.json # 项目依赖与脚本
开发
面向贡献者:欢迎参与开发!贡献流程、代码约定与提 PR 规范请阅读
CONTRIBUTING.md。面向 AI 协作者:仓库根目录提供
AGENTS.md,内含构建命令、目录约定、Halo/Thymeleaf 约定、常见坑与提交规范。使用 AI 编码工具(Codex / opencode / Cursor 等)贡献前请先阅读。需要 Node.js >= 22.12.0(推荐 24.x,见仓库根目录
.nvmrc)和 pnpm
# 克隆项目
git clone https://github.com/AloneNanNan/halo-theme-ethereal.git
cd halo-theme-ethereal
# 安装依赖
pnpm install
# 开发模式(监听文件变更自动重建)
pnpm dev
# 构建并打包为主题安装包(输出 zip 到 dist/)
pnpm build
# 仅构建主题模板(输出到 templates/)
pnpm build:only
# 代码格式化
pnpm format
技术栈
| 技术 | 用途 |
|---|---|
| 类型安全 | |
| 静态页面生成与路由 | |
| 交互组件(Search、LightDarkSwitch) | |
| 实用优先的样式框架 | |
| Web 构建工具 | |
| 代码格式化工具 | |
| 页面过渡动画 | |
| 图标系统 |
致谢
Ethereal 的诞生离不开开源社区。非常感谢 jiewenhuang 开发的 halo-theme-fuwari,本项目在其基础上二次开发。
由衷感谢以下开源项目:
- Halo:优秀的 Java 博客系统,本项目的运行平台
- Fuwari:原始 Astro 主题,本项目的设计基调
- halo-theme-fuwari:第一款将 Fuwari 风格移植至 Halo 的主题,本项目的直接上游
- Firefly:清新美观的 Astro 博客主题,本项目大量参考其设计
- Aemeath:基于 Firefly 二次创作的主题,本项目部分参考其设计
- Halo Sig:Halo 社区插件与工具链
许可证
本项目基于 halo-theme-fuwari(MIT 许可)二次开发,遵守原始许可证条款,并采用 MIT License 开源发布。
版权声明:
- Copyright © 2024 saicaca - fuwari
- Copyright © 2025 Jevon - halo-theme-fuwari
- Copyright © 2026 楠南NanNan - Halo-Theme-Ethereal
根据 MIT 开源协议,你可以自由使用、修改、分发本项目的代码,但需保留上述版权声明。


