Horizon 布局与导航：页面外壳和全站区域

本文基于 Horizon 4.2.0，源码固定到 5acd1b6（核验于 2026-10-07）。结论限于此 commit，不表示其他版本行为相同；本篇为源码分析，未完成店铺运行验证。

常规页面的全站骨架从 layout/theme.liquid 开始。它组织 head 资源、页眉分区组、模板内容、页脚分区组以及搜索和购买等共享界面。

Layout 不等于页面模板

布局中的 content_for_layout 是模板内容入口。sections/header-group.json 与 sections/footer-group.json 则定义全站区域的组合，不能把正文所在的 main 元素也算成一个 section group。

阅读导航时继续进入 sections/header.liquid；阅读页脚排列时进入 sections/footer.liquid。需要改变全站区域的组合和需要改变一个区域内部实现，是两个不同操作。

密码页入口 layout/password.liquid 和礼品卡模板 templates/gift_card.liquid 需要分别检查。某个主题只在特定位置使用 Liquid 模板，是主题实现选择，不构成其他模板禁止使用 Liquid 的平台规则。

首屏尺寸为什么在布局里计算

本版本的布局定义页眉高度测量函数，并对透明页眉等首屏消费者进行处理。源码注释解释了这样做是为了避免页面在后续测量完成时产生可见跳动。

这段逻辑还与 assets/utilities.js 中的页眉相关计算保持关联。改动页眉高度或透明模式时，应同时检查布局内的首次计算与后续更新，不能只修改看起来更通用的工具函数。

脚本加载也属于布局契约

snippets/scripts.liquid 不只是静态文件清单：它包含模块映射、条件加载及浏览器能力处理。本版本会检测浏览器是否支持原生 popover，不支持时动态加载 popover-polyfill.js。因此“完全不使用 polyfill”的概括不适用于这个基线。

关于全局颜色和实例样式，继续阅读样式机制。

验证跨页面影响

导航改动至少检查首页、商品页、集合页以及密码页面的相关入口，分别观察透明页眉、滚动状态、窄屏菜单和键盘焦点。源码中的跳转链接和对话框标记可以作为检查入口，不能代替无障碍实测。