把一套 Shopify 科技主题站的首页，压成一个 172KB 的 HTML 文件——19 个区块、全交互、83 个媒体资源零外链。
静态单页 · 2026
| 项 | 内容 |
|---|---|
| 类型 | 品牌官网 / 电商首页 · 静态单页 |
| 参考对象 | Concept Theme Tech（Shopify「Concept」主题演示站） |
| 交付形态 | 单个 index.html，双击即开，无构建、无依赖安装 |
| 代码规模 | 171,984 字符 / 2,671 行 |
| 视觉还原 | 19 个区块、103 项文案、148 张图片逐项对齐 |
| 媒体资产 | 83 个文件 / 28.3 MB 全量本地化，161 处引用改写 |
| 交互 | 9 类交互，全部原生 JS（无框架） |
| 外部依赖 | 仅 2 项：Tailwind 运行时、Inter 字体（走 CDN） |
1. 单文件 vs. 高保真——两者天然冲突
多区块 + 视频 + 大量商品图的页面，常规做法是拆组件、上框架、走构建。这里的目标相反：产物必须是一个文件。
@theme（--color-ink、--radius-block、--text-hero …），再用工具函数类直接消费。clamp() 流体表达式，和原站的编译结果同源，而不是「随手写个大概值」。2. 还原的基准不是「看着像」，是原站渲染出的计算样式
肉眼比对必然漂移。所以先做测量、再写代码：
3. 媒体资源的「量」会失控
同一张商品图会有 ?width=200 / ?width=1000 / ?width=2000 多个变体，直接抓会得到几百个重复文件。
| # | 区块 | 关键实现 |
|---|---|---|
| 1 | 顶部通告栏 | 社交图标 / 促销码 / 语言与货币切换 |
| 2 | 吸顶导航 | 3 组 megamenu（Shop / Collections / Explore）+ 搜索·账户·购物车 |
| 3 | 首屏轮播 | 3 屏（含 1 屏视频），淡入淡出 + 自动播放 + 圆点/箭头 |
| 4 | 合集卡片 | 8 张横向滚动，首张为图片压字样式 |
| 5 | We believe in the power of sound | 图文区 + 手绘下划线 |
| 6 | Sound. Sculpted. | 视频 Hero |
| 7 | Flow Harmony 商品区 | 画廊 + 缩略图、参数 highlights、色板、配件加购、库存提示 |
| 8 | Vibrant Headphone Choices | 前后对比滑块（可拖拽） |
| 9 | Build your Bundle | 6 商品 Bundle 构建器 + 实时汇总，≥3 件自动 7 折 |
| 10 | 文字跑马灯 | Play anything • Day-long comfort |
| 11 | Shop the Feed | 5 张 Instagram 卡片，色板 + Shop the Look 浮层 |
| 12 | 倒计时 Banner | 天/时/分/秒实时计时 |
| 13 | Bring Quality Sound into Your Home | Lookbook 热点 → 商品浮层 + 卡片切换 |
| 14 | 媒体评价轮播 | Rolling Stone / Billboard / Pitchfork |
| 15 | Best Sellers | 4 标签商品栅格（Headphones / Earphones / Speakers / Accessories） |
| 16 | 品牌 Logo 跑马灯 | 黄底、上下两行反向滚动 |
| 17 | Latest Stories | 博客拼贴 1 大 + 2 小 |
| 18 | 服务说明 + 页脚 | 订阅表单、社交、版权、支付图标 |
| 19 | 侧边订阅入口 | 左侧悬浮 20% off + 订阅弹窗 |
全部挂在文件末尾一个 script 里，无框架、无构建步骤：
clip-path| token | 值 | 用途 |
|---|---|---|
--color-ink | #171717 | 正文 / 按钮底色 |
--color-ink-soft | #1f1f1f | 通告栏、页脚 |
--color-card | #fafafa | 卡片底色 |
--color-accent | #fde68a | 品牌跑马灯底色 |
--radius-block | clamp(0.625rem, 1.053vw, 1.25rem) | 卡片 / 图片圆角 |
--radius-section | clamp(1rem, 1.578vw, 1.875rem) | 区块圆角 |
--text-hero | clamp(2rem, 3.368vw, 4rem) | 主标题（字重 700、字距 -0.03em） |
--text-marquee | clamp(3rem, 11.28vw, 20rem) | 跑马灯大字 |
--text-sub | clamp(1rem, 1.052vw, 1.25rem) | 正文 |
页面宽度：min(100vw - 2×48px, 1900px)，桌面端左右留白 48px。字体：Inter 400 / 500 / 700。
| 指标 | 结果 |
|---|---|
| 媒体引用命中本地文件 | 83 / 83 |
| 页面渲染图片加载 | 150 张，0 失败 |
| 文案逐项核对 | 103 项全部命中 |
| 横向溢出 | 无 |
| 章节高度误差 | 归一化后基本在 ±5% 内 |
| 剩余外部依赖 | 1 个（Tailwind CDN script） |
