平台套件
圖表、PDF、簡報、3D、搜尋、中文字型這些,平台已經準備好了。 院內的工具不能從外部網站載入(CDN、Google Fonts 都會被擋),要用就用這裡的。
你不用記這些:跟 AI 助手說你想做什麼,它會查這份清單、照這裡的網址載入。這一頁讓你知道有哪些可以用。
chart.js
版本 4.5.1圖表(折線、長條、圓餅…)
要把數字畫成圖:每月統計、問卷結果、品管趨勢。大多數圖表先用這個
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/chart.js@4.5.1/chart.umd.min.jsecharts
版本 6.1.0圖表(常用類型的精簡版,儀表板)
圖很多、要互動(縮放、切換)的儀表板;一般的折線長條用 chart.js 就好
載入的網址授權:Apache-2.0https://platform.wanfangai.tw/lib/echarts@6.1.0/echarts.common.min.jspdfjs
版本 6.4.299在頁面裡顯示 PDF
要在頁面裡翻閱 PDF(不能用 iframe、embed、object 嵌,會被擋)
載入的網址授權:Apache-2.0https://platform.wanfangai.tw/lib/pdfjs@6.4.299/pdf.min.mjsreveal.js
版本 6.0.2網頁簡報
做網頁簡報:上課全螢幕播、左右鍵翻頁(PowerPoint 檔不能直接放)
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/reveal.js@6.0.2/reveal.jshttps://platform.wanfangai.tw/lib/reveal.js@6.0.2/reveal.cssthree
版本 0.186.13D(ES module,要 import map)
可以轉動、縮放的 3D 模型(解剖位置、器材構造);Unity、WebAssembly 不行
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/three@0.186.1/three.module.jsswiper
版本 14.3.0圖片輪播
一組圖片左右滑著看:衛教圖卡、環境介紹
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/swiper@14.3.0/swiper-bundle.min.jshttps://platform.wanfangai.tw/lib/swiper@14.3.0/swiper-bundle.min.cssviewerjs
版本 1.15.2看圖(放大、旋轉)
圖片要能點開放大、旋轉:流程圖、示意圖、教學影像
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/viewerjs@1.15.2/viewer.min.jshttps://platform.wanfangai.tw/lib/viewerjs@1.15.2/viewer.min.cssmarked
版本 18.0.14Markdown 轉網頁(要配 dompurify)
內容寫成 Markdown 要顯示成網頁;一定要配 dompurify
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/marked@18.0.14/marked.umd.jsdompurify
版本 3.4.16清掉 HTML 裡會執行的東西
要把使用者輸入或 Markdown 轉出的 HTML 放進頁面之前先清乾淨(防 XSS)
載入的網址授權:(MPL-2.0 OR Apache-2.0)https://platform.wanfangai.tw/lib/dompurify@3.4.16/purify.min.jsfuse.js
版本 7.5.0模糊搜尋(常見問題)
打錯字也找得到的搜尋:常見問題、查詢頁
載入的網址授權:Apache-2.0https://platform.wanfangai.tw/lib/fuse.js@7.5.0/fuse.min.mjspapaparse
版本 5.7.0讀 CSV
要讀使用者貼上或選的 CSV(例如從 Excel 另存的表)
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/papaparse@5.7.0/papaparse.min.jsalpinejs-csp
版本 3.17.4在 HTML 上加互動(CSP 版)
頁面上要一點互動(展開收合、切換分頁、簡單表單),又不想寫很多 JavaScript
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/alpinejs-csp@3.17.4/cdn.min.jspico
版本 2.1.1不用寫 class 的基本樣式
不寫 class 就有乾淨的基本樣式:單頁工具、表單
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/pico@2.1.1/css/pico.min.cssbootstrap
版本 5.3.8版面與元件樣式
要現成的版面格線與元件(按鈕、表格、對話框)
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/bootstrap@5.3.8/css/bootstrap.min.csshttps://platform.wanfangai.tw/lib/bootstrap@5.3.8/js/bootstrap.bundle.min.jsnoto-sans-tc
版本 5.3.1中文黑體(Noto Sans TC):400 一般、500 中粗、700 粗
頁面要好看一致的中文字型;原本連 Google Fonts 的 Noto Sans TC 改用這個(Google Fonts 會被擋)。只會下載頁面用到的字
載入的網址授權:OFL-1.1https://platform.wanfangai.tw/lib/noto-sans-tc@5.3.1/400.csshttps://platform.wanfangai.tw/lib/noto-sans-tc@5.3.1/500.csshttps://platform.wanfangai.tw/lib/noto-sans-tc@5.3.1/700.cssnoto-serif-tc
版本 5.3.1中文明體(Noto Serif TC):400 一般、700 粗
公告、證書、正式文件這類要明體的頁面;原本連 Google Fonts 的 Noto Serif TC 改用這個。只會下載頁面用到的字
載入的網址授權:OFL-1.1https://platform.wanfangai.tw/lib/noto-serif-tc@5.3.1/400.csshttps://platform.wanfangai.tw/lib/noto-serif-tc@5.3.1/700.cssqrcode-generator
版本 2.0.4產生 QR code(畫在 canvas 或輸出成 SVG/圖片)
把網址做成 QR code 給人用手機掃:上課的加入連結、海報、衛教單張。授權寫在檔案開頭(MIT)
載入的網址授權:MIThttps://platform.wanfangai.tw/lib/qrcode-generator@2.0.4/qrcode.js