社群網站

三欄式創作者社群／作品分享應用（中文介面），以 PDRenderKit 1.0.1 於 JS 渲染：作品集、自我介紹、案件、貼文、收藏、收件匣與彈窗。

概要

項目	內容
製作日期	2023-07-30
分類	App 與平台範例
HTML 檔案	`index.html`
原始碼	target/20230730

即時預覽

在新分頁開啟範例

頁面區塊

區塊	說明
頂部導覽	image/logo.svg、標題「作品分享」、「張貼」按鈕與頭像。
左側功能列	使用者卡片與內嵌 SVG 圖示分頁：作品分享、自我介紹、案件發包、社群貼文、收藏、通知、設定，以及張貼按鈕。
中欄精選輪播	作品卡片橫向輪播（頭像、封面、標題）附左右箭頭與圓點。
中欄工具列	張貼／收藏／已張貼按鈕、活躍度排序、列表／格狀切換、hashtag 關鍵字輸入。
中欄列表	作品項目：作者、標題、數量／觀看／時間、依照片數（total=1..6）變化的拼貼、描述、喜歡／收藏／分享按鈕。
右側收件匣	收件匣標題、名稱搜尋、全部／未讀頁籤與 5 位聯絡人列表。
彈窗	albumPop：單一作品詳情與作者聯絡方式（image/icon/contact/*.svg）；photoPop：全螢幕相片瀏覽與縮圖；通知面板。

互動行為

js/index.js：載入時產生 chats、albums、services、cases、posts 假資料（services/posts 隨機排序）。
albumIndex／serviceIndex／caseIndex／postIndex／bookmarkIndex 切換中欄並設定 LEFT_TAB 的 [index]；albumGrid 等切換格狀檢視。
輪播箭頭限制並寫入 INDEX_TOP 的 [index]；albumPop／photoPop 建立 .pop 疊層並延時移除；photoPop 上一張／下一張更新 [index]，scrollTo() 以 setInterval 動畫捲動縮圖。
notifyList(show) 切換 #POP_NOTIFY 通知面板並記住／還原左側分頁 index；50ms 後設定 body[ready]=1。

相依資源

名稱	版本	來源
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	`_body-left.scss`, `_body-right.scss`, `_pop-single.scss`, `body-center/_index.scss`, `body-center/_button.scss`, `body-center/top/_index.scss`, `body-center/top/_user.scss`, `body-center/top/_album.scss`, `body-center/top/_service.scss`, `body-center/list/_index.scss`, `body-center/list/_heading.scss`, `body-center/list/_button.scss`, `body-center/list/_album.scss`, `body-center/list/_album-grid.scss`, `body-center/list/_service.scss`, `body-center/list/_service-grid.scss`, `body-center/list/_post.scss`, `body-center/list/_case.scss`, `body-center/list/cover/_total-1..6.scss`, `single/_left.scss`, `single/_right.scss`, `animation/_bg-move.scss (not imported)`, `animation/_pie.scss (not imported)`

index.scss 定義 --width-max: 1024px 與 --bgcolor，並引入 body-left（sticky 分頁列）、body-center（精選輪播、工具列、各類列表、依照片數的拼貼封面）、body-right（sticky 收件匣）與 pop-single（重用 single/_left、single/_right 的作品彈窗）。animation partial 未被引入，css/index.css 中沒有。

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

使用技巧

以 PDRenderKit 於 JS 建構 DOM，元素 id 以常數保存（BODY_LEFT、INDEX_TOP、LEFT_TAB...）並用 "id".$ 查找。
分頁列以內嵌 SVG 字串作圖示；Font Awesome 透過 'fa-...'.$fa。
以屬性選擇器驅動版型：[total="n"] 以 nth-child 定位拼貼、SCSS @for 產生 [index] 分頁高亮；側欄 position: sticky。
斷點 360/480/640/800/1024/1280/1440px。

外部資源

https://fakeimg.pl/1024/282828/eae0d0/?text=sample (avatars and photos)
local: image/logo.svg, image/icon/contact/{email,line,instagram,behance,facebook,github,phone}.svg (relative)
https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230730.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230730