內容網站（衛教、成果報告、教材）

適用：內容比「一個工具」多，要分好幾頁的網站——一個科的衛教單張集、研究成果報告、案例研討、工作坊教材。

只放內容、不存資料；要讓人填東西改用 form-app 或 staff-survey。只有一頁的小工具用 static-app 就好。

先問清楚

誰要看？病人、家屬、民眾要看 → public（正式版會被搜尋引擎收錄，內容要能公開）；只給同仁 → hospital。

用白話單獨問一句（llms.txt §4.55）。

內容從哪裡來、誰審？衛教與醫療內容由使用者提供，你只排版；每頁頁尾要寫「審閱單位、最後審閱日」。

要上網找資料當參考，照 llms.txt §2 先問他、查到的先唸給他確認。

有沒有病人的照片、影像、病例？有的話停下來：真實病例不能上平台。案例研討用假資料，照 synthetic-data skill。

照片裡有病人的臉、手圈、床頭卡、病歷畫面都算——檢核看不到圖片內容，只會提醒「圖片沒有被掃描」，所以要你和他一起確認。

檔案怎麼放

index.html          首頁：網站在講什麼、目錄
fasting.html        一個主題一頁（上線後網址 /fasting 也打得開）
diabetes/index.html 也可以用資料夾
404.html            找不到頁面時顯示的頁面（建議放）
css/site.css        所有頁面共用的樣式
img/                圖片（先壓縮，見下面）
audio/              音檔
files/              給人下載的 PDF

連結一律寫檔名：href="fasting.html"、href="index.html"、href="diabetes/index.html"。

上線後 /fasting 也打得開，但使用者在自己電腦上直接開檔案預覽時，只有寫檔名的連結點得動。

每一頁都是完整的 HTML，導覽列直接寫在每一頁裡（不要用 JavaScript 組頁面——搜尋引擎、列印、慢的網路都比較好）。頁數多時，改導覽列請一次改全部的頁。
東西只能從這個資料夾或平台載入：外部網址的圖片、字型、CDN、YouTube、Google 簡報上線後都會被擋（llms.txt §2「應用的檔案」）。中文字型用平台書架的 noto-sans-tc（黑體）、noto-serif-tc（明體）。

要用套件（看圖、輪播、PDF）先用平台提供的（llms.txt §4.9），不要從 CDN 載入。

整個資料夾壓縮後不能超過 50 MB。照片先縮到寬 1600px 以內、存成 WebP 或品質 80 的 JPEG（一張約 100–300 KB）；

音檔用 MP3 64–128 kbps（一分鐘約 0.5–1 MB）；影片很快就用完預算，能不放就不放。

頁面標題（<title>）與第一段說明，每一頁寫不一樣的——那是搜尋結果與分享時看到的字。

圖片、音檔、PDF

圖片：<img src="img/fasting.webp" alt="空腹時可以喝白開水的示意圖" width="800" height="600" loading="lazy">。

alt 寫圖片在說什麼（給看不到圖的人與報讀軟體）。

音檔：<audio controls preload="none" src="audio/intro.mp3"></audio>，旁邊附文字稿（聽不到的人也能看）。
PDF：用連結在新分頁打開：<a href="files/guide.pdf" target="_blank" rel="noopener">下載衛教單（PDF，320 KB）</a>。

不能用 `<iframe>`、`<embed>`、`<object>` 把 PDF 嵌在頁面裡——上線後三個都會被擋，頁面只剩備用文字（2026-10-13 實跑：用了 <object>，頁面裡看不到 PDF）。

要在頁面裡直接翻閱，只能用平台的 pdf.js，照下面這段寫（cMapUrl 一定要給，不然中文缺字）：

