生產力
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 查看