封面式個人部落格

部落格「Personal Alt」版本（PDRenderKit 1.0.1 純 JS 渲染）：含自介與動態 SVG 波浪的主視覺、淺色頁首、附分頁的卡片格。

概要

項目	內容
製作日期	2023-07-21
分類	個人頁範例
HTML 檔案	`index.html`
原始碼	target/20230721

即時預覽

在新分頁開啟範例

頁面區塊

區塊	說明
頂部頁首	社群圖示列、Logo 區與搜尋／選單按鈕；選單按鈕開啟 #right-tab。
導覽列	下拉選單 Home（連到 pardn.io 上 20230719-20230723 各範例）、List（List 1/2、Grid 1/2）、Post（1/2），以及 Author、contact、404。
首頁主視覺	#default-header.home 以 fakeimg 為背景的主視覺：「I'm Pardn Chiu.」標題、簡介、GitHub／Email 按鈕，以及依視窗寬度計算貝茲曲線的內嵌 SVG 波浪。
首頁主欄	部落格區塊、贊助廣告（image/left-ads.jpg 連到 joball.tw）與 4 張 .grid-2 卡片（標籤、摘要、分享、More 按鈕）及 1/2/3 分頁。
右側欄	Popular/Recent 頁籤（僅首頁）、地球背景與波浪 SVG 的 About、熱門文章、主題、電子報輸入、熱門標籤。
內頁	setList1/setList2/setGrid1/setGrid2（列表與格狀）、setPost(1\|2)（文章、分享、標籤、作者卡、留言與表單）、setAuthor（#user-header + 文章）、setContact（資訊、Google Maps、表單）、set404。
頁尾	6 張 Instagram 圖片列、版權、社群圖示與「Back to Top」按鈕。

互動行為

js/index.js：setHome/setList1/setList2/setGrid1/setGrid2/setPost/setAuthor/setContact/set404 以 body.__child() 重建 body 並重置捲動（純 JS 切頁，不改變網址）。
_RIGHT_TAB 附加側滑選單 #right-tab；關閉鈕加上 hide 並於 300ms 後移除；子選單點擊切換 show。
done()：捲過 #top-header 後顯示 #top-nav，並寫入 percent 屬性（0-1000）作為閱讀進度；依視窗與側欄高度設定 #section-right 的 top。
載入時呼叫 _SVGListener() 內嵌 span.svg[src] 圖片；500ms 後移除 body 的 ft class。
setHome 以 body.clientWidth 計算 p1-p5，產生三層 SVG 波浪 <path> 作為主視覺底緣。

相依資源

名稱	版本	來源
Font Awesome Free	6.5.2	https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css
PDRenderKit	1.0.1	https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.1/dist/PDRenderKit.js
Google Analytics (gtag.js)	-	https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX
Noto Sans TC (font-family only)	-	declared in SCSS; no font stylesheet is linked, so it relies on a locally installed font or the sans-serif fallback

樣式

項目	內容
SCSS 入口	`sass/index.scss`
輸出 CSS	`css/index.css`
Partials	`_top-nav.scss`, `_bottom-footer.scss`, `_header.scss`, `left/_index.scss`, `left/_topest.scss`, `left/_blog.scss`, `left/_list-1.scss`, `left/_list-2.scss`, `left/_grid-1.scss`, `left/_grid-2.scss`, `left/_post.scss`, `left/_comment.scss`, `left/_form.scss`, `left/_ads.scss`, `right/_index.scss`, `right/_button.scss`, `right/_list.scss`, `right/_topic.scss`, `right/_tag.scss (empty)`, `right/_contact.scss (empty)`

index.scss 含 reset、共用元件與 #right-tab keyframes，並引入 _top-nav、_bottom-footer、_header 與 left（主欄：blog、列表、格狀、文章、留言、表單、廣告）、right（側欄）兩組 partial。 _header 負責背景圖 #default-header（首頁主視覺）與文章頁首；_top-nav 使用淺色（.light）圖示樣式。使用 var(--color-dark-)、var(--color-light-)、var(--color-brand-*)、var(--width-max)、var(--bgcolor)，但本資料夾未定義（20230719 寫在 inline <style>，此處沒有）。

cd target/20230721
npx sass sass/index.scss css/index.css --no-source-map || exit 1

使用技巧

整頁以 PDRenderKit 字串標籤語法於 JS 建構（('section' + '#id').([...])、.$()、._click()、._open()、'fa-...'._fa），標籤名稱由傳入 IIFE 的單字母全域變數組合。
以屬性驅動狀態：ul[index][sub-index] 標示選單、[percent] 驅動捲動進度條、輪播的 [index] 透過 SCSS @for 決定顯示的投影片。
Flexbox 版型（未使用 CSS grid）、_top-nav 與 right/_index 使用 position: sticky、backdrop-filter、多行截斷 .line.r2/.r3、keyframes 側滑選單。
以 ._({ style: $bg }) 設定背景；執行期產生 SVG 路徑；斷點 640/800/1024/1140px。

外部資源

https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
https://www.google.com/maps/embed?... (contact page iframe)
https://pardn.io/web-template/target/20230719 ... 20230723 (Home menu links to sibling templates on pardn.io)
local: image/wave.svg, image/eath.svg, image/left-ads.jpg (relative)
https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230721.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230721