Dawn 内容分区与动效：轮播、折叠、横幅与滚动显现
本文基于 Dawn v15.3.0，源码固定到 ecb06c3（核验于 2026-09-29）。结论限于此提交，不表示其他版本行为相同；本篇为静态源码分析，未完成店铺运行验证。Dawn 上游已发布 v16.0.0（2026-08-10，GitHub Releases 核对），本库 Dawn 正文统一以 v15.3.0 为基线，升级前需重新核对。
对应哪些通用模式
本篇是对应表加关键实现：把 Dawn 的内容分区映射到 Carousel、Accordion、Grid、Hero、Split、Overlay、Single Column，并展开 Scroll Reveal 与 Marquee。重点是轮播的自动播放、键盘与减少动态的实际实现。商品页媒体图库见 Dawn 商品媒体。
入口与文件
| 分区文件 | 对应的通用展现 | 关键事实 |
|---|---|---|
| sections/slideshow.liquid | Carousel，文字叠图时含 Hero、Overlay | 至多 5 个 slide 块；auto_rotate（默认 false）、change_slides_speed（3 至 9 秒）、slider_visual（counter / dots / numbers） |
| sections/announcement-bar.liquid | Carousel（纯文字公告） | 多于一条公告时输出 slideshow-component；auto_rotate 默认 false |
| sections/collapsible-content.liquid | Accordion，配图时兼具 Split | 每个块一个原生 details；open_first_collapsible_row、layout、desktop_layout |
| sections/multicolumn.liquid | Grid | columns_desktop 1 至 6，columns_mobile 为 1 或 2；swipe_on_mobile（默认 false）且块数多于移动列数时在平板及以下变为滑动 |
| sections/image-banner.liquid | Hero、Overlay | 标题为 h2；image_overlay_opacity（0 至 100）、show_text_box、show_text_below、image_2、stack_images_on_mobile、image_behavior |
sections/image-with-text.liquid（另有 multirow.liquid） | Split | layout、desktop_image_width、content_layout（no-overlap / overlap）；multirow 是多行重复版本，本篇未展开 |
| sections/rich-text.liquid | Single Column | 标题、说明、正文、按钮四种块；content_alignment、full_width |
| sections/collage.liquid | 不规则 Grid | 左 / 右大块加小块的固定拼贴，不是 Masonry；mobile_layout（默认 column） |
| sections/video.liquid | 无对应展现页 | 海报 button 加 <template>，点击后才加载，机制同商品页的 DeferredMedia；海报 aria-label 取「Load video: 描述」 |
轮播：自动播放、键盘与减少动态
slideshow-component（assets/global.js 的 SlideshowComponent，继承 SliderComponent）驱动 slideshow 与公告栏，下面的结论来自 assets/global.js 与 sections/slideshow.liquid。
- 默认不自动播放，开启
auto_rotate且块数大于 1 时才输出顶部控件和slideshow__autoplay按钮；只有一个块时既无控件也不播放（构造函数因找不到.slider-buttons提前返回）。 - 暂停按钮存在，
aria-label在「Pause slideshow」与「Play slideshow」间切换，但它是控件组的最后一个（顺序为上一张、计数或圆点、下一张、暂停），不是 Tab 顺序第一位。 - 悬停与聚焦只是临时暂停：
mouseover、focusin调pause()，mouseleave、focusout调play()，除非用户已用按钮暂停。通用页要求的「只有用户主动恢复后才重新开始」未满足。 - 实时播报：轮播播放时
aria-live置为off，暂停时为polite，与通用页一致。 - 减少动态：公告栏的 JS 判断
prefers-reduced-motion并暂停自动播放；slideshow 分区带暂停按钮的路径直接调用play()，未见该判断。CSS 只把.slider的scroll-behavior设为auto，即取消平滑滚动，不阻止自动切换。 - 键盘与语义：控件都是原生
button；未监听方向键；每张幻灯片role="group"与aria-roledescription，非当前幻灯片经setSlideVisibility设aria-hidden并让其中链接tabindex="-1"；上一张 / 下一张循环（enableSliderLooping）。 - 公告栏没有暂停按钮：第一次点击箭头后，悬停或聚焦结束时不再恢复自动播放；此外按
reducedMotion与悬停、聚焦控制。 - 无 JS：幻灯轨道是
scroll-snap横向滚动，无自动播放；aria-hidden由 JS 设置，未在浏览器验证。
multicolumn 的滑动只在小屏与平板启用，没有自动播放，控件带 large-up-hide。
Accordion：原生 details 加脚本补语义
collapsible-content 的每一项是独立的 details / summary，没有 name 分组，可同时展开多项；无 JS 也能展开收起。global.js 对 [id^="Details-"] summary 补 role="button"、aria-expanded、aria-controls，并让 Escape 关闭（onKeyUpEscape）；面板是带 aria-labelledby 的 role="region"。差距：标题 h3 在 summary 里而不是包裹按钮，且 role="button" 会使子节点呈现为无语义，标题层级能否被辅助技术读到未核验；区域数量较多时会产生 region 噪声。
滚动显现与减少动态
- 开关与加载：
animations_reveal_on_scroll（默认true）为真时，layout/theme.liquid 才加载animations.js，各分区才输出scroll-trigger animate--fade-in或animate--slide-in，并可带data-cascade与--animation-order。 - 实现：assets/animations.js 用
IntersectionObserver（rootMargin: '0px 0px -50px 0px'）：不可见的元素加scroll-trigger--offscreen，进入视口后移除并unobserve，即只触发一次。 - 减少动态：assets/base.css 把「初始隐藏（
opacity: 0.01、translateY(2rem)）」和fadeIn/slideIn动画都放进@media (prefers-reduced-motion: no-preference)，所以偏好为reduce时元素直接可见、无动画；这是 CSS 层实现，JS 仍会创建观察器。 - 默认可见：隐藏由 JS 加的
offscreen类触发，未运行 JS 时:not(.scroll-trigger--offscreen)规则使元素保持可见（依选择器推断，未在浏览器验证）；主题编辑器里用scroll-trigger--design-mode直接显示。 - 首屏：hero 的
banner__media与文字容器同样带这些类，已在视口内的元素不会被隐藏，但页面加载时仍会播放一次淡入 / 滑入，对首屏渲染的影响未测。 - 图片行为
image_behavior：image-banner 有 none、ambient、fixed、zoom-in，image-with-text 有 none、ambient、zoom-in，slideshow 有 none、ambient。ambient是 30 秒无限循环的 CSS 动画，仅在no-preference下生效；zoom-in的滚动缩放在 JS 中遇reduce提前返回；fixed用position: fixed的背景图，样式中没有减少动态分支。 - 悬停动效
animations_hover_elements（default / vertical-lift / 3d-lift）同样限定在no-preference且可悬停的设备。
与通用契约的一致与差距（汇总）
| 通用要求 | Dawn 现状 |
|---|---|
| 自动轮播默认关闭或可停 | 默认关闭；开启后有暂停按钮，但不在 Tab 首位，悬停或聚焦后自动恢复；公告栏无暂停按钮 |
| 减少动态下取消非必要运动 | 滚动显现、ambient、悬停动效由 CSS 处理；slideshow 自动切换与 fixed 背景未见处理 |
| 一项退化 | slideshow 单块无控件；multicolumn 块数不多于列数时不滑动 |
| Accordion：按钮包在标题内、无 JS 可用 | 原生 details 无 JS 可展开收起，open_first_collapsible_row 决定首项是否默认展开；标题在 summary 内，与通用页「按钮包在标题内」的结构相反 |
| Marquee | 在固定提交的全仓库搜索中未找到跑马灯或走马灯分区（搜索词：marquee、ticker、scrolling、infinite、parallax、animation-timeline；infinite 仅命中加载图标、进度条与 ambient 图片动画）。公告栏是逐条切换而非连续滚动 |
| Hero 标题等级与叠图对比度 | 标题为 h2，页面 h1 需由其他区块提供（各模板未核验）；image_overlay_opacity 默认 0，对比度靠商家配置，未核验 |
定制入口与风险
商家可在各分区 schema 设置里调整上表列出的选项，以及全局「动画」设置；主题不提供跑马灯，需要时属于新增开发。开发者改动的耦合点：SlideshowComponent 同时服务 slideshow、公告栏与商品页 complementary 块，改自动播放逻辑要三处回归；scroll-trigger 类靠 Liquid 条件输出，新增分区要自行加类；details 的 ARIA 补丁只在页面加载时执行一次。
建议的验证范围
本篇均未执行：
- 开启
auto_rotate，用键盘 Tab 走完控件顺序，验证悬停、聚焦后是否自动恢复，并在系统「减少动态」下观察 slideshow 与公告栏是否仍自动切换。 - 屏幕阅读器检查 slideshow 的播报（播放与暂停两种状态）、非当前幻灯片的可达性与 Accordion 标题读法。
- 关闭 JavaScript 后检查滚动显现区域、slideshow 与折叠面板是否内容完整。
- 在
reduce与no-preference下对比 image_behavior 各选项与fixed背景的实际效果。 - 首屏 hero 打开 / 关闭
animations_reveal_on_scroll，比较加载表现。