```html

import * as pdfjsLib from 'https://platform.wanfangai.tw/lib/pdfjs@6.4.299/pdf.min.mjs';

const B = 'https://platform.wanfangai.tw/lib/pdfjs@6.4.299/';

pdfjsLib.GlobalWorkerOptions.workerSrc = B + 'pdf.worker.min.mjs';

const doc = await pdfjsLib.getDocument({ url: 'files/guide.pdf', cMapUrl: B + 'cmaps/', cMapPacked: true,

standardFontDataUrl: B + 'standard_fonts/', wasmUrl: B + 'wasm/' }).promise;

let n = 1;

async function show() {

const page = await doc.getPage(n);

const viewport = page.getViewport({ scale: 1.5 });

const canvas = document.getElementById('page');

canvas.width = viewport.width; canvas.height = viewport.height; canvas.style.maxWidth = '100%';

await page.render({ canvasContext: canvas.getContext('2d'), viewport, canvas }).promise;

document.getElementById('num').textContent = n + ' / ' + doc.numPages;

}

document.getElementById('prev').onclick = () => { if (n > 1) { n--; show(); } };

document.getElementById('next').onclick = () => { if (n < doc.numPages) { n++; show(); } };

show();

</script>

```

主控台有一條 worker-src 的訊息是正常的（pdf.js 自動改在頁面裡處理）。旁邊仍放「在新分頁開啟／下載」的連結。PDF 的內容檢核看不到，裡面不能有病人資料。

很多張照片要讓人放大看：用平台的 viewer.js；要輪播：用平台的 Swiper（版本看 /lib/index.json）。
簡報要放進來：從 PowerPoint 匯出成圖片放進頁面，或用 html-slides skill 做成網頁簡報。
圖表（成果報告的指標、趨勢）：照 chart-dashboard 做法用平台的 Chart.js（wanfangai_read_skill，name: chart-dashboard），不要用 CSS 自己畫長條——

要加座標軸、圖例、提示框時才不會重寫。

要 3D 模型：照 three-d 做法。

列印與手機

手機優先：文字至少 16px、行距 1.6 以上、一行不要太長（max-width: 40em）。
加一段列印樣式，讓病人可以印出來帶走：

```css

@media print { nav, .no-print { display: none; } body { font-size: 12pt; } a[href^="http"]::after { content: " (" attr(href) ")"; } }

```

要 QR code 貼海報：發佈後請他到應用管理頁按「下載 QR code」，不要自己產生（llms.txt §4.55）。

骨架（每一頁都長這樣）

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>抽血前要空腹嗎？｜檢驗科衛教</title>
  <meta name="description" content="抽血前要不要空腹、可以喝水嗎、藥要不要停——檢驗科整理的說明。">
  <link rel="stylesheet" href="css/site.css">
</head>
<body>
  <header>
    <a href="index.html">檢驗科衛教</a>
    <nav aria-label="主題">
      <a href="fasting.html">抽血前準備</a>
      <a href="urine.html">尿液檢體</a>
    </nav>
  </header>
  <main>
    <h1>抽血前要空腹嗎？</h1>
    <p>（內容由檢驗科提供）</p>
  </main>
  <footer>
    <p>審閱單位：檢驗科｜最後審閱：2026-10-01｜如有疑問請洽檢驗科櫃台。</p>
  </footer>
</body>
</html>

發佈前檢查

每一頁都有不同的 <title>、頁尾有審閱單位與日期；導覽列在每一頁都一樣。
沒有任何 http://、外部網址的圖片／字型／script、<iframe>。
檢核出現「圖片、音檔、影片沒有被掃描」的提醒時，照實告訴他，請他確認圖片裡沒有病人，記下他的回答（llms.txt §4）。
發佈試用版後，請他在手機上點過每一頁、試一次列印預覽。
說「做好了」之前：每一個功能（PDF 翻頁、圖片放大、錄音播放、圖表）你要親眼確認過——能開瀏覽器就打開試用版點一次。

確認不了的，不要說它已經可以用，改成「請你打開確認：PDF 能不能翻頁、圖片能不能放大」，並說明你還沒看到。

content-site