# 基礎版型 220412

紅色主題 PDWebsitemplate 模組靜態頁（T003、C012、C010、C008、C011、B003）：聯絡資訊頁首、日期文章、人物卡、圖庫與頁尾。

## 概要

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

## 即時預覽

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

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| T003 頁首、導覽與主視覺 | 背景圖頁首：品牌區、GitHub / Email 聯絡資訊、含 hover 下拉（LIST）的導覽列，接主視覺文字與 Code / Github 按鈕。 |
| C012 日期文章 | 兩則文章，含日期標記（01 / 一月）、資訊列（作者／群組／標籤）、標題、摘要、MORE 連結與「My Page」按鈕。 |
| C010 人物卡 | var(--col-sys) 背景上的 4 張卡（圖片、名稱、職稱、內文）。 |
| C008 圖庫 | 4 欄共 8 張 figure 卡，附說明標題與內文。 |
| C011 圖示特色 | var(--col-hint) 背景上 4 個圖示＋標題＋內文項目。 |
| B003 頁尾 | 頂部社群圖示列，下方 4 欄：BC004 3x3 模板縮圖、BC006 連結與日期列表、BC002 GitHub 連結、BC003 聯絡表單（名稱／信箱＋送出），最後版權列。 |

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| 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 | `_PDModuleTop.scss (top/_T-001, _T-002, _T-003, _T004)`, `_PDModuleColum.scss (colum/_C001..._C019)`, `_PDModuleBottom.scss (bottom/_B001-_B003, _BC001-_BC006)`, `_PDModuleAnimation.scss`, `_PDModuleComp.scss (comp/_a[btn], _dev.a[shadow], _div[bg], _img[ic], _to, _wh)` |

與 20220409 相同的模組庫（reset 直接寫在入口檔，無 _init / function 引入）；各模組以 div[sn=XXXX] 為範圍，頁面僅使用 6 個。

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

## 使用技巧

- 屬性驅動模組系統：sn 模組代號、df="x2/x4" 欄格、df="btn col fff xxl" 按鈕、wh="1" 圖框、df="bg" 背景區塊。
- inline &lt;style&gt; 於 * 設定 CSS 變數：紅色 --col-sys rgb(200,30,60)、--col-sys-light/hint/dark、--max-width 1140px、--default-radius 0.5rem、--module-hint 1（顯示模組標籤）。
- 桌面優先 max-width 斷點（479 / 639 / 767 / 1023px），pointer-fine hover 搭配 keyframe 顏色過場；純 CSS hover 下拉選單。

## 外部資源

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20220412.jpg`
- ../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) and url(../image/bg-m.svg) resolve to &lt;folder&gt;/icon and &lt;folder&gt;/image, which do not exist (the [wh] hover overlay icon will 404; bg-l.svg is overridden by inline background-image). No other path depends on the host.

## 相關頁面

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