App 介紹 230302

以共用區塊庫組成的漸層主視覺形象頁：圖示特色、圖片卡片、FAQ 手風琴與行動呼籲。

概要

項目	內容
製作日期	2023-03-02
分類	商業網站範例
HTML 檔案	`index.html`
原始碼	target/20230302

即時預覽

在新分頁開啟範例

頁面區塊

區塊	說明
頂部導覽列	固定頂部導覽 #nav-002：PARDNCHIU logo、ITEM 按鈕、GitHub 連結、漢堡按鈕
主視覺（header=1）	綠藍漸層背景（.linear-bg-1）搭配本地 image/header.png、標題、段落與 GitHub / My Page 按鈕
特色圖示（num=1）	波浪分隔與四欄（r4）卡片，漸層圖示徽章（Apple/桌機/資料庫/伺服器）
用戶評論卡片（num=5）	兩欄（r2）圖片卡片，含粗體名稱與內文
陰影卡片（num=7）	下弧分隔、淺藍背景、四張陰影圖示卡
圖片橫幅	30rem 高、以 bg-img 設定背景圖的區塊
FAQ 手風琴（num=19）	兩個可展開問題，由 showContent() 切換
行動呼籲（num=8）	標題、文字與靠右 READ MORE 按鈕
頁尾（footer num=1）	站名、社群圖示（Instagram/Facebook/GitHub）、ABOUT / PRODUCTS / TECHNICAL / LEGAL 四欄連結、版權列

互動行為

js/index.js：body.onscroll 在 scrollTop > 48px 時對第一個 <nav> 加上 .scroll（原生 DOM）
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：unhover="1" 元素在 mouseleave 時加上 .unhover 500ms，播放離開動畫（本頁無 unhover 元素）
inline script showContent(this)：手風琴，點按鈕切換所屬 li 的 .show 並關閉其他已展開項目
js/index.js 為原生 DOM（querySelectorAll / getAttribute）；雖載入 PDRenderKit，但頁面腳本未使用

相依資源

名稱	版本	來源
Font Awesome Free	6.5.2	https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css
PDRenderKit	1.0.0	https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/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
Hero image	-	./image/header.png

樣式

項目	內容
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。

cd target/20230302
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
inline 定義含多種前綴的 linear-gradient 工具類 .linear-bg-1 / .linear-bg-2

外部資源

https://pardn.io/image/head.png (favicon)
https://pardn.io/web-template/image/20230302.jpg (og:image / twitter:image)
https://pardn.io/web-template/target/20230302 (canonical / og:url)
https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)