# 雜誌風部落格

雜誌風部落格模板（PDRenderKit 1.2.0）：?page= 搭配 :if 路由、:path 載入片段、:for 迴圈與 Markdown 文章。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-07-19 |
| 最後更新 | 2024-08-08 |
| 分類 | 部落格範例 |
| HTML 檔案 | `index.html`, `views/top-nav.html`, `views/right-tab.html`, `views/default-header.html`, `views/body-home.html`, `views/body-list-1.html`, `views/body-list-2.html`, `views/body-grid-1.html`, `views/body-grid-2.html`, `views/body-post-1.html`, `views/body-post-2.html`, `views/body-author.html`, `views/body-contact.html`, `views/body-404.html`, `views/right.html`, `views/bottom-footer.html` |
| 原始碼 | [target/20230719](https://github.com/pardnio/demo-web/tree/main/target/20230719) |

## 即時預覽

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

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 頂部導覽 | Logo、Home/List/Post 下拉選單及 Author、Contact、404；Home 下拉連到 pardn.io 上的 20230720-20230723 範例；社群圖示與選單按鈕。 |
| 首頁 | 主視覺精選文章、部落格區塊（一大篇 + 4 則小連結）、贊助廣告圖、其他文章群組；右側欄載入 views/right.html。 |
| 頁首標題 | 列表、格狀與聯絡頁共用的 h1 頁首。 |
| 列表 1／列表 2 | 兩種文章列表版型（:for 產生 10 筆）與「Load More」，附右側欄。 |
| 格狀 1／格狀 2 | 20 張圖片格狀牆，以及含摘要的 10 篇文章卡片格。 |
| 文章 1／文章 2 | 麵包屑頁首、標題與作者資訊、Markdown 內文（section.md）、分享圖示、標籤、作者卡；文章 2 另有留言與留言表單。 |
| 作者頁 | 作者頁首（#user-header）與作者文章列表、「Load More」。 |
| 聯絡頁 | 聯絡資訊、Google Maps 嵌入地圖與「Send Message」表單。 |
| 404 頁 | 未知 ?page 值時顯示「404 Not Found」。 |
| 右側欄 | Popular/Recent 頁籤（僅首頁）、地球背景的 About、熱門文章、主題、電子報與標籤。 |
| 頁尾與行動選單 | 含版權與回到頂部按鈕的頁尾；與導覽相同結構的側滑選單 #right-tab。 |

## 互動行為

- js/index.js：以 location.href.$query('page') 讀取 ?page=（預設 home），計算 nav.index/subIndex 標示目前選單。
- event.rightTab（@click）切換 #right-tab 顯示並以 300ms 的 hide class 過場；event.scrollTop 平滑捲回頂部。
- next()：監聽 body 捲動，切換 #top-nav 的 show class、寫入捲動百分比屬性（0-1000）作為進度指示，並調整 #section-right 位置作為類 sticky 側欄。
- 文章頁從 jsDelivr 抓取 PDMarkdownKit 的 README.md，以 PDMarkdownKit viewer 渲染進 section.md（hashtag 連到 ?keyword=）。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| 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 import) | 1.6.0 | https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/dist/PDMarkdownKit.module.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。色彩變數（--color-dark-*、--color-light-*、--color-brand-*、--width-max、--bgcolor）定義在 index.html 的 inline &lt;style&gt;。

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

## 使用技巧

- 純 HTML 內的 PDRenderKit 模板指令：:path（載入片段）、:if／:else-if／:else 路由、:for="e in item_10"、@click、:index/:sub-index 屬性綁定、:bg-image。
- 以 new PD({ id, data, event, next }) 綁定 body#app；item_2 至 item_20 佔位陣列驅動重複卡片。
- img.lazyload 搭配 data-src，以及 span.svg[src] 內嵌 SVG，由 PDRenderKit 處理。
- 色階 CSS 自訂屬性、多行截斷 class（.line.r2/.r3）、keyframes 側滑選單、斷點 480/640/800/1024/1140px、flexbox 版型（未使用 CSS grid）、backdrop-filter，right/_index 使用 position: sticky。

## 外部資源

- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
- https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/README.md (fetched at runtime as Markdown demo content)
- https://www.google.com/maps/embed?... (contact page iframe)
- https://pardn.io/web-template/target/20230720 ... 20230723 (Home dropdown links to sibling templates on pardn.io)
- local: image/wave.svg, image/eath.svg, image/left-ads.jpg, views/*.html (all relative)
- https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230719.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230719

## 相關頁面

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