健身房介紹
健身房形象網站，以 PDRenderKit 1.5.2 PD 資料綁定組合 view/*.html，搭配 IntersectionObserver 捲動進場。
概要
| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-06-19 |
| 最後更新 | 2024-08-03 |
| 分類 | 商業網站範例 |
| HTML 檔案 | index.html, view/header.html, view/child3.html, view/child4.html, view/child5.html, view/child6.html, view/child7.html, view/child8.html, view/child9.html |
| 原始碼 | target/20230619 |
即時預覽
頁面區塊
| 區塊 | 說明 |
|---|---|
| 導覽列 | sticky 導覽列，{{ navTitle }} 標題、以 :for 渲染 navTarget 標籤與選單按鈕；項目與按鈕皆無點擊行為。 |
| 主視覺（view/header.html） | 健身照片全幅背景與漸層面板，標題、內文、GitHub/LinkedIn 按鈕與 Freepik 圖片來源。 |
| 特色（view/child3.html） | 標題、以 :for 渲染 3 個圖示文章（啞鈴、單車）與背景圖區塊（image/image 1.png）。 |
| 介紹與圖片（view/child4.html） | 文字與 GitHub/LinkedIn 連結，旁為 :for 渲染的 4 張照片。 |
| 重點清單（view/child5.html） | 3 段勾選圖示文字搭配一張照片。 |
| 課程卡片（view/child6.html） | 色帶上的 3 張卡片，含圖片、標題、內文與 LEARN MORE。 |
| 重點介紹（view/child7.html） | 大圖與位移陰影、標題、提示、段落與 CONTACT US 按鈕。 |
| 照片牆（view/child8.html） | 標題、段落與 :for 渲染的 6 張照片格。 |
| 聯絡（view/child9.html） | 以 :model 綁定的表單（名稱、信箱、訊息）與 @click=send 送出、照片，以及 :html 渲染的 3 個資訊（電話、地址、營業時間）。 |
| 頁尾 | 版權與 :for 渲染的社群圖示（GitHub、LinkedIn）。 |
互動行為
- js/index.js（module）：new PD({id: "app", data, next}) 渲染頁面；每個 view/*.html 內含自己的 inline script 為該區塊 id 建立 PD 實例。
- 捲動進場：next() 中延遲 300ms + 300ms 後以 IntersectionObserver 監看所有 *.delay，進入視窗即移除 delay class（elm.class_("delay")），由 CSS transition 呈現。
- view/child9.html：event.send 以 alert 顯示 :model 綁定的名稱、信箱與訊息。
- 原始碼中未綁定的屬性：child8 href="item.freepik"、child9 class="item.fa" 與 href="freepik" 為字面字串，非綁定。
相依資源
| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit | 1.5.2 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.5.2/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/index.js | - | ./js/index.js (type=module) |
| Noto Sans TC (font-family only, not loaded by the page) | - | none |
樣式
| 項目 | 內容 |
|---|---|
| SCSS 入口 | sass/index.scss |
| 輸出 CSS | css/index.css |
| Partials | _section-3.scss, _section-4.scss, _section-5.scss, _section-6.scss, _section-7.scss, _section-8.scss, _section-9.scss, animation/_section-3.scss, animation/_bg-move.scss |
index.scss：:root safe-area env() 變數、--width-max 1024px、--bgcolor、reset、sticky 導覽、header 漸層面板與階梯式 transition、頁尾；_section-3.._section-9 對應 child3..child9，定義 .delay 起始狀態（位移／透明）。animation/_section-3 全部註解，animation/_bg-move 未被 import。多個 partial 使用 --col-brand-5 但從未定義。
cd target/20230619
npx sass sass/index.scss css/index.css --no-source-map || exit 1
使用技巧
- PDRenderKit PD 模板：section/header 上的 :path 片段載入、:for、:class / :src / :href 綁定、{{ }} 插值、:model 雙向輸入、:html、@click 事件。
- 以 IntersectionObserver 移除 .delay class 搭配 CSS transition 做進場動畫。
- env(safe-area-inset-*) CSS 變數；position: sticky 導覽；位移 box-shadow；斷點 480/640/800/1024px。
外部資源
- https://www.freepik.com/... (image credit links)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230619.jpg (og/twitter image)
