# 簡約部落格

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

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-07-12 |
| 分類 | 部落格範例 |
| HTML 檔案 | `index.html` |
| 原始碼 | [target/20230712](https://github.com/pardnio/demo-web/tree/main/target/20230712) |

## 即時預覽

<iframe src="/target/20230712/" title="簡約部落格" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[在新分頁開啟範例](/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 版型（手機直排、&gt;=800px 橫排）；_section-left 為固定側欄，_section-right 為內容區與按鈕並引入 _list（文章卡片）與 _article（文章排版）。顏色使用 var(--color-dark-*)、var(--width-max)、var(--bgcolor)，但本資料夾內未定義這些變數。

```bash
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('')。
- &gt;=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

## 相關頁面

- [專案結構](/zh/project-structure)
- [樣式工作流程](/zh/styling-workflow)
- [框架使用](/zh/frameworks)