这是一个温馨的个人项目，用于展示和记录我的宝贝外甥女的成长照片和珍贵瞬间。本项目采用纯前端技术栈 HTML / CSS / JavaScript 实现，并部署在 GitHub Pages 上。
项目界面设计注重美观、自适应和流畅的用户体验 (UX)，并具备便捷的扩展性，方便未来持续添加新的照片。
- 完全响应式布局： 基于 CSS Grid 实现，在手机、平板和桌面端都能保持美观和稳定的照片墙效果。
- 高级视觉设计： 采用柔和的马卡龙主题色和自定义字体，营造温馨可爱的氛围，照片带有画框效果，悬停有动效。
- 流畅的 UX 体验：
- 加载占位符 (Skeleton Screen)： 在图片加载时显示骨架屏，避免白屏，提供加载反馈。
- 稳定 Lightbox： 点击照片弹出全屏查看模式，性能优化，无卡顿。
- 键盘导航： 支持 Tab 键和 Enter/Space 键操作，提升无障碍访问性。
- 平滑滚动 (Smooth Scroll)： 页面滚动时的视觉效果更加舒适自然。
- 高可维护性与可扩展性：
- 按时间排序： 照片根据文件名中的日期自动排序 (最新在前或最早在前)。
- 标签筛选： 支持按
生日、旅行等标签快速筛选照片，查看特定时刻。 - 集中数据管理： 所有照片信息集中在
script.js顶部的数组中，添加/修改照片非常便捷。
- 结构： HTML5
- 样式/布局： CSS3 (重点使用 CSS Grid 和 CSS 变量)
- 交互/功能： Vanilla JavaScript (ES6+)
本项目已部署在 GitHub Pages 上，您可以点击以下链接访问：
👉 访问照片墙：https://code-mist.github.io/
.
├── assets/
│ └── fonts/ # 自定义字体文件 (.woff2)
├── images/ # 存放所有照片文件的目录
├── index.html # 主页面文件
├── styles.css # 所有 CSS 样式，包含主题色和布局
├── script.js # 核心 JS 逻辑 (数据管理、排序、筛选、渲染)
├── 404.html # 定制 404 错误页面
└── README.md # 本文件
为了保持项目的可维护性，所有照片数据都集中在 script.js 文件顶部的 photos 数组中。
请确保照片文件名包含日期信息，以便 JS 可以正确排序。请使用以下格式：
YYYY-MM-DD-事件描述.jpg
示例： 2024-06-01-birthday-party.jpg
- 将新照片文件（遵循命名规范）添加到
/images文件夹。 - 打开
script.js文件，找到顶部的const photos = [...]数组。 - 在数组中添加一个新的对象，并填写完整的
src、caption和tags：
// 示例：添加一张新照片
{
src: 'images/2024-08-10-swimming-class.jpg',
caption: '第一次去游泳课，一点都不怕水！',
class: '', // 可选值为 'wide' 或 'tall' (用于在大屏幕上改变布局)
tags: ['日常', '成长'] // 至少添加一个标签用于筛选
},将新增的图片文件和修改后的 script.js 推送到 GitHub 仓库即可。
Bash
# 在项目根目录执行以下命令：
git add .
git commit -m "feat: Add new photos from August"
git push origin main
- 本项目的灵感源于对家人的爱。
- 部分字体使用了 Google Fonts 提供的资源。
如果您有任何建议或想进一步优化此项目，欢迎提交 Issue 或 Pull Request！
对于 Web 项目中的视频，在压缩时应重点关注以下两个设置：
- 编码器 (Codec)： 推荐使用 H.264 (AVC) 或 H.265 (HEVC)。H.264 兼容性极佳，H.265 压缩效率更高（文件更小），但旧设备支持可能稍差。
- 分辨率 (Resolution)： 视频通常不需要全高清 4K 或 1080p。如果视频内容主要在小屏上观看，将分辨率降至 720p (1280x720) 或 480p (854x480) 可以极大地减少文件大小。
- 比特率 (Bitrate)： 降低目标比特率是减小文件大小的最直接方法。对于 Web 视频，可以尝试将目标码率设置在 1000 kbps (480p) 到 3000 kbps (720p) 之间。
为了照片墙在 GitHub Pages 上有最佳表现，请遵循以下原则：
- 统一格式： 对于您的照片墙，建议统一使用 JPG 格式，它是照片的最佳选择。
- 调整分辨率： 除非您的图片需要全屏展示在 4K 屏幕上，否则没有必要保留原始高分辨率。
- 将照片分辨率统一调整到 1920px (长边) 或更小（例如 1400px），能大幅减少文件大小。
- 使用 WebP/AVIF (进阶)： 如果您愿意在
script.js中引入现代浏览器检测或使用<picture>标签，将图片转换为 WebP 或 AVIF 格式，可以实现更高的压缩率。但为了项目简单性，保留 JPG 即可。 - 保留 EXIF 信息 (可选)： 一些压缩工具会移除照片的 EXIF 数据（如拍摄时间、相机型号）。如果您希望保留这些信息，请在工具设置中选择保留。
2023-11-05 ✨ 小天使降临人间，6.8斤的小公主
2023-11-12 📸 第一次睁开眼睛看世界
2023-11-25 😊 出生后第一个微笑
2023-12-10 🍼 奶量达到90ml啦
2024-01-15 👐 会主动伸手抓玩具
2024-02-20 🤗 第一次翻身成功！
2024-03-08 🗣️ 发出“ma-ma”的声音
2024-04-01 🪑 能够独立坐稳30秒
2024-05-15 🦷 🦷 长出第一颗小白牙
2024-06-01 🎈 人生第一个儿童节
- GitHub Issues：上传图片到 Issue，获取 CDN 链接
- Imgur、Google Photos 等免费图床
- Cloudinary 免费额度
| 平台 | 免费额度 | 嵌入支持 | 特点 |
|---|---|---|---|
| Imgur | 完全免费 | ✅ 优秀 | 最流行，稳定，直接嵌入 |
| Cloudinary | 25GB 存储 + 25GB 流量 | ✅ 优秀 | 专业级，支持图片优化 |
| ImgBB | 完全免费 | ✅ 优秀 | 简单易用，无需注册 |
| GitHub Issues | 完全免费 | ✅ 良好 | 利用 GitHub 自身服务 |
markdown
**推荐：Imgur**
- 完全免费
- 无数量限制
- 链接永久有效
- 无需注册（但注册更好管理）
markdown
**推荐：Cloudinary**
- 免费额度足够
- 支持图片优化、裁剪、格式转换
- CDN 加速
markdown
**推荐：GitHub Issues**
- 完全在 GitHub 生态内
- 链接稳定
- 适合技术截图、演示图
-
YouTube（设为**未列出**）
✅ 优势：
- 完全免费，无存储限制
- 单个文件无大小限制
- 支持私有视频、未列出视频
- 全球 CDN，加载速度快
❌ 劣势：
- 15分钟以上视频需要手机验证
- 界面有广告（私有视频无广告）
-
Google Drive / OneDrive 分享链接
-
Vimeo 免费基础版【限制25个视频