簡約部落格

以 PDRenderKit 1.0.1 純 JS 渲染的雙欄個人部落格 SPA：左側固定個人介紹與選單，右側切換文章列表、文章、關於與聯絡頁。

概要

項目	內容
製作日期	2023-07-12
分類	部落格範例
HTML 檔案	`index.html`
原始碼	target/20230712

即時預覽

在新分頁開啟範例

頁面區塊

區塊	說明
左側個人欄	名稱、簡介、HOME/ABOUT/CONTACT 選單（ul[index] 標示目前項目）、社群圖示連結與版權。
文章列表	10 張文章卡片（圖片、標題、摘要、日期、分類）與靜態分頁（‹ 1 2 3 ›）。
文章內頁	封面圖、標題、日期分類與富文字內文（h3/h4/h6、清單、連結），下方有「ALL POSTS」返回按鈕。
關於我	自我介紹、技能清單、平台連結（JOBALL）與聯絡資訊，結尾為「Get in touch」按鈕。
聯絡表單	標題、說明文字與姓名／Email／訊息欄位及「Get in touch」按鈕（無送出邏輯）。

互動行為

js/index.js：_CLICK_HOME／_CLICK_ABOUT／_CLICK_CONTACT 以 body.__child() 重繪整個 body 並重置捲動位置，作為前端頁面切換。
點擊文章卡片呼叫 _CLICK_ARTICLE 顯示內頁；「ALL POSTS」返回列表。
社群圖示以 PDRenderKit 的 ._open(url) 開啟外部連結。

相依資源

名稱	版本	來源
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
Montserrat (font-family only)	-	declared in SCSS; not loaded by any stylesheet

樣式

項目	內容
SCSS 入口	`sass/index.scss`
輸出 CSS	`css/index.css`
Partials	`_section-left.scss`, `_section-right.scss`, `_list.scss`, `_article.scss`

index.scss 為 reset、safe-area 變數與 body flex 版型（手機直排、>=800px 橫排）；_section-left 為固定側欄，_section-right 為內容區與按鈕並引入 _list（文章卡片）與 _article（文章排版）。顏色使用 var(--color-dark-*)、var(--width-max)、var(--bgcolor)，但本資料夾內未定義這些變數。

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

使用技巧

整個 DOM 以 PDRenderKit 字串標籤語法於 JS 建構：('section' + '#id').([...])、陣列 .$() 映射、._click()、'fa-...'._fa 圖示。
標籤名稱由傳入 IIFE 的單字母全域變數（0、__0、_0...）組合，例如 [_s,_e,_c,_t,_i,_o,_n].$str('')。
>=800px 側欄 position: sticky；斷點 480/640/800/1280px；卡片圖使用 aspect-ratio（16/10、2/1、3/1）。
env(safe-area-inset-*) CSS 變數、隱藏捲軸、img[data-src] 以 1px GIF 加漸層作為延遲載入佔位。

外部資源

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