FIT2CLOUD
Ethereal 的图标

Ethereal

6,116
1,775

一款基于 Fuwari 二次开发,为 Halo 打造的 Fuwari 风格增强型主题

HALO 2 博客主题

Halo-Theme-Ethereal

一款基于 halo-theme-fuwari 二次开发
Halo 2 打造的 Fuwari 风格增强型主题

Halo Version GitHub Stars Github Downloads Store Downloads

Release MIT License CI issues Commits

文档:主题文档 | 交流群:1098801176


界面预览

Ethereal 主题预览

完整各页面预览可前往下方 演示站点 或前往 主题文档-页面预览 查看详细预览。


介绍

Ethereal 是一款为 Halo 2 打造的 Fuwari 风格博客主题。它基于 halo-theme-fuwari(原版 Fuwari 的 Halo 移植版)深度二次开发,并融合了 Firefly 的清新美学与多种现代 UI 趋势,感谢原作与 Firefly 的开源贡献。

在保留原版清爽调性的基础上,Ethereal 新增了大量功能与视觉改进:三栏/两栏自由布局、磨砂玻璃质感、Banner 多形态展示、丰富的侧边栏小组件、图片 CDN 实时压缩、访客前台实时换肤等,力求为 Halo 用户提供一个开箱即用的 Fuwari 风格功能增强型主题。主题使用 AI 辅助开发。


演示站点

站点 说明
楠枝小笺 主题开发者
Leave_Time(时泠)的幻想书屋 主题贡献者
LQBBY 主题贡献者
BoxCat 主题用户
顶呱呱的快乐 主题用户

下载趋势

Store Downloads Trend


安装

系统要求

  • Halo >= 2.25.0

在线安装(推荐)

  • Halo 应用商店搜索 “Ethereal” 即可一键安装

