可直接部署運行的程式碼應用程式
包含多個作品或教學內容的系列精彩作品
單個設計資源、模板或素材精彩作品
入口與資源路徑
index.html
main.js
./assets/…
./
PNG/WebP/JPEG
node_modules
常見框架打包指令(輸出需能離線開啟)
Vite(React/Vue/Svelte)
# vite.config.{ts,js} export default { base: './' } npm run build # 輸出:dist/(含 index.html、assets/...) # 將 dist/ 壓成 zip 上傳
React(CRA)
npm run build # 輸出:build/(index.html、static/...) # 將 build/ 壓成 zip 上傳
Next.js(需靜態匯出)
// next.config.mjs export default { output: 'export' } npm run build && npm run export # 輸出:out/(index.html、_next/...) # 將 out/ 壓成 zip 上傳
SvelteKit(靜態)
// svelte.config.js import adapter from '@sveltejs/adapter-static'; export default { kit: { adapter: adapter() } }; npm run build # 輸出:build/ 或 .svelte-kit/output/static # 壓成 zip 上傳
Angular
ng build --base-href ./ # 輸出:dist/<project>/ # 將該資料夾壓成 zip 上傳
原生 HTML / JS
index.html main.js assets/ # 以相對路徑 ./ 引用 # 打包整個資料夾為 zip 上傳
打包後 Zip 目錄建議長相
my-tool.zip └─ (root) ├─ index.html # 建議入口 ├─ main.js # 若無 index.html,則需此入口 ├─ assets/ │ ├─ styles.css │ └─ logo.png └─ ... 其它以相對路徑可載入之資源
#/settings
id="CreditButton"
平台前端會在工具載入後尋找 document.getElementById('CreditButton'),接管點擊事件完成「扣點 → 解鎖/續期/使用」流程。
document.getElementById('CreditButton')
最小可用 HTML 範例
<button id="CreditButton">立即使用</button>
請確保頁面上僅有一個相同 id;若需多顆按鈕,讓其他按鈕觸發此主按鈕的 click。
框架內(React/Vue/Svelte)
// React JSX <button id="CreditButton" className="btn">立即使用</button> // Vue / Svelte 同理,只需渲染出 <button id="CreditButton">
CreditButton
點擊或拖曳上傳 ZIP 檔案
支援: ZIP 檔案或 HTML, CSS, JS, JSX, TS, TSX, JSON, MD(可多檔,上傳 ZIP 非必填) 請將zip檔案名稱命名為 dist.zip
上傳封面圖片
建議尺寸: 1920x1080 像素
上傳應用程式或精彩作品圖示
建議尺寸: 512x512 像素 (正方形)
上傳作品截圖或展示圖片
例如: AI, 圖片編輯, 工具
僅允許小寫英數字與連字號,長度 3-100 字元