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-module的 body 類別。 - 將共用執行環境與範本一同帶入。 上游的
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 — 複製並重寫（建議）： 複製
- 選擇主題。 預設的 token 效果已經不錯；如果使用者想要不同的
風格，可以從
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；在重新發布時請予以保留。