HTML PPT · 课程模块
作为主技能 html-ppt 的聚焦入口，本卡片直接引导用户进入 course-module 完整模板。
何时使用此卡片
示例演示区中的“使用此提示”按钮会链接到上述示例提示。当您接受该提示时，若用户需要完全复制 course-module 的视觉样式（参见上游 完整模板目录 中的截图与说明），则应选择此卡片。
如何编写该演示文稿
- 首先阅读主技能。 所有编写规则均在
design-templates/html-ppt/SKILL.md中列出——内容包括受众清单、Token 规则、布局复用、演讲者模式、键盘运行时以及“禁止在幻灯片上显示仅演讲者可见的文字”规则。 - 从匹配的模板文件夹开始：
design-templates/html-ppt/templates/full-decks/course-module/——将index.html和style.css复制到项目中，保留.tpl-course-modulebody 类。 - 将共享运行时与模板一起引入。 上游的
index.html通过../../../assets/...链接共享 CSS/JS，因为它位于design-templates/html-ppt/templates/full-decks/的三级子目录中。一旦将index.html复制到项目中，这些父级相对 URL 将无法解析，导致base.css、animations.css和runtime.js返回 404 —— 这意味着演示文稿无法激活，幻灯片导航失效。请根据项目选择以下两种方式之一：- 方法 A——复制+重写（推荐）： 将
design-templates/html-ppt/assets/fonts.css、design-templates/html-ppt/assets/base.css、design-templates/html-ppt/assets/animations/animations.css和design-templates/html-ppt/assets/runtime.js复制到项目本地assets/目录下（保持assets/animations/animations.css目录结构），然后将index.html中的四个<link>/<script>标签从../../../assets/...重写为对应的项目本地路径（assets/fonts.css、assets/base.css、assets/animations/animations.css、assets/runtime.js）。 - 方法 B——内联： 读取上述四个文件，将每个
<link rel="stylesheet" href="../../../assets/...">替换为<style>...</style>包含文件内容，将<script src="../../../assets/runtime.js">替换为<script>...</script>包含runtime.js的内容。最终生成一个自包含的index.html文件。 无论采用哪种方式，都不得将上游../../../assets/...URL 原样放入项目产物中——它们仅在树的上下文中有效。
- 方法 A——复制+重写（推荐）： 将
- 选择主题。 默认令牌效果良好；如果用户想要不同的风格，可以将
design-templates/html-ppt/assets/themes/*.css中的 36 个主题之一通过<link id="theme-link">替换，并允许按T键切换。 - 替换示例内容，不要替换类名。
.tpl-course-module作用域 CSS 仅识别模板中自带的结构类名——请保留它们。 - 演讲者笔记放在
<aside class="notes">或<div class="notes">中 —— 绝不能作为可见文本出现在幻灯片上。
版权声明
视觉系统、布局、主题及运行时键盘模型均来自上游 MIT 许可的 lewislulu/html-ppt-skill。许可证文件位于 design-templates/html-ppt/LICENSE；在分发时请保留该文件。