攻玉学术
科研技能库/演示文稿结构
知识管理
未发现用户侧风险

演示文稿结构

关于演示文稿幻灯片格式、权重系统、导航和章节结构的知识。

文件预览

1 个文件
SKILL.md
3.6 KB · 可预览
---
name: presentation-structure
description: Knowledge about the presentation slide format, weight system, navigation, and section structure
---

# Presentation Structure Skill

Knowledge about how the presentation at `presentation/index.html` is structured.

## File Location

`presentation/index.html` — a single-file HTML presentation with inline CSS and JS.

## Slide Format

Each slide is a div with `data-slide` (sequential number) and optional `data-level` (journey level at transition points):

```html
<!-- Regular slide — inherits level from previous data-level slide -->
<div class="slide" data-slide="12">
    <h1>Slide Title</h1>
    <!-- content -->
</div>

<!-- Level transition slide — sets new level for this slide and all following -->
<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>

<!-- Title slide (centered) -->
<div class="slide title-slide" data-slide="1">
    <h1>Presentation Title</h1>
    <p class="subtitle">Subtitle text</p>
</div>
```

## Journey Bar Level System

The presentation uses a 4-level system instead of cumulative percentages:

- Levels are set via `data-level` attribute on key transition slides (section dividers)
- All slides after a `data-level` slide inherit that level until the next transition
- The journey bar fills to 25% / 50% / 75% / 100% for Low / Medium / High / Pro respectively
- The bar is hidden on slide 1 (title slide); from slide 2 onward the bar is shown
- Slides before the first `data-level` (slides 2–9) show an empty bar (no level yet set)
- A `.level-badge` is JS-injected on the `<h1>` of slides that carry `data-level` — do NOT hardcode in HTML

### Level Transitions by Section

| Section | Slide Range | data-level | Bar Height |
|---------|-------------|------------|------------|
| Part 0: Introduction | Slides 1-4 | (none) | hidden / empty |
| Part 1: Prerequisites | Slides 5-9 | (none) | empty |
| Part 2: Better Prompting | Slides 10-17 | `low` | 25% |
| Part 3: Project Memory | Slides 18-24 | `medium` | 50% |
| Part 4: Structured Workflows | Slides 25-28 | (inherits medium) | 50% |
| Part 5: Domain Knowledge | Slides 29-33 | `high` | 75% |
| Part 6: Agentic Engineering | Slides 34-46 | `high` | 75% |
| Appendix | Slides 47+ | (inherits high) | 75% |

## Navigation System

- `goToSlide(n)` — used in TOC links, must match actual `data-slide` numbers
- `totalSlides` is auto-computed from DOM (`document.querySelectorAll('[data-slide]').length`)
- Arrow keys, Space, and touch swipe for navigation
- Slide counter shows `current / total` at bottom-left

## Renumbering Rules

After adding, removing, or reordering slides:
1. Renumber ALL `data-slide` attributes sequentially starting from 1
2. Update all `goToSlide()` calls in the TOC/Journey Map slide
3. The JS `totalSlides` auto-computes — no manual update needed
4. Verify no gaps or duplicates exist

## Section Divider Format

Section dividers use the `section-slide` class. Level-transition section dividers carry `data-level` and show the level name in the description:

```html
<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>
```

The JS will inject a `.level-badge` (e.g., "→ Low") into the `<h1>` at runtime when the level transitions — do not add these manually in HTML.

SKILL.md

raw
元数据
namepresentation-structure
description关于演示文稿幻灯片格式、权重系统、导航和章节结构的知识。

演示文稿结构技能

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

文件位置

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

幻灯片格式

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

html
<!-- 常规幻灯片 — 从上一个 data-level 幻灯片继承级别 -->
<div class="slide" data-slide="12">
    <h1>幻灯片标题</h1>
    <!-- 内容 -->
</div>

<!-- 级别转换幻灯片 — 为当前及后续幻灯片设置新级别 -->
<div class="slide section-slide" data-slide="10" data-level="low">
    <h1>章节名称</h1>
    <p class="section-desc">级别：Low — 本部分说明</p>
</div>

<!-- 标题幻灯片（居中） -->
<div class="slide title-slide" data-slide="1">
    <h1>演示文稿标题</h1>
    <p class="subtitle">副标题文本</p>
</div>

旅程进度条级别系统

该演示文稿使用 4 级系统，而不是累积百分比：

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

各章节的级别转换

部分幻灯片范围data-level进度条高度
第 0 部分：介绍幻灯片 1-4(无)隐藏 / 空
第 1 部分：先决条件幻灯片 5-9(无)空
第 2 部分：更好的提示幻灯片 10-17low25%
第 3 部分：项目记忆幻灯片 18-24medium50%
第 4 部分：结构化工作流幻灯片 25-28(继承 medium)50%
第 5 部分：领域知识幻灯片 29-33high75%
第 6 部分：智能体工程幻灯片 34-46high75%
附录幻灯片 47+(继承 high)75%

导航系统

  • goToSlide(n) — 在目录链接中使用，必须与实际 data-slide 编号匹配
  • totalSlides 从 DOM 自动计算 (document.querySelectorAll('[data-slide]').length)
  • 方向键、空格键和触摸滑动用于导航
  • 幻灯片计数器在左下角显示 当前 / 总数

重新编号规则

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

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

章节分隔页格式

章节分隔页使用 section-slide 类。带有 data-level 的级别转换章节分隔页会在说明中显示级别名称：

html
<div class="slide section-slide" data-slide="10" data-level="low">
    <p class="section-number">第 2 部分</p>
    <h1>更好的提示</h1>
    <p class="section-desc">级别：Low — 有效提示，获得真实结果。</p>
</div>

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