# 基礎版型 220418

橘色主題 PDWebsitemplate 頁面（T005、C025-C029、B001），導入 resize _3 搭配 _768 等屬性式斷點欄數。

## 概要

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

## 即時預覽

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

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| T005 頁首、導覽、主視覺 | 空的固定 &lt;nav id="nav-top"&gt;，其下為背景圖區塊：圖示頂列（首頁／部落格／商店、GitHub / Email）、含展開／HIDE 按鈕與 LIST 下拉的導覽列，以及附 Code / Github 按鈕的主視覺文章。 |
| C026 圖示卡 | 6 張圖示＋標題＋內文＋MORE 卡，3 / 2 / 1 欄（_768="2" _640="1"）。 |
| C027 編號列表＋圖片 | 背景圖區塊加深色遮罩，文字、4 個編號連結（2 / 1 欄）與一張圖片。 |
| C028 文字＋圖片格 | 介紹文字區塊後接 6 張圖片格。 |
| C029 圖示連結特色 | 背景圖區塊，4 個連到 joball.tw 頁面的圖示 figure，各含標題與內文。 |
| C025 社群聯絡 | var(--col-sys-dark) 背景上的 Instagram / GitHub 聯絡項目。 |
| B001 頁尾 | 3 欄 BC001 介紹／BC005 連結與社群圖示／BC002 連結列表，版權列。 |

## 互動行為

- #nav 內 inline script：#btn-nav-show 對 T005 區塊的前一個兄弟（#nav-top，從 top: -4rem 滑入的固定列）加 show 並鎖定 body 捲動；#btn-nav-collaspe 對 #nav 加 collaspe，300ms 後移除 T005 區塊的 show 並恢復捲動。#nav-top 在標記中沒有內容。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| 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 |

## 樣式

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

入口開頭有 @import url("./fontawesome/css/all.css")，該路徑不存在且未出現在編譯後 CSS。_PDColum 定義 ul.resize 搭配 _1024 / _768 / _640 / _480 / _414 欄數屬性。

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

## 使用技巧

- 屬性式斷點：class="resize _3" 搭配 _768="2" _640="1" _480="1" 依 max-width 斷點設定欄數。
- inline &lt;style&gt; 於 * 設定主題變數：橘色 --col-sys rgba(255,150,60)、--col-sys-dark rgb(195,90,0)、--max-width 1140px、--module-hint 1。
- 固定頂列使用 backdrop-filter 模糊與 T005-nav-top-show / -hide keyframes；max-width 斷點 479 / 639 / 767 / 1139px。

## 外部資源

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20220418.jpg`
- https://joball.tw, /album, /case, /post (C029 links)
- ../icon/watch/1/fff.svg, ../image/bg-l.svg, ../image/bg-m.svg (referenced by compiled CSS, not present in the folder)

## 已知問題

- CSS url(../icon/watch/1/fff.svg), url(../image/bg-l.svg), url(../image/bg-m.svg) point to &lt;folder&gt;/icon and &lt;folder&gt;/image, which do not exist. Links are otherwise relative or absolute URLs.

## 相關頁面

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