# 社群網站

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

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-07-30 |
| 分類 | App 與平台範例 |
| HTML 檔案 | `index.html` |
| 原始碼 | [target/20230730](https://github.com/pardnio/demo-web/tree/main/target/20230730) |

## 即時預覽

<iframe src="/target/20230730/" title="社群網站" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[在新分頁開啟範例](/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 中沒有。

```bash
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

## 相關頁面

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