# 网站规划方案：WallpaperOnline.net

## 1. 项目定位与发布
- **站点目标**：提供高品质壁纸的静态展示与下载，覆盖颜色、题材、分辨率多种分类，重点打造“Black Wallpaper”专题。
- **技术栈**：纯静态网页（HTML5 + CSS + 少量原生 JS），以 Vite/Parcel 等打包或直接手写，提交至 Git 仓库，部署到 Netlify、Vercel 或 Cloudflare Pages。
- **内容来源策略**：合规版权（自制或可免费商用素材），命名规范（`collection-name_resolution.jpg`），在仓库 `assets/` 目录集中管理。
- **SEO 基础**：全站固定 `<title>` 及 `<meta description>` 文案，Schema.org `ItemList`、`ImageObject`，Sitemap + robots.txt，静态生成 favicon、Open Graph 图。

## 2. 信息架构
```
/ (Homepage)
├─ /black-wallpaper/ （专题二级页）
├─ /color/{color-name}/
├─ /theme/{theme-name}/
├─ /resolution/{width-x-height}/
└─ /about/、/licensing/ 等补充信息页
```
- **主页**：聚合热门分类、响应式搜索、精选合集。  
- **二级页**：聚焦单一主题或颜色集合，展示全部壁纸、筛选条件与下载按钮。  
- **所有页面共享**：顶部导航 + 页脚，统一 CTA（下载/收藏）、面包屑、Lazy-load 图片。

## 3. 主页结构（/）
| 区块 | 内容要点 | 交互/样式 |
| --- | --- | --- |
| 顶部导航 | Logo、主导航（Colors / Themes / Resolutions / About）、Search icon、语言切换（中/英） | Sticky，背景半透明，滚动后添加阴影 |
| Hero Banner | 背景使用动态渐变/视频遮罩；主标题“Discover High-Impact Wallpapers”；次标题 + CTA（Browse Gallery / Upload） | 提供搜索输入框（可输入颜色/关键词），移动端 100% 宽 |
| Featured Collections | 精选 6 个合集卡片（Black、Minimal、Nature、Abstract 等），卡片含预览图、标题、计数 | 响应式 3×2 网格，hover 时放大、显示“View Collection” |
| Trending Colors | 横向滚动标签（Black、White、Teal...）点击跳转 `/color/{name}` | 使用 CSS Scroll Snap |
| Latest Releases | 12 张最新壁纸瀑布流，提供分辨率标签、收藏图标、下载按钮 | 图片懒加载，点击弹出 Lightbox，提供多分辨率下载 |
| CTA Banner | “Submit your wallpaper / Join newsletter” | 中性色块 + 输入邮箱 |
| Footer | 版权、社媒、快速链接（Licensing、Privacy、Contact） | 背景深色，反差文字 |

## 4. Black Wallpaper 二级页面（/black-wallpaper/）
| 区块 | 内容要点 | 交互/样式 |
| --- | --- | --- |
| Hero Section | 标题“Black Wallpaper Collection”，副标题解释用途（OLED、Minimal Workspace），提供筛选器 | Hero 背景为暗色纹理；面包屑：Home > Colors > Black |
| Filter Bar | Tags：Mood（Minimal、Luxury、Sci-fi）、Format（Desktop、Mobile、Ultra-wide）、分辨率下拉、多选配色（黑+金/黑+红） | 纯前端过滤，结合 CSS Grid 隐藏/显示 |
| Gallery Grid | 默认加载 24 张，支持分页或“Load More”；卡片包含预览、名称、尺寸、下载按钮 | hover 显示“Quick View”弹出层 |
| Feature Highlight | 展示 3 套编辑推荐壁纸，附简短故事/场景应用 | 卡片右侧文字描述，强调 SEO 关键词 |
| Tips & SEO 文案 | 段落描述黑色壁纸优势、搭配建议，插入 2–3 个长尾关键词 | 纯文本 + 小图标，方便搜索引擎抓取 |
| Related Collections | 推荐 Midnight Blue、Dark Gradient 等链接 | 3 张卡片横排 |

## 5. 设计与内容规范
- **色彩**：主体以深灰 (#0E0E0E)、亮白 (#F5F5F5) 对比； Accent 颜色可选霓虹青 (#00D1FF) 或金色 (#F5C451)。  
- **字体**：英文字体 Inter / Poppins，中文采用 Noto Sans SC；标题 36–56px，正文 16–18px。  
- **网格与响应式**：桌面端 12 列、间距 24px；移动端 4 列。Hero 高度 > 70vh，瀑布流使用 CSS Masonry（`column-count` 或 `grid-auto-rows`）。  
- **图片规格**：主图 4K (3840×2160) + 2K + 1080p + 手机竖屏 1242×2688。利用 `<picture>` + `srcset`，默认 WebP，回退 JPG。  
- **命名规范**：`black-minimal-desk-001@3840x2160.webp`；元数据 JSON（`data/wallpapers.json`）包含 `id`, `title`, `tags`, `colors`, `resolutions`, `src`.  
- **可访问性**：为图片提供 `alt` 描述，按钮 Contrast Ratio ≥ 4.5:1，自定义焦点样式，键盘可操作 Lightbox。

## 6. 组件与文件结构建议
```
root
├─ index.html                 # 主页
├─ black-wallpaper/index.html # 二级专题页
├─ color/<name>.html
├─ theme/<name>.html
├─ assets/
│  ├─ css/
│  │  ├─ base.css             # Reset、字体、自定义属性
│  │  ├─ layout.css           # 网格、响应式
│  │  └─ components.css       # 卡片、按钮、导航
│  ├─ js/
│  │  ├─ main.js              # 共用逻辑（搜索、Lightbox、过滤）
│  │  └─ gallery.js           # 数据渲染、懒加载
│  └─ images/
├─ data/wallpapers.json       # 壁纸元数据
└─ static/                    # favicon、manifest、sitemap
```
- 组件拆分：Nav、Hero、CollectionGrid、FilterBar、Lightbox、Footer。  
- 数据驱动：首页和二级页都从 `wallpapers.json` 读取，利用 `fetch` + `template literal` 渲染，保持静态部署但内容可配置。

## 7. 性能与发布流程
1. 开发：本地使用 `npm run dev`（若有打包工具）验证响应式。  
2. 构建：`npm run build` 生成 `/dist` 静态资源。  
3. 部署：选择 Netlify/Vercel，开启自动化部署（Git push -> CI -> static hosting）。  
4. 缓存：图片使用 CDN（Netlify Large Media / Cloudflare R2）；HTML 设置合理的 Cache-Control，更新时通过文件哈希。  
5. 监控：部署后接入简单的 PageSpeed 监控（Lighthouse CI 或 WebPageTest），目标 LCP < 2.5s，CLS ≈ 0。

## 8. 内容运营建议
- 每周更新“Black Wallpaper”集合，突出应用场景（游戏、UI、桌面）。  
- 设立投稿流程（Google Form 或 Airtable），人工筛选后添加到 JSON 数据。  
- 活动创意：月度“Dark Setup Showcase”，鼓励用户在社媒 #WallpaperOnline 分享桌面。  
- 长尾策略：围绕“dark iPhone wallpaper”“minimal oled background”撰写 300–500 字描述，增强搜索覆盖。  
- 邮件与通知：Newsletter 推送新合集，二级页提供 RSS/JSON Feed 供外部调用。