經典部落格
部落格「Classic」版本（PDRenderKit 1.5.1，純 JS 渲染）：置中品牌頁首、箭頭控制的精選輪播、格狀加列表首頁與 9 個內頁。
概要
| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-07-22 |
| 分類 | 部落格範例 |
| HTML 檔案 | index.html |
| 原始碼 | target/20230722 |
即時預覽
頁面區塊
| 區塊 | 說明 |
|---|---|
| 頂部頁首 | 置中的「PARDN LTD」品牌字與社群圖示列（固定元素，無選單按鈕）。 |
| 導覽列 | 下拉選單（Home 連到 pardn.io 其他範例、List、Post、Author、contact、404）與搜尋、選單按鈕；選單開啟 #right-tab。 |
| 首頁主視覺 | #personal-header 輪播，附上一張／下一張箭頭（index 限制在 0 到投影片數-1）。 |
| 首頁主欄 | 部落格區塊、4 格 .grid-1 圖片格、贊助廣告與 3 筆文章列表。 |
| 右側欄 | Popular/Recent 頁籤（僅首頁）、地球背景與波浪 SVG 的 About、熱門文章、主題、電子報輸入、熱門標籤。 |
| 內頁 | setList1/setList2/setGrid1/setGrid2（列表與格狀）、setPost(1|2)（文章、分享、標籤、作者卡、留言與表單）、setAuthor（#user-header + 文章）、setContact（資訊、Google Maps、表單）、set404。 |
| 頁尾 | 6 張 Instagram 圖片列、版權、社群圖示與「Back to Top」按鈕。 |
互動行為
- js/index.js：setHome/setList1/setList2/setGrid1/setGrid2/setPost/setAuthor/setContact/set404 以 body.__child() 重建 body 並重置捲動（純 JS 切頁，不改變網址）。
- _RIGHT_TAB 附加側滑選單 #right-tab；關閉鈕加上 hide 並於 300ms 後移除；子選單點擊切換 show。
- done()：捲過 #top-header 後顯示 #top-nav，並寫入 percent 屬性（0-1000）作為閱讀進度；依視窗與側欄高度設定 #section-right 的 top。
- 載入時呼叫 _SVGListener() 內嵌 span.svg[src] 圖片；500ms 後移除 body 的 ft class。
- 輪播箭頭以 $attr 讀取 [index]、限制範圍後以 _attr({ index }) 寫回。
相依資源
| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit | 1.5.1 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.5.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, 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。 _header 負責含箭頭的 #personal-header 輪播；_top-nav 為置中頁首與 sticky 導覽。 使用 var(--color-dark-)、var(--color-light-)、var(--color-brand-*)、var(--width-max)、var(--bgcolor)，但本資料夾未定義（20230719 寫在 inline <style>，此處沒有）。
cd target/20230722
npx sass sass/index.scss css/index.css --no-source-map || exit 1
使用技巧
- 整頁以 PDRenderKit 字串標籤語法於 JS 建構（('section' + '#id').([...])、.$()、._click()、._open()、'fa-...'._fa），標籤名稱由傳入 IIFE 的單字母全域變數組合。
- 以屬性驅動狀態：ul[index][sub-index] 標示選單、[percent] 驅動捲動進度條、輪播的 [index] 透過 SCSS @for 決定顯示的投影片。
- Flexbox 版型（未使用 CSS grid）、_top-nav 與 right/_index 使用 position: sticky、backdrop-filter、多行截斷 .line.r2/.r3、keyframes 側滑選單。
- 斷點 640/800/1024/1140/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 ... 20230723 (Home menu links to sibling templates on pardn.io)
- local: image/wave.svg, image/eath.svg, image/left-ads.jpg (relative)
- https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230722.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230722
