生产力
presentation-structure avatar

presentation-structure

项目单文件 HTML/CSS/JS 演示系统的技术规格与结构指南。

简介

presentation-structure 技能提供了管理、编辑与导航位于 presentation/index.html 演示文稿所需的权威知识。该系统被设计为一个包含内嵌 CSS 与 JavaScript 的单文件 HTML 文档,专为技术演示和 Agentic 工程工作流程而优化。它服务于需要维护互动幻灯片并跟踪四级进度条系统的开发人员和技术主管。用户可以利用此技能确保在重新排序幻灯片、更新导航或修改章节过渡时的一致性。

  • 定义了使用 data-slide 属性进行排序以及 data-level 属性进行内容分类的幻灯片结构规范。

  • 实现了将特定幻灯片范围映射到定义等级(Low, Medium, High, Pro)的进度条系统,包含 25%、50%、75% 和 100% 的进度指示。

  • 标准化了使用 section-slide 类的章节分隔页,确保等级过渡说明能在无需硬编码样式的情况下被正确处理。

  • 提供了可靠的幻灯片重新编号逻辑、更新 goToSlide 调用,以及通过 DOM 注入管理 totalSlides 计算的方法。

  • 支持键盘箭头导航、触摸滑动和自动计算的进度跟踪功能,无需持续手动更新 DOM。

  • 在添加、删除或重新排序幻灯片时,务必对所有 data-slide 属性从 1 开始进行完整重新编号,以避免序列间隙。

  • 请勿在 HTML 中硬编码等级徽章(level-badge);应依赖提供的 JavaScript 在运行时将 .level-badge 元素动态注入到幻灯片的 h1 标签中。

  • 在任何内容结构调整后,务必检查并更新 TOC/Journey Map 幻灯片中的 goToSlide 函数调用,以符合新的索引编号。

  • 严格遵守文件中定义的章节范围,以确保进度条能准确反映预期的深度(从 Part 0 到 Appendix)。

  • 使用提供的过渡幻灯片模板来处理章节中断,以维持 section-number 和 section-desc 元素的正确样式。

仓库统计

Star 数
49,662
Fork 数
4,944
Open Issue 数
14
主要语言
HTML
默认分支
main
同步状态
空闲
最近同步时间
2026年4月30日 10:43
在 GitHub 查看