# 基礎版型 220413

紫色主題 PDWebsitemplate 頁面（T004、C020-C024、B004），新增全螢幕行動選單、響應式 w_* 格線與純 CSS 百分比圓餅圖。

## 概要

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

## 即時預覽

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

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| T004 頁首、導覽、主視覺 | 背景圖區塊：頂列含首頁／部落格／商店圖示與 GitHub / Email；導覽列含標題、展開按鈕、項目與 LIST 下拉、HIDE 收合鈕；主視覺文章附 Code / Github 按鈕。 |
| C023 圖片卡 | w_3_2_1 格線中 6 張陰影卡，含圖片與說明＋箭頭圖示。 |
| C021 圖示特色 | 背景圖區塊，4 個圖示＋標題＋內文項目（w_4_2_1）。 |
| C022 圓餅圖 | 4 個圓形百分比圖（percent=0/30/60/90）附 MORE 按鈕。 |
| C020 文字卡 | 背景圖區塊，6 張文章卡各搭配圖示連結（w_3_2_1）。 |
| C024 行動呼籲 | 紫色色帶，標題與「My Page」按鈕。 |
| B004 頁尾 | 社群聯絡列（Instagram / GitHub），下方 4 欄 BC006 / BC002 / BC003 聯絡表單 / BC004 縮圖，最後版權列。 |

## 互動行為

- T004 導覽列 inline script：#btn-nav-show 對 T004 區塊加 show 並鎖定 body 捲動；#btn-nav-collaspe 加上 collaspe，300ms 後移除它與 show 並恢復捲動（搭配 T004-nav-show / T004-nav-collaspe keyframes）。
- 資料夾內有 js/PDWebsitemplate.js（IntersectionObserver 的 hover／點擊 act 與 unhover 輔助），但 index.html 並未載入。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| Noto Sans TC (Google Fonts) | wght 100;300;400;500;700;900 | https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&amp;display=swap |
| Google Analytics gtag | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/PDWebsitemplate.js (local, not referenced) | - | js/PDWebsitemplate.js |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/PDWebsitemplate.min.scss` |
| 輸出 CSS | `css/PDWebsitemplate.min.css` |
| Partials | `_PDTop.scss (top/_T001-_T004)`, `_PDColum.scss (w_* grid rules + colum/_C001..._C024)`, `_PDBottom.scss (bottom/_B001-_B004, _BC001-_BC006)`, `_PDAnimation.scss`, `_PDComp.scss (comp/_a[btn], _dev.a[shadow], _div[bg], _img[ic], _to, _wh)` |

模組庫改名為 _PD*.scss；_PDColum 新增 ul.resize[df=w_2 / w_3_2_1 / w_4_2 / w_4_2_1 / w_5_3_2] 響應式欄寬；C022 以 Sass @for 產生 percent="1..100" 規則。

```bash
cd target/20220413
npx sass sass/PDWebsitemplate.min.scss css/PDWebsitemplate.min.css --no-source-map || exit 1
```

## 使用技巧

- 純 CSS 圓餅圖：依 percent 屬性以 calc(3.6deg * N) 旋轉兩個半圓層，數值以 content: attr(percent) 顯示。
- 響應式欄位命名 df="w_3_2_1" = 各斷點 3 / 2 / 1 欄，寬度為 calc(100% / n - 2rem)。
- inline &lt;style&gt; 於 * 設定主題變數：--col-sys rgb(185,120,200)、--default-radius 1rem、--max-width 1140px、--module-hint 1。
- 全螢幕行動選單，keyframe 展開／收合動畫並鎖定 body 捲動。

## 外部資源

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://fakeimg.pl/1024/282828/000000/?text=sample`
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20220413.jpg`
- / and /blog (root-absolute header icon links)
- ../icon/watch/1/fff.svg, ../image/bg-l.svg, ../image/bg-m.svg (referenced by compiled CSS, not present in the folder)

## 已知問題

- Header icon links href="/" and href="/blog" are root-absolute and go to the host site root instead of the example. CSS url(../icon/watch/1/fff.svg), url(../image/bg-l.svg), url(../image/bg-m.svg) point to folders that do not exist in 20220413.

## 相關頁面

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