4.3 KiB
4.3 KiB
WarmIsland 是什么？
WarmIsland（暖屿） 是一款为 Halo 打造的博客主题。暖如灯火，静如留白——它以柔和的色调和舒缓的节奏回归内容本身，为记录与阅读留出一方安静从容的角落。
本主题由 AI 开发完成。
它的名字来源于一个画面——深夜里温暖的小岛。我们希望每一个来到你站点的访客，都能感受到那份安静而舒适的氛围。
设计理念
暖屿的设计围绕三个核心词展开：温暖、沉浸、精致。
温暖
默认的暖橘强调色 #d4764e、Hero 区域缓缓呼吸的光球、柔和的毛玻璃导航栏——这些细节共同营造出一种温暖而不灼人的视觉感受。我们相信，博客不仅是内容的容器，更是一种情绪的传递。
沉浸
阅读应该是专注的。文章详情页提供了侧边悬浮目录、阅读进度条、代码语法高亮和图片灯箱，让读者可以沉浸在内容中而不被干扰。滚动时 Hero 区域的模糊渐隐、元素的渐入动画，都在为这种沉浸感服务。
精致
每一个圆角、每一处阴影、每一次过渡动画都经过打磨。从导航栏的三种样式选择到页脚的社交链接配置，从首页的置顶卡片到瞬间的三种布局——精致不是堆砌，而是对每个细节的在意。
核心特性
🎨 视觉体验
- 暖色调设计语言 — 橘色强调色 + 呼吸光球 + 渐变背景
- 三种导航栏样式 — Glass（毛玻璃）/ Minimal（极简）/ Float（浮动胶囊）
- 深色模式 — 跟随系统、浅色、深色三种方案，一键切换平滑过渡
- 动效系统 — 滚动渐入、光感跟随、呼吸动画，均可独立开关
📝 阅读体验
- 文章目录 — 桌面端侧边悬浮 + 移动端底部抽屉，支持展开模式选项
- 阅读进度条 — 实时显示阅读进度
- 代码高亮 — Prism.js 支持，Warm / Cold 双主题
- 图片灯箱 — 点击放大，支持左右切换
- 图片懒加载 — blur-up 渐显效果，优化加载体验
- 点赞功能 — 一键点赞，状态持久化
- 相关文章推荐 — 文章底部推荐相关内容
- 分享功能 — 微博 / X / Facebook / Telegram / 复制链接
📱 响应式
- 从桌面到手机完美适配
- 移动端专属汉堡菜单
- 文章卡片自动切换为上下布局
- 目录自动切换为悬浮按钮 + 抽屉
🔍 SEO 与国际化
- Open Graph 元标签 — 优化社交媒体分享预览
- JSON-LD 结构化数据 — 提升搜索引擎理解与展示
- i18n 国际化 — 简体中文、繁体中文、英语，支持跟随浏览器自动匹配
🔌 插件生态
深度集成 Halo 插件，提供丰富的扩展页面：
| 页面 | 插件 | 特色 |
|---|---|---|
| 瞬间 | PluginMoments | Timeline / Cards / Masonry 三种布局 |
| 图库 | PluginPhotos | Masonry / Grid / Carousel + 分组浏览 |
| 友情链接 | PluginLinks | Cards / Grid / List 三种布局 |
| 朋友圈 | plugin-friends | 友站动态时间线 |
| 豆瓣 | 豆瓣插件 | 观影/读书/音乐记录 |
| 装备 | 装备插件 | 按分组展示装备清单 |
| Steam | Steam 插件 | 游戏资料与徽章 |
⚙️ 灵活配置
13 个配置分组，覆盖站点的方方面面：
- 基础信息、样式、导航栏、Hero 首屏
- 首页、文章、瞬间、图库、友情链接
- 朋友圈、留言板、评论、页脚
所有配置都在 Halo 后台的图形化面板中完成，无需修改代码。
技术栈
- Astro — 静态站点生成器，编译模板
- vite-plugin-halo-theme — Halo 主题 Vite 插件
- Thymeleaf — Halo 使用的服务端模板引擎
- Vue 3 — 部分交互组件（搜索、主题切换、光感跟随）
- SCSS — CSS 预处理器
- Prism.js — 代码语法高亮
- LightGallery — 图片灯箱
适用场景
WarmIsland 适合以下类型的站点：
- 📖 个人博客 — 记录生活、分享思考
- 📸 摄影站 — 图库页面展示作品
- 🎮 游戏博客 — Steam 页面展示游戏资料
- 📚 读书笔记 — 豆瓣页面展示阅读记录
- 💭 碎碎念 — 瞬间页面记录日常灵感
下一步
- 快速开始 — 安装主题并完成初始配置