手动安装

  1. 前往 Releases 下载最新版本的主题包(.zip
  2. 进入「Halo 后台 → 主题 → 安装」,上传主题包

详细的配置说明请参阅 主题文档


功能特性

布局与排版

  • 三栏 / 两栏布局随心切换 — 左侧栏 + 主内容区 + 右侧栏,充分利用宽屏空间,信息层级清晰
  • 分类导航栏 — 内容区上方水平滚动 pill 导航(首页 / 归档 / 分类),液态滑块跟随高亮,默认关闭
  • 移动端目录弹窗 — 页面无可见目录时右下角显示目录悬浮按钮,点击呼出目录弹窗
  • 卡片化设计 — 响应式布局,适配各种屏幕尺寸
  • 深色 / 浅色 / 跟随系统配色
  • 网格封面高度自适应

视觉与动效

  • 导航栏磨砂玻璃模糊效果 — 通透有质感
  • 全屏透明壁纸背景 — 内容与组件卡片亦可呈现磨砂透明
  • Banner 波浪动效
  • 卡片悬浮效果
  • Banner 居中大标题 — 支持自定义标题/副标题/字号,打字机/文字下坠两种动效,响应式字号缩放
  • 登录认证界面 — 动画角色交互面板
  • 支持 关闭 / 横幅 / 全屏 / 全屏透明 四种显示模式
  • 支持单图(PNG/JPEG/WebP/APNG/GIF)、视频(MP4/WebM)或多图轮播(淡入淡出/滑动切换)
  • 可为移动端(<768px)单独配置图片来源

媒体与性能

  • 图片速度优化 — 支持主流 CDN/对象存储的实时图片压缩缩放,大幅降低封面图与正文图片加载体积
  • 自定义字体 — 支持上传 TTF/OTF/WOFF/WOFF2 字体文件或引用 Google Fonts CSS,全局替换站点字体
  • 分享海报与赞赏 — 文章详细页支持生成分享海报与赞赏入口

个性化与交互

  • 自定义主题色 — 通过 Hue 调节随心换色
  • 访客前台样式切换 — 导航栏「显示设置」面板支持实时切换主题色相、文章列表/网格布局、卡片样式(悬浮 / 磨砂 / 瀑布流)、壁纸模式与透明参数
  • 前台语言切换面板 — 访客可实时切换简体中文 / 繁體中文 / English(同步后台界面语言),后台可配置默认语言
  • 菜单栏自定义图标与 Logo — 菜单项可配置 Iconify 图标,站点 Logo 支持自定义上传
  • 外链跳转模态框 — 自定义延迟与域名白名单
  • i18n 国际化 — 中 / 英 / 繁体全站覆盖
  • 页面过渡动画 — 基于 Swup
  • 个人在线状态 — 个人简介小组件展示在线状态与自定义文案,管理员登录后可在前台直接切换

侧边栏组件

组件 说明
公告 侧边栏首位展示公告内容,支持关闭与跳转链接,可配置显示位置
个人简介 站点头像、名称、简介展示,可配置展示位置与开关
天气 基于腾讯位置服务,自动定位显示天气
音乐播放器 支持网易云、QQ、酷狗等平台歌单/歌曲
一言 随机显示一句名言或短句,支持自定义 API 地址与失败兜底文案
站点统计 文章数、标签数、运行天数等
文章分类 分类列表导航
文章标签 标签云导航
热门文章 热度排行
自定义 HTML 自由嵌入任意内容
目录(TOC) 文章内容导航,仅在三栏布局中显示
最近日程 配合「日程日历」插件,展示近期日程安排

页面支持

  • 首页、文章归档、标签/分类列表与详情
  • 时间轴、技能页面(主题页面模板,在「扩展页面」中配置)
  • 图库、瞬间、友情链接、朋友圈、装备、项目作品集、心愿便签、日程日历、追番(需安装对应插件,见下方插件支持
  • 自定义页面、404 错误页

插件支持

Ethereal 与以下 Halo 插件深度集成,建议搭配使用以获得完整体验:

插件 市场链接 功能
搜索插件 应用市场 文章全文搜索
评论插件 应用市场 文章评论系统
瞬间插件 应用市场 瞬间/说说功能
图库插件 应用市场 图库展示
链接管理插件 应用市场 友情链接管理 & 朋友圈 & 自助提交友链
装备管理 应用市场 装备展示
项目集 应用市场 项目作品集展示
心愿便签 应用市场 心愿墙便签发布与展示
日程日历 应用市场 日程/日历展示,配合最近日程小组件
Bilibili Bangumi 应用市场 追番/追剧展示页面
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          # 技能页面
│   │   ├── 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                 # 项目依赖与脚本

开发

For Contributors

面向贡献者:欢迎参与开发!贡献流程、代码约定与提 PR 规范请阅读 CONTRIBUTING.md

面向 AI 协作者:仓库根目录提供 AGENTS.md,内含构建命令、目录约定、Halo/Thymeleaf 约定、常见坑与提交规范。使用 AI 编码工具(Codex / opencode / Cursor 等)贡献前请先阅读。

需要 Node.js >= 22.12.0(推荐 24.x,见仓库根目录 .nvmrc)和 pnpm

Node.js Recommendation Package mgr · pnpm

# 克隆项目
git clone https://github.com/AloneNanNan/halo-theme-ethereal.git
cd halo-theme-ethereal

# 安装依赖
pnpm install

# 开发模式(监听文件变更自动重建)
pnpm dev

# 构建主题
pnpm build

# 构建并打包为主题安装包
pnpm build:pkg

# 代码格式化
pnpm format

技术栈

技术 用途
TypeScript 类型安全
Astro 静态页面生成与路由
Svelte 5 交互组件(Search、LightDarkSwitch)
Tailwind CSS 4 实用优先的样式框架
esbuild Web 构建工具
Prettier 代码格式化工具
Swup 页面过渡动画
Iconify 图标系统

致谢

  • Halo — 优秀的 Java 博客系统
  • Fuwari — 原始 Astro 主题,MIT 许可
  • halo-theme-fuwari — 原版 Halo 移植主题,MIT 许可
  • Firefly — 清新美观的 Astro 静态博客主题模板
  • Halo Sig — Halo 社区插件与工具链

许可证

MIT License © 2026 楠南NanNan

本主题基于 halo-theme-fuwari(MIT 许可)二次开发,遵守原始许可证条款。


Contributors


讨论(1)

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

去提交 issue