# 食光手记

一个以「清晰食材清单 + 可执行步骤 + 餐桌故事」为核心的响应式美食食谱网站。项目使用原生 HTML、CSS 与 JavaScript 构建，不依赖前端框架或外部运行库。

## 功能

- 6 道完整菜谱，包含配文、食材、步骤、替代食材、营养参考与实拍图片
- 首页搜索、热门关键词、分类筛选、排序与收藏筛选
- 菜谱详情页支持 `1-12` 人份量自动换算
- 食材勾选、步骤完成进度、打印与系统分享
- 收藏与主题偏好使用 `localStorage` 持久保存
- 响应式布局、深色模式、键盘焦点与减少动态效果支持
- 内置零依赖 Node 静态服务器

## 本地运行

需要 Node.js 18 或更高版本。

```powershell
npm start
```

打开：

```text
http://127.0.0.1:4173
```

运行数据完整性检查：

```powershell
npm run validate
```

## 项目结构

```text
.
├── index.html                 # 首页：发现、筛选和收藏菜谱
├── recipe.html                # 菜谱详情模板
├── styles.css                 # 全站样式、响应式布局与深色模式
├── app.js                     # 搜索、筛选、收藏、份量换算和步骤进度
├── data.js                    # 菜谱数据源
├── server.js                  # 零依赖本地静态服务器
├── scripts/validate.mjs       # 数据与资源验证脚本
└── assets/
    ├── favicon.svg
    ├── logo.svg
    └── images/                # 本地 WebP 菜品图片
```

## 添加或修改菜谱

所有内容都在 `data.js` 的 `recipes` 数组中。复制任意一条菜谱对象后修改以下字段：

- `id`：唯一英文标识，用于生成 `recipe.html?id=...`
- `title`、`subtitle`、`description`、`editorNote`：标题、配文和编辑提示
- `image`：本地图片路径，建议使用宽度 1400px 的 WebP
- `ingredients`：按组维护，`amount` 为数字，`unit` 为单位
- `steps`：每步包含 `title`、`body`，可选 `timer` 和 `tip`
- `nutrition`、`tips`、`substitutions`：营养、技巧与替代食材

添加完成后运行 `npm run validate`。

## Git 版本控制

仓库已经包含 `.gitignore`。常用命令：

```powershell
git status
git add .
git commit -m "feat: build recipe website"
```

如需发布到 GitHub Pages，请先创建远程仓库，然后执行：

```powershell
git remote add origin <你的仓库地址>
git push -u origin main
```

静态站点不需要构建步骤，可以直接将仓库根目录作为 GitHub Pages 的发布源。

## 图片与许可

菜品照片用于本项目演示，来源于 Unsplash 图片服务，具体资源地址与许可说明见 `ATTRIBUTIONS.md`。页面代码与文字内容可继续按项目需要进行修改。