含部落格的個人頁

多頁式個人網站（首頁、作品集、部落格、文章），以 PDRenderKit 1.2.0 組合片段，含 JS 瀑布流與 Markdown 檢視器。

概要

項目	內容
製作日期	2023-06-21
分類	部落格範例
HTML 檔案	`index.html`, `portfolio.html`, `blog.html`, `blog-content.html`, `view/nav.html`, `view/header.html`, `view/portfolio.html`, `view/service.html`, `view/about.html`, `view/skill.html`, `view/client.html`, `view/contact.html`, `view/footer.html`, `view/blog-content.html`
原始碼	target/20230621

即時預覽

在新分頁開啟範例

頁面區塊

區塊	說明
導覽列（view/nav.html）	sticky 導覽列，品牌連結與 :for 渲染的 HOME / PORTFOLIO / BLOG；800px 以下由漢堡 @click=tab 開關選單。
主視覺（view/header.html）	標題、副標與 GitHub / LinkedIn 按鈕，含進場動畫。
作品集（view/portfolio.html）	依頁面全域 ary（首頁 8 筆、portfolio.html 24 筆）產生的 JS 瀑布流佔位圖，並自動建立 ALL/TAG1/TAG2/TAG3 篩選分頁。
服務（view/service.html）	以 :for 依圖示名稱渲染 6 個項目，class 使用插值 fa-{{ e }}。
關於（view/about.html）	照片搭配 image/about.svg 裝飾、自介與兩組 3 項時間軸。
技能（view/skill.html）	8 個圓餅指標，:year 值 1..8 隨機排序，進場時播放動畫。
客戶評價（view/client.html）	5 張評價卡的橫向循環輪播，附前後按鈕。
聯絡（view/contact.html）	:model 表單（名稱、Email、訊息）以 @click=send 跳出 alert，旁為嵌入的 Google 地圖 iframe。
頁尾（view/footer.html）	版權與 :for 圖示連結（GitHub、LinkedIn、Mail）。
部落格列表（blog.html）	雙欄：作者卡、8 篇連到 blog-content.html 的文章、上下頁；側欄含搜尋、最新 4 篇、主題與標籤；行動版底部浮動搜尋列。
文章頁（blog-content.html + view/blog-content.html）	文章標題、details/summary 索引、以 PDMarkdownKit viewer 顯示 PDMarkdownKit README、上下篇連結與相同側欄。

互動行為

js/index.js 與 js/blog.js 以導覽資料建立 new PD({id: "body"})；各 view/*.html 的 script 建立自己的 PD 實例，並在 next() 將 *.delay 元素註冊到共用 delay_observer。
進場：IntersectionObserver 移除 .delay，700ms 後設定 done=1（::after 擦除遮罩），1300ms 後移除 .at；技能圓餅依 [done="1"][year] 播放動畫。
updateShadow()：依 body 捲動位置（0..32px）漸變 nav 與 .float-bottom 的陰影。
view/portfolio.html：絕對定位瀑布流，每項放入最短欄（<480 / 480 / 1024px 為 1/2/3 欄），標籤分頁設定 filter-key 後由 updatePortfolio() 以透明度重新排版，window.onresize 防抖 300ms 重排。
view/client.html：複製卡片做無限循環，前後按鈕以 setInterval（10ms）動畫 scrollLeft，到端點時跳回中段副本。
js/blog.js（module）：抓取 https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/README.md，在含 section[name=blog-content] 的頁面於 section.page 前掛載 PDMarkdownKit viewer；側欄高於視窗時調整 sticky top。
js/blog.js 的 tab 事件為箭頭函式卻使用 this.$pre()，部落格頁的行動選單切換沒有元素可作為 this。

相依資源

名稱	版本	來源
Font Awesome Free	6.5.2	https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css
PDRenderKit	1.2.0	https://cdn.jsdelivr.net/npm/pdrenderkit@1.2.0/dist/PDRenderKit.js
PDMarkdownKit (ES module, blog pages)	1.6.0	https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/dist/PDMarkdownKit.module.js
Google Maps embed iframe	-	https://www.google.com/maps/embed?pb=...
Google Analytics (gtag.js)	-	https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX
js/index.js (index.html, portfolio.html)	-	./js/index.js
js/blog.js (blog.html, blog-content.html)	-	./js/blog.js (type=module)

樣式

項目	內容
SCSS 入口	`sass/index.scss`
輸出 CSS	`css/index.css`
Partials	`function/_hsbTohsl.scss`, `_init.scss`, `_nav.scss`, `_header.scss`, `_blog.scss`, `_portfolio.scss`, `_service.scss`, `_about.scss`, `_skill.scss`, `_client.scss`, `_contact.scss`, `_footer.scss`, `animation/_section-3.scss`, `animation/_pie.scss`, `animation/_bg-move.scss`

function/_hsbTohsl 定義 HSB 轉 HSL 的 hsb()/hsba() SCSS 函式；_init 含 reset、斷點變數（$_800: 50rem 等）與 HSB 推導色階（brand/success/notify/error/info/border）。index.scss 定義全域 .at/.delay/[done] 進場效果（::after 漸層擦除）與旋轉 a.hint 浮水印。_skill @import animation/_pie 並以 @for 依 [done][year] 旋轉圓餅；_blog 涵蓋列表／文章／sticky 側欄、details 索引與 .float-bottom；_client 處理 [row] 版面。animation/_bg-move 存在但未被 import。inline <style> 設定 --col-brand-5 #f1c50e 與 --gradient-col。

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

使用技巧

PDRenderKit PD 模板：:path 片段、:for、{{ }}（含屬性內插值 :class="... fa-{{ e }}"）、:model、@click、next() 生命週期。
自訂 SCSS @function 將 HSB 轉 HSL 並產生色階。
JS 計算最短欄的絕對定位瀑布流；以 opacity/left 過渡篩選。
擦除進場效果：::after 使用 300% 三段漸層，透過 [done] 屬性改變 background-position。
details/summary 索引、sticky 導覽與側欄、backdrop-filter，斷點 max-width 799.99px 與 min-width 480/640/800/1024px。

外部資源

https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/README.md (fetched as blog post content)
https://www.google.com/maps/embed?pb=... (contact map iframe)
https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
https://pardn.io/image/head.png (favicon)
https://pardn.io/web-template/image/20230621.jpg (og/twitter image)