浏览、搜索、复制「无限暖暖」游戏服装搭配码的静态站点。基于 GitHub + Cloudflare Pages 部署，无需后端。
├── index.html # 主页面
├── admin.html # 管理工具（可视化添加搭配）
├── css/style.css # 样式表
├── js/app.js # 前端逻辑（搜索/筛选/分页/复制）
├── data/outfits.json # ★ 搭配码数据（唯一需要维护的文件）
├── images/ # ★ 搭配截图（放入此目录）
└── README.md
- GitHub 账号
- Cloudflare 账号（免费即可）
# 在项目目录下执行
git remote add origin https://github.com/<你的用户名>/<仓库名>.git
git branch -M main
git push -u origin main- 登录 Cloudflare Dashboard
- 左侧菜单 → Pages
- 点击 创建项目 → 连接到 Git
- 授权 GitHub，选择刚才推送的仓库
- 在 设置构建和部署 页面：
| 配置项 | 值 |
|---|---|
| 框架预设 | 无（或选 "None"） |
| 构建命令 | 留空 |
| 构建输出目录 | / |
| 根目录（可选） | 留空 |
- 点击 保存并部署
部署完成后 Cloudflare 会分配一个 *.pages.dev 域名，也可绑定自定义域名。
之后每次 git push，Cloudflare Pages 会自动重新部署，约 1-2 分钟生效。
推荐使用管理工具页面，也可手动编辑 JSON。
打开 admin.html（本地或线上均可），表单辅助生成条目：
- 图片：输入图片 URL（如游戏官网截图），或上传本地文件
- 填写名称、搭配码、颜色、风格、套装系列
- 颜色/风格/套装支持输入或从已有数据下拉选择
- 点击「生成条目 & 预览」→ 自动输出 JSON
- 复制 JSON 到
data/outfits.json末尾（在前一条末尾补逗号） - 如果用了本地图片，把截图文件放到
images/目录下一并推送；用 URL 则无需推送图片
git add images/xxx.jpg data/outfits.json
git commit -m "添加搭配：xxx"
git push
{
"id": "outfit-025",
"name": "搭配名称",
"aliases": ["别名1", "别名2"],
"code": "搭配码字符串",
"image": "images/outfit-025.jpg",
"color": "颜色",
"style": "风格",
"setName": "套装名称"
}| 字段 | 必填 | 说明 | 示例 |
|---|---|---|---|
id |
是 | 唯一标识，outfit- + 三位数字，接续已有编号 |
"outfit-025" |
name |
是 | 搭配名称，展示在卡片标题 | "花田漫步" |
aliases |
否 | 别名/搜索关键词，留空写 [] |
["花花套装", "春日花田"] |
code |
是 | 游戏内搭配码，支持字母数字符号混合 | "1amDS0Y5yJ9#" |
image |
是 | 图片路径，支持本地文件或网络URL | "images/outfit-025.jpg" 或 "https://..." |
color |
是 | 颜色分类，与已有颜色保持一致 | "粉色" |
style |
是 | 风格分类，与已有风格保持一致 | "清新" |
setName |
是 | 套装系列名称，与已有套装保持一致 | "花田系列" |
1. 准备图片：上传本地截图到 images/ 目录，或准备网络图片URL
2. 编辑 data/outfits.json，在数组末尾追加一条记录
（在前一条末尾补逗号）
3. 本地预览：python3 -m http.server 8080
打开 http://localhost:8080 确认显示正常
4. 提交并推送：
git add images/ data/outfits.json
git commit -m "添加搭配：xxx"
git push
（使用网络URL时无需推送图片，仅推送 JSON 即可）
5. 等待约 1-2 分钟，Cloudflare Pages 自动部署完成
- id 必须唯一
- color / style / setName 建议使用已有分类名称，新值会自动出现在筛选标签中
- 图片路径：使用本地文件时路径必须与
images/下的文件名完全一致；使用网络URL时确保链接可访问 - JSON 末尾不要有多余逗号，否则站点会加载失败
24 条真实游戏套装，覆盖 5 个套装系列：
| 套装系列 | 包含 |
|---|---|
| 万灵系列 | 眠于花畔、谒灵、心愿金蔷薇、咏叹银夜莺、栖骨生花、渡者无归 |
| 星海系列 | 星之海、蝶屿风袭、辉月诺言、群星绽放时 |
| 能力套装 | 纯净之风、轻盈泡泡、午后暖阳、悠然水畔、飞花的追忆、灰尘拜拜、笔尖漾奇彩、琴弦之诗、迷你星芒、满电行动 |
| 童话系列 | 漫夜灯语、重逢之约、天鹅童话 |
| 星梦系列 | 星屑小梦曲 |
| 方式 | 适用场景 | image 字段值 |
|---|---|---|
| 本地文件 | 自己有游戏截图，存放在 images/ 目录 |
"images/outfit-001.jpg" |
| 网络URL | 引用官方宣传图或其他在线图片 | "https://example.com/photo.jpg" |
| 属性 | 要求 |
|---|---|
| 宽高比 | 3:4（宽 600 × 高 800 最佳） |
| 格式 | JPG 或 PNG |
| 大小 | 建议 ≤ 500KB，过大会影响页面加载速度 |
卡片图片容器固定为 aspect-ratio: 3/4，不同比例的图片会自动裁剪填充：
- 3:4 图片 → 完美显示，无需裁剪
- 竖屏截图（9:16） → 上下部分会被裁掉约 1/4，建议裁剪后再上传
- 横屏截图（4:3） → 左右留白或严重裁剪，不推荐
建议上传前用图片工具将截图裁剪为 3:4，确保搭配主体居中。
images/ 中的 .svg 文件是 admin.html 自动生成的占位图，背景颜色与 color 字段对应，并显示套装名称和搭配码。
上传实际截图后，更新 image 字段即可：
- 本地图片 →
"image": "images/你的截图文件名.jpg" - 网络图片 →
"image": "https://example.com/图片.jpg"
图片路径必须与实际文件名完全一致，否则无法显示。
无需安装任何依赖，直接使用浏览器打开 index.html 即可预览：
# 方法一：直接双击 index.html（部分浏览器可能因 file:// 协议限制无法加载 JSON）
# 方法二：使用本地服务器（推荐）
python3 -m http.server 8080
# 浏览器打开 http://localhost:8080
# 方法三：使用 Node.js
npx serve .注意：
file://协议下fetch可能被浏览器拦截，建议使用本地服务器预览。
如需修改主题色，编辑 css/style.css 顶部的 CSS 变量：
:root {
--pink-50: #fdf2f8; /* 最浅背景 */
--pink-500: #ec4899; /* 主色调 */
--pink-700: #be185d; /* 标题/强调色 */
}修改这些变量即可改变全站配色风格。
- 纯 HTML5 / CSS3 / JavaScript（ES6+）
- 无框架、无构建步骤、零依赖
- 数据驱动：所有内容来自
data/outfits.json - 响应式设计：手机 / 平板 / 桌面自适应
- 部署：Cloudflare Pages（全球 CDN，自动 HTTPS）