雜誌風部落格

雜誌風部落格模板（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

即時預覽

在新分頁開啟範例

頁面區塊

區塊	說明
頂部導覽	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 <style>。

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