基礎版型 220408

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

概要

區塊	說明
頁首主視覺	背景圖頁首加深色模糊遮罩；頂列社群圖示（由 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 捲動監聽，捲動 >= 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 > section:nth-child(N)；html 固定、body 為捲動容器。

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%)。