適用：使用者想要「簡報」「投影片」「可以播放的教材」，而且要用網址分享——工作坊講義、在職教育、案例研討、單位報告。
一張投影片是一個 <section>；鍵盤、滑鼠、手機滑動都能翻頁，按 F 全螢幕，列印時一張一頁。不存資料。
先講清楚
- 不能把現成的 PowerPoint、Google 簡報、YouTube 嵌進來：上線後內嵌別的網站會被擋（llms.txt §2「應用的檔案」）。
他已經有 PowerPoint：請他在 PowerPoint「匯出 → 變更檔案類型 → PNG」，把每張圖放進 img/，一張圖一個 <section>；
或把文字貼給你，重新排成網頁簡報（之後改字比較方便）。
- 影片很吃空間（整個資料夾壓縮後不能超過 50 MB）：能用圖片與文字講清楚就不放影片。
- 案例研討裡的病例要用假資料（
synthetic-dataskill）；圖片裡不能有病人。 - 開放程度單獨問一句（llms.txt §4.55）：工作坊學員是同仁 →
hospital；要放上公開的專欄 →public。
做法
archetype: A，data.collects: []，skills_used: [html-slides]。- 預設用下面的骨架：不靠任何套件，所有東西都在這個資料夾裡，最不容易壞。
需要轉場動畫、自動縮放、Markdown 寫投影片這類功能，再用平台提供的 reveal.js（llms.txt §4.9 有引用寫法；版本看
https://platform.wanfangai.tw/lib/index.json）。只用 white、black 兩個主題（其他主題會去 Google 載字型，被擋）；
reveal.js 的講者備註視窗要內嵌頁面，平台不允許，用骨架的「列印講義」代替。不要從 CDN 載入。
- 每張投影片：一個標題、最多 5 行重點、字夠大（內文至少 28px）。細節放「講者備註」（骨架裡
<aside class="notes">，播放時不顯示、列印講義時會印出來）。 - 網址後面帶
#5會直接開第 5 張，方便課堂上指定頁。 - 列印：瀏覽器列印就是講義，一張投影片一頁、附講者備註。請他用「列印 → 另存 PDF」就有 PDF 版。
骨架
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>抽血前準備：在職教育</title>
<style>
html, body { margin: 0; height: 100%; background: #111; font-family: system-ui, sans-serif; }
section { display: none; box-sizing: border-box; width: 100vw; height: 100vh; padding: 6vh 8vw;
background: #fff; color: #222; font-size: clamp(18px, 3.2vw, 34px); line-height: 1.5; }
section.active { display: flex; flex-direction: column; justify-content: center; }
section h2 { font-size: 1.6em; margin: 0 0 0.6em; }
section img { max-width: 100%; max-height: 60vh; object-fit: contain; }
aside.notes { display: none; }
#bar { position: fixed; bottom: 0; left: 0; height: 4px; background: #2a7; transition: width .2s; }
#nav { position: fixed; bottom: 10px; right: 14px; color: #888; font-size: 14px; }
@media print {
body { background: #fff; }
section { display: block !important; height: auto; min-height: 0; page-break-after: always; padding: 1.5cm; font-size: 18pt; }
aside.notes { display: block; font-size: 11pt; color: #444; border-top: 1px solid #ccc; margin-top: 1em; padding-top: .5em; }
#bar, #nav { display: none; }
}
</style>
</head>
<body>
<section>
<h2>抽血前準備</h2>
<p>檢驗科在職教育・2026-10</p>
<aside class="notes">開場：今天講三件事。</aside>
</section>
<section>
<h2>要空腹嗎？</h2>
<ul><li>（重點一）</li><li>（重點二）</li></ul>
<aside class="notes">（講者備註）</aside>
</section>
<div id="bar"></div>
<div id="nav"></div>
<script>
const slides = [...document.querySelectorAll('section')];
let i = 0;
function go(n) {
i = Math.max(0, Math.min(slides.length - 1, n));
slides.forEach((s, k) => s.classList.toggle('active', k === i));
document.getElementById('bar').style.width = `${((i + 1) / slides.length) * 100}%`;
document.getElementById('nav').textContent = `${i + 1} / ${slides.length}`;
history.replaceState(null, '', `#${i + 1}`);
}
document.addEventListener('keydown', (e) => {
if (['ArrowRight', 'PageDown', ' ', 'Enter'].includes(e.key)) go(i + 1);
else if (['ArrowLeft', 'PageUp', 'Backspace'].includes(e.key)) go(i - 1);
else if (e.key === 'Home') go(0);
else if (e.key === 'End') go(slides.length - 1);
else if (e.key === 'f' || e.key === 'F') document.documentElement.requestFullscreen?.();
});
document.addEventListener('click', (e) => go(e.clientX > innerWidth / 3 ? i + 1 : i - 1));
let startX = null;
document.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; });
document.addEventListener('touchend', (e) => {
if (startX === null) return;
const dx = e.changedTouches[0].clientX - startX;
if (Math.abs(dx) > 40) go(dx < 0 ? i + 1 : i - 1);
startX = null;
});
go(Number(location.hash.slice(1)) - 1 || 0);
</script>
</body>
</html>發佈前檢查
- 每張投影片字夠大、最多 5 行；圖片都在
img/裡、已壓縮。 - 沒有
<iframe>、沒有外部網址的圖片或影片。 - 檢核出現「圖片、音檔、影片沒有被掃描」的提醒時，照實告訴他，請他確認圖片裡沒有病人（llms.txt §4）。
- 發佈試用版後，請他在要上課的那台電腦上按 F 全螢幕播一次，也在手機上滑一次。