# 極簡部落格

部落格「Minimal」單欄版本（PDRenderKit 1.0.1，純 JS 渲染）：精簡導覽與側選單、極簡文章列表、文章、聯絡與 404 頁。

## 概要

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

## 即時預覽

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

[在新分頁開啟範例](/target/20230723/)

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 導覽列 | 選單按鈕（開啟側選單）、置中「PARDN LTD」、搜尋按鈕。 |
| 側選單 | Home 下拉（Magazine/Personal/Personal Alt/Classic 連到 pardn.io，Minimal 為本頁）、List、Post 1/2、contact、404 與社群圖示。 |
| 首頁極簡列表 | 4 篇文章，各含作者頭像、資訊（作者、日期、分類、留言數）、標題、圖片、摘要與分享圖示；1/2/3 分頁。 |
| 列表頁 | #default-header 加上相同的 .list-min 列表。 |
| 文章 1／文章 2 | 文章頁首變化與含留言的文章內文。 |
| 聯絡／404 | 聯絡資訊、Google Maps 與表單；404 頁含「Return Home」按鈕。 |
| 頁尾 | Instagram 圖片列、版權、社群圖示、「Back to Top」。 |

## 互動行為

- js/index.js：setHome/setList/setPost(1|2)/setContact/set404 以 body.__child() 重建 body 並重置捲動。
- _LEFT_TAB 附加側滑選單；關閉時加 hide 並於 300ms 後移除；下拉項目切換 show。
- _SVGListener() 內嵌 span.svg 圖片；500ms 後移除 body 的 ft class。此版本沒有捲動監聽。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| 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` |

僅三個 partial（_top-nav sticky 導覽、_bottom-footer、_header 預設與文章頁首）；index.scss 本身含 #body 單欄（max-width 60rem）、.list-min、.list-post、留言與 #right-tab keyframes。 使用 var(--color-dark-*)、var(--color-light-*)、var(--color-brand-*)、var(--width-max)、var(--bgcolor)，但本資料夾未定義（20230719 寫在 inline &lt;style&gt;，此處沒有）。

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

## 使用技巧

- 整頁以 PDRenderKit 字串標籤語法於 JS 建構（('section' + '#id')._([...])、._$()、._click()、._open()、'fa-...'._fa），標籤名稱由傳入 IIFE 的單字母全域變數組合。
- 置中單欄（max-width 60rem）、sticky 導覽、backdrop-filter、.line.r2/.r3 截斷；斷點 640/800/1024/1280px。

## 外部資源

- 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 ... 20230722 (side menu links to sibling templates on pardn.io)
- local: image/wave.svg, image/left-ads.jpg (relative)
- https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230723.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230723

## 相關頁面

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