基礎版型 230312
產品目錄形象頁：搜尋主視覺、四欄產品網格、客製網站聯絡列與三欄產品詳細卡片。
概要
| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-03-12 |
| 分類 | 商業網站範例 |
| HTML 檔案 | index.html |
| 原始碼 | target/20230312 |
即時預覽
頁面區塊
| 區塊 | 說明 |
|---|---|
| 頂部導覽列 | 固定頂部導覽 #nav-002：PARDNCHIU logo、ITEM 按鈕、GitHub 連結、漢堡按鈕 |
| 搜尋主視覺（header=2） | 背景圖主視覺，標題與產品名稱搜尋框＋連到 GitHub 的按鈕 |
| 產品網格（num=16） | 右斜分隔、淺藍背景、四欄八張圖片 |
| 聯絡列（num=8） | 「想製作客製化網站」標題、Email 輸入與 mailto:dev@pardn.io 按鈕 |
| 產品詳細（num=17） | 三欄共六張含圖片與說明的卡片 |
| 頁尾（footer num=1） | #15181b 深色頁尾，左斜分隔與四欄連結 |
互動行為
- js/index.js：body.onscroll 取 "top-nav".$，但頁面 nav id 為 nav-002，查不到元素，捲動時切換 .scroll 會拋錯（既有缺陷）
- js/index.js：將自訂屬性 top / bottom / bg-col / col / bg-img 轉為 inline padding、背景色、文字色、背景圖（-- 開頭值轉為 var(--x)）
- js/index.js：把 span[mask=arc|arc-up|arc-down|slash-left|slash-right|wave] 替換成依 viewport 寬度產生的 inline SVG 分隔曲線（>1024px 時 64/128px）
- js/index.js 包在 DOMContentLoaded 內，依賴 PDRenderKit 原型擴充（$all、$attr、_style、$style、$parent、class、class）
相依資源
| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit | 1.5.2 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.5.2/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | G-L5VYEZPVXX | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Page stylesheet (compiled SCSS) | - | ./css/index.css |
| Page script | - | ./js/index.js |
樣式
| 項目 | 內容 |
|---|---|
| SCSS 入口 | sass/index.scss |
| 輸出 CSS | css/index.css |
| Partials | nav/_001.scss, nav/_002.scss, nav/_body.scss, header/_001.scss, header/_002.scss, header/_003.scss, section/_000.scss ... section/_022.scss, section/_015-top.scss, section/_015-center.scss, section/_015-bottom.scss, footer/_001.scss, comp/_div-info.scss, comp/_innerText.scss, comp/_li-r2.scss, comp/_li-r3.scss, comp/_li-r4.scss, comp/_ul-button.scss |
共用區塊庫：index.scss 在 body 內 import 全部 nav/header/section/footer partial，以屬性選擇器（nav[num]、section[header=N]、section[num=N]、footer[num]）對應；comp/* 為在 section 內 import 的片段（r2/r3/r4 響應式欄寬、div-info 標題區）。component/_info.scss、comp/_w-h-rate.scss、section/_rm-1st-top.scss 存在但未被 import。本份 section/_015-center.scss 與 20230302 版本不同。
cd target/20230312
npx sass sass/index.scss css/index.css --no-source-map || exit 1
使用技巧
- inline <style> :root 以 CSS 變數設定主題（--col-nav、--col-system、--col-txt、--col-border、--max-width）
- 屬性驅動版型：section[num=N] / section[header=N] / nav[num] 對應預製 SCSS 區塊；ul.r2/.r3/.r4 選 2/3/4 欄卡片
- 固定頂部導覽列與漢堡按鈕；media query 斷點 max-width 413/479/639/799/1023/1139px、min-width 480/640/768/1024px
- 以 span[mask] 由 JS 產生 SVG 區塊分隔（弧形 / 斜切 / 波浪）
- SEO head：Open Graph、Twitter card、canonical、JSON-LD WebPage schema
- 斜切分隔（slash-left / slash-right）配合相鄰區塊顏色
外部資源
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230312.jpg (og:image / twitter:image)
- https://pardn.io/web-template/target/20230312 (canonical / og:url)
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
mailto:dev@pardn.io
