ImageResize.top - 网站源码说明

这是一个完全基于前端技术（HTML, CSS, JavaScript）的静态网站项目，为用户提供免费的、无需上传的在线图片尺寸批量调整服务。网站支持五种语言，并为多语言SEO进行了优化。

主要功能

• 客户端处理: 所有图片处理都在用户的浏览器中完成，图片文件不会上传到服务器，确保了用户的隐私安全。
• 批量调整: 用户可以上传一张图片，然后一键生成适用于多个社交媒体平台的多种尺寸。
• 多语言支持: 目前支持英语（en）、德语（de）、法语（fr）、日语（ja）和简体中文（zh）。
• 自动语言检测: 网站会自动检测用户的浏览器语言，并重定向到相应的语言版本。
• SEO优化: 每个页面都包含了规范的 hreflang 标签，以帮助搜索引擎理解不同语言版本之间的关系。

技术栈

• HTML5
• CSS3
• JavaScript (原生)
• Tailwind CSS: 用于快速构建UI。
• Font Awesome: 提供社交媒体图标。
• Cropper.js: 用于实现图片裁剪功能。

文件结构

本项目采用基于子目录的多语言结构，便于管理和部署。

/ (项目根目录)
├── en/               (英文版网站文件)
│   ├── index.html
│   ├── about.html
│   └── ...
├── de/               (德文版网站文件)
│   ├── index.html
│   └── ...
├── fr/               (法文版网站文件)
│   ├── index.html
│   └── ...
├── ja/               (日文版网站文件)
│   ├── index.html
│   └── ...
└── zh/               (中文版网站文件)
    ├── index.html
    └── ...
├── index.html        (根目录下的重定向脚本)
├── robots.txt        (搜索引擎抓取规则)
├── sitemap.html      (用户可见的网站地图)
└── readme.md         (本项目说明文件)

重要文件说明:

• 根目录 index.html: 这是一个引导页面，其唯一功能是检测浏览器语言并将用户重定向到对应的语言目录（如 /en/ 或 /zh/）。
• /lang/ 目录: 每个语言目录（如 en, de）都包含一套完整的、已翻译的网站HTML文件。

如何部署

这是一个纯静态网站，可以部署在任何支持静态文件托管的平台上。

1. 将项目根目录下的所有文件夹和文件上传到您的网站托管服务商（例如 Netlify, Vercel, GitHub Pages, 或传统的虚拟主机）。
2. 确保您的域名 imageresize.top 指向托管服务器的根目录。
3. 部署完成！根目录的 index.html 会自动处理语言重定向。

如何更新和维护

1. 修改内容: 建议先在英文版本（/en/ 目录）中修改或添加内容。
2. 翻译: 将修改后的内容翻译成其他四种语言。
3. 同步更新: 将翻译好的内容更新到对应语言目录的文件中。
4. 检查链接: 确保所有页内链接（导航、页脚等）都使用了正确的相对路径（例如，在 /zh/ 目录下，所有链接都应指向 /zh/ 目录内的文件）。
5. 检查hreflang: 如果新增了页面，请确保在新页面的所有语言版本中都添加了正确的 hreflang 标签。