关于本站与架构

目录结构

webPage1/
├── index.html          # 首页（入口）
├── 404.html            # 兜底页
├── favicon.svg
├── assets/
│   ├── css/            # 设计令牌 / 布局 / 组件 三层解耦
│   │   ├── theme.css
│   │   ├── layout.css
│   │   └── components.css
│   └── js/             # 按职责拆分的能力模块
│       ├── theme.js    # 语义色主题（三态循环 + 持久化）
│       ├── i18n.js     # 中/英/日三语（运行时注入 + 回退）
│       ├── config.js   # 运行时外部配置加载
│       ├── main.js     # 全站引导
│       └── test.js     # 连通/延迟/数据 测试逻辑
├── data/               # 外置数据（配置与状态分离）
│   ├── config.json
│   └── status.json
└── pages/              # 多维内容子页
    ├── test.html
    ├── gallery.html
    ├── form.html
    └── about.html

分布式设计要点

• 样式分三层：设计令牌（theme）→ 布局（layout）→ 组件（components），互不写死颜色，改主题只改变量。
• 数据外置：站点信息与状态放 data/*.json，运行时 fetch 注入，代码与内容分离，可独立更新与缓存。
• 能力模块化：主题、i18n、配置、测试各自独立、按需引入，子页只加载所需脚本。
• 无状态纯静态：对 CDN / 对象存储 / 任意静态托管友好，天然可水平扩展。
• 兼容与可用：移动优先断点、prefers-color-scheme、prefers-reduced-motion、焦点可见、语义标签。

---

提示：所有交互均为前端本地行为，不依赖任何后端接口，适合作为域名 / 证书 / 缓存的首发验证页。