# 基礎版型 220408

以 PDRenderKit 資料綁定渲染的單頁形象網站模板，含模糊背景主視覺、卡片列表、圖示數據、YouTube 嵌入與完整頁尾。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2022-04-08 |
| 分類 | 商業網站範例 |
| HTML 檔案 | `index.html` |
| 原始碼 | [target/20220408](https://github.com/pardnio/demo-web/tree/main/target/20220408) |

## 即時預覽

<iframe src="/target/20220408/" title="基礎版型 220408" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[在新分頁開啟範例](/target/20220408/)

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 頁首主視覺 | 背景圖頁首加深色模糊遮罩；頂列社群圖示（由 data.contact 渲染）與 Contact 信箱按鈕；含下拉子選單與行動版選單鈕的 sticky 導覽列；主標題文章附 Code / GitHub 按鈕。 |
| 文章卡片（區塊 1） | 標題文字加 3 張文章卡（含序號標題、圖示連結、日期、圖片與說明），以 :for 迭代 section_1.item 產生。 |
| 圖示數據帶（區塊 2） | 黑到 steelblue 漸層背景，4 個圖示文字塊（section_2.item）；上緣斜切由 ::before 漸層繪製。 |
| 圖片列表（區塊 3） | 4 張含圖片與連結說明的 figure 卡片（section_3.item）。 |
| 特色卡片（區塊 4） | 背景圖區塊內 4 張圖示特色卡附箭頭連結（section_4.item）。 |
| 文字與影片（區塊 5） | 雙欄：左側文字與兩個按鈕，右側 YouTube iframe 嵌入與說明。 |
| 頁尾 | 模糊背景頁尾：About 與社群圖示、連結列表、聯絡表單（名稱／信箱）、footer.image 產生的 3x3 縮圖格、頁面連結與版權列。 |

## 互動行為

- js/index.js 產生隨機範例資料（fakeimg 圖片、以 PDRenderKit 的 Array.$random 打亂 Font Awesome 圖示名），並掛載 new PD({ id: 'body', data, event, next })。
- event.show / event.close 透過 @click 切換行動版選單的 show class。
- next()：body 捲動監聽，捲動 &gt;= 64px 時對 #top-nav 加上 show（模糊 sticky 導覽列）。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| PDRenderKit | 1.0.2 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.2/dist/PDRenderKit.js |
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| Google Analytics gtag | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans TC (font-family only, not loaded by the page) | - | sass/_init.scss font-family declaration |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `_init.scss`, `_header.scss`, `_section2.scss`, `_section3.scss`, `_section4.scss`, `_section5.scss`, `_section6.scss`, `_footer.scss` |

_init 定義 rem 間距變數（$_1..$_1440）、safe-area env() 變數與 reset；各 _sectionN 對應 body &gt; section:nth-child(N)；html 固定、body 為捲動容器。

```bash
cd target/20220408
npx sass sass/index.scss css/index.css --no-source-map || exit 1
```

## 使用技巧

- PDRenderKit 模板語法：:for="(e, i) in ..."、:class、:href、:src、{{ i }}、@click。
- position: sticky 導覽列，以 class 切換 backdrop-filter 模糊。
- 以 ::before linear-gradient（transparent 49.5% / #fff 50.5%）製作斜切區塊邊緣。
- 行動優先斷點 480 / 640 / 800 / 1024 / 1280（rem 變數），並以 (hover: hover) and (pointer: fine) 限定 hover 效果。
- 頁尾縮圖格使用 aspect-ratio: 1 / 1 與 hover scale(110%)。

## 外部資源

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://www.youtube.com/embed/hvBHWOhPANk`
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20220408.jpg`

## 相關頁面

- [專案結構](/zh/project-structure)
- [樣式工作流程](/zh/styling-workflow)
- [框架使用](/zh/frameworks)