presentation-structure

演示文稿结构技能

关于 presentation/index.html 中演示文稿结构的知识。

文件位置

presentation/index.html — 一个包含内联 CSS 和 JS 的单文件 HTML 演示文稿。

幻灯片格式

每张幻灯片都是一个带有 data-slide（顺序编号）和可选 data-level（过渡点处的旅程级别）的 div：

<div class="slide" data-slide="12">
    <h1>Slide Title</h1>
    
</div>


<div class="slide section-slide" data-slide="10" data-level="low">
    <h1>Section Name</h1>
    <p class="section-desc">Level: Low — description of this section</p>
</div>


<div class="slide title-slide" data-slide="1">
    <h1>Presentation Title</h1>
    <p class="subtitle">Subtitle text</p>
</div>

旅程栏级别系统

演示文稿采用 4 级系统，而非累积百分比：

• 通过关键过渡幻灯片（章节分隔页）上的 data-level 属性设置级别
• data-level 幻灯片之后的所有幻灯片都会继承该级别，直到下一个过渡点
• 旅程栏分别填充至 Low / Medium / High / Pro 对应的 25% / 50% / 75% / 100%
• 第 1 张幻灯片（标题页）上隐藏旅程栏；从第 2 张幻灯片起显示
• 第一张带有 data-level 的幻灯片之前（第 2–9 张）显示空栏（尚未设置级别）
• JS 会在带有 data-level 的幻灯片的 <h1> 上注入 .level-badge — 不要在 HTML 中硬编码

各章节的级别转换

章节	幻灯片范围	data-level	栏高度
第 0 部分：简介	第 1–4 张	（无）	隐藏 / 空
第 1 部分：先决条件	第 5–9 张	（无）	空
第 2 部分：更好的提示词	第 10–17 张	low	25%
第 3 部分：项目记忆	第 18–24 张	medium	50%
第 4 部分：结构化工作流	第 25–28 张	（继承 medium）	50%
第 5 部分：领域知识	第 29–33 张	high	75%
第 6 部分：Agentic 工程	第 34–46 张	high	75%
附录	第 47 张及以后	（继承 high）	75%

导航系统

• goToSlide(n) — 在目录链接中使用，必须与实际的 data-slide 编号一致
• totalSlides 从 DOM 自动计算（document.querySelectorAll('[data-slide]').length）
• 使用方向键、空格键和触屏滑动进行导航
• 幻灯片计数器在左下角显示 current / total

重新编号规则

添加、删除或重新排序幻灯片后：

1. 从 1 开始按顺序重新编号所有 data-slide 属性
2. 更新目录 / 旅程地图幻灯片中的所有 goToSlide() 调用
3. JS 会自动计算 totalSlides — 无需手动更新
4. 确认不存在编号缺漏或重复

章节分隔页格式

章节分隔页使用 section-slide 类。级别转换章节分隔页带有 data-level，并在描述中显示级别名称：

<div class="slide section-slide" data-slide="10" data-level="low">
    <p class="section-number">Part 2</p>
    <h1>Better Prompting</h1>
    <p class="section-desc">Level: Low — effective prompting for real results.</p>
</div>

级别转换时，JS 会在运行时向 <h1> 注入 .level-badge（例如 “→ Low”）— 不要在 HTML 中手动添加。