update README.md
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
# WarmIsland 是什么?
|
||||
|
||||
**WarmIsland(暖屿)** 是一款为 [Halo](https://halo.run) 打造的生活博客主题。
|
||||
|
||||
它的名字来源于一个画面——深夜里温暖的小岛。我们希望每一个来到你站点的访客,都能感受到那份安静而舒适的氛围。
|
||||
|
||||
## 设计理念
|
||||
|
||||
暖屿的设计围绕三个核心词展开:**温暖、沉浸、精致**。
|
||||
|
||||
### 温暖
|
||||
|
||||
默认的暖橘强调色 `#d4764e`、Hero 区域缓缓呼吸的光球、柔和的毛玻璃导航栏——这些细节共同营造出一种温暖而不灼人的视觉感受。我们相信,博客不仅是内容的容器,更是一种情绪的传递。
|
||||
|
||||
### 沉浸
|
||||
|
||||
阅读应该是专注的。文章详情页提供了侧边悬浮目录、阅读进度条、代码语法高亮和图片灯箱,让读者可以沉浸在内容中而不被干扰。滚动时 Hero 区域的模糊渐隐、元素的渐入动画,都在为这种沉浸感服务。
|
||||
|
||||
### 精致
|
||||
|
||||
每一个圆角、每一处阴影、每一次过渡动画都经过打磨。从导航栏的三种样式选择到页脚的社交链接配置,从首页的置顶卡片到瞬间的三种布局——精致不是堆砌,而是对每个细节的在意。
|
||||
|
||||
## 核心特性
|
||||
|
||||
### 🎨 视觉体验
|
||||
|
||||
- **暖色调设计语言** — 橘色强调色 + 呼吸光球 + 渐变背景
|
||||
- **三种导航栏样式** — Glass(毛玻璃)/ Minimal(极简)/ Float(浮动胶囊)
|
||||
- **深色模式** — 跟随系统、浅色、深色三种方案,一键切换平滑过渡
|
||||
- **动效系统** — 滚动渐入、光感跟随、呼吸动画,均可独立开关
|
||||
|
||||
### 📝 阅读体验
|
||||
|
||||
- **文章目录** — 桌面端侧边悬浮 + 移动端底部抽屉
|
||||
- **阅读进度条** — 实时显示阅读进度
|
||||
- **代码高亮** — Prism.js 支持,Warm / Cold 双主题
|
||||
- **图片灯箱** — 点击放大,支持左右切换
|
||||
- **点赞功能** — 一键点赞,状态持久化
|
||||
|
||||
### 📱 响应式
|
||||
|
||||
- 从桌面到手机完美适配
|
||||
- 移动端专属汉堡菜单
|
||||
- 文章卡片自动切换为上下布局
|
||||
- 目录自动切换为悬浮按钮 + 抽屉
|
||||
|
||||
### 🔌 插件生态
|
||||
|
||||
深度集成 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 页面展示游戏资料
|
||||
- 📚 **读书笔记** — 豆瓣页面展示阅读记录
|
||||
- 💭 **碎碎念** — 瞬间页面记录日常灵感
|
||||
|
||||
## 下一步
|
||||
|
||||
- [快速开始](/guide/getting-started) — 安装主题并完成初始配置
|
||||
Reference in New Issue
Block a user