「雨夜蓝」个人主页模板 · 使用说明

一个竖屏翻页式（电脑端自动横屏双栏）的静谧蓝色个人主页模板。 自带：雨幕、点击涟漪、3D 视差莲花卡、塔罗翻牌、抽牌签文互动（五张扇形小牌 + 谶语弹卡 + 抽牌历史）、 程序化生成的雨声/风铃环境音、蝴蝶彩蛋、双击爱心、星尘轨迹、横竖屏切换按钮。

---

一、目录结构

模板/
├── index.html    ← 页面结构与全部文案（占位符都在这里）
├── style.css     ← 全部样式（配色变量在文件开头）
├── script.js     ← 全部交互逻辑（一般不用动）
└── README.md     ← 本说明

使用时把这三个文件 + 素材/ 文件夹一起复制到新项目目录（或 GitHub Pages 仓库根目录）。

---

二、素材替换对照表

模板中的图片路径保持不变，把你的图片改成对应文件名放进 素材/ 文件夹即可（覆盖同名文件）：

文件名	用途	出现位置	建议规格
头像.jpg	主页头像	第一页	正方形 ≥400×400
黑色背景模糊蓝色一朵莲花.jpg	莲花大图	第二页	横图 ≥800×500
黑色底塔罗牌.png	塔罗牌正面（建议透明底）	第三页	竖图 2:3，如 600×900
蓝色蝴蝶和树叶的背景.jpg	塔罗牌背面	第三页（翻转后）	竖图 2:3

音效无需任何素材：雨声与风铃由 Web Audio 实时生成；抽牌小牌为纯 CSS 绘制，无需图片。

---

三、文字替换（占位符清单）

index.html 中所有个人文案都换成了 {{...}} 占位符，用编辑器全局搜索替换即可：

第一页 · 主页

• {{主标题}}：头像下方大标题
• {{副标题·英文}}：标题下的小字
• {{顶栏左侧标签}} / {{顶栏右侧标语}}：顶栏左右小字

第二页 · 风格

• {{第二页标题}}、三个 {{主调/尾调/心声标题}}
• {{主调词1~4}}、{{尾调词1~3}}：胶囊关键词
• {{心声正文}}、{{风格页补充引言}}
• {{莲花图浮层标语}}：莲花图底部那行英文

第三页 · 归程

• {{第三页标题}}、{{第三页导语}}
• {{塔罗背面标题}}、{{塔罗背面副题}}、{{塔罗背面诗语}}
• {{仪式步骤1~3}}、{{第三页小语}}、{{第三页页脚}}

第四页 · 须知

• {{第四页标题}}、{{第四页副题}}、{{第四页导语}}
• {{守则1~4小标题}}、{{守则1~4正文}}
• {{安全词卡片标题}}、{{安全词}}、{{第四页信任寄语}}、{{第四页英文落款}}

底部导航：{{导航1}} ~ {{导航4}}

换成普通文字时直接删掉花括号写内容即可，注意保留 HTML 标签结构（如 <br>、<span class="rule-keyword">高亮</span>）。

---

四、配色修改

打开 style.css，文件开头的 :root { ... } 里是全站颜色变量：

--blue-deep / --blue-mid / --blue-accent   /* 背景三层蓝 */
--blue-soft / --blue-glow                  /* 文字蓝 / 发光蓝 */

改这 5 个变量即可整站换色（例如换成紫夜/绿夜）。莲花呼吸光、涟漪等特效颜色 在 CSS 里搜 110, 195, 255（发光蓝的 RGB）可一并调整。

---

五、部署到 GitHub Pages

1. 新建仓库（如 my-homepage），把 index.html、style.css、script.js、素材/ 上传到根目录；
2. 仓库 Settings → Pages → Source 选 main 分支 / (root)；
3. 稍等片刻，访问 https://你的用户名.github.io/my-homepage/ 即可。

文件名含中文没问题，GitHub Pages 支持 UTF-8 路径；但注意仓库文件不要有 BOM 乱码。

---

六、可调参数速查（script.js）

想调什么	搜索关键字
雨的密度/速度	RAIN_COUNT 或 createRain
环境音音量	rainGain / chime
蝴蝶出现频率	spawnButterfly
双击爱心文字池	quotes 数组（若在 script.js 中）

模板基于 2026-10 版本「何时归」主页制作，祝你的新页面也被人温柔对待。