# Instagram 仿製

完全以 JS 與 PDExtension DOM 輔助函式產生的仿 Instagram 靜態網頁應用：動態、限時動態、探索、私訊、通知、個人頁與貼文彈窗。

## 概要

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

## 即時預覽

<iframe src="/target/20221012/" title="Instagram 仿製" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 側邊／底部導覽 | 由 initNav() 產生：Logo（image/logo.svg）、以 ?pg= 切換的首頁／探索／訊息、通知與建立切換鈕、個人檔案連結、更多按鈕，以及行動版精簡頂列（div#nav）。 |
| 首頁動態（預設） | showHomePage()：限時動態列（新／已看外框）、貼文卡（作者、可滑動多圖輪播與指示點及左右鈕、讚／留言／分享／收藏與留言輸入），以及側欄帳號切換、推薦用戶與頁尾連結。 |
| 探索（?pg=search） | showSearch()：圖片格線，每格顯示讚數與留言數；點擊開啟貼文彈窗（showPopPost）。 |
| 訊息（?pg=message） | showMessage()：對話列表與聊天畫面，含自動增高 textarea 與傳送／表情／圖片／愛心按鈕。 |
| 通知面板 | showNotify()：於 #nav-notify 依今天／昨天分組顯示按讚與留言通知。 |
| 個人頁（?pg=user&amp;uid=） | showUser()：頭像、名稱、粉絲／追蹤數、簡介、連結、精選動態（新焦點動態）與貼文／我的珍藏／已標注分頁的貼文格線。 |
| 貼文頁／彈窗 | showPost(pid) 完整貼文頁（?pg=post&amp;pid=）、showPopPost() 彈窗 #pop、showPopStory() 全螢幕限時動態檢視 #pop-story，含上一則／下一則與回覆輸入。 |

## 互動行為

- 查詢參數路由：init() 讀取 ?pg=（search / message / user / post）與 uid / pid，各畫面以 URL._param_({...})._history() 推入歷史紀錄。
- 圖片輪播：以 100ms debounce 的 scroll 事件將 scrollLeft 對齊最近頁，更新指示點 sel 屬性並切換左右鈕顯示。
- 通知與建立按鈕切換 on 屬性並替換 far / fas 圖示；開啟建立時會關閉通知。
- 聊天 textarea 依輸入自動增高並讓訊息列表保持捲到底；focus / blur 切換傳送鈕與圖示鈕。
- 限時動態上一則／下一則按鈕以 timeout 切換 sel / ani / unsel class 並水平捲動。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDExtension.js (local; prototype extensions on Array / Object / Number / URL / String / HTMLElement, e.g. "tag#id.class"._(), _click, _history) | - | js/PDExtension.js |
| js/index.js (local app code with sample data) | - | js/index.js |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/index.scss` |
| 輸出 CSS | `css/index.css` |
| Partials | `_nav.scss`, `_home.scss`, `_homeStory.scss`, `_homeInfo.scss`, `_postListTop.scss`, `_postListCenter.scss`, `_postListBottom.scss`, `_postListRow.scss`, `_search.scss`, `_message.scss`, `_post.scss`, `_user.scss`, `_userTop.scss`, `_userList.scss`, `_pop.scss` |

入口在固定滿版 body 內引入 nav / home / search / message / post / user / pop；home 與 user 再引入限時動態、資訊、貼文列表與使用者子 partial。body::after 顯示「Pardn Ltd」標籤。

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

## 使用技巧

- 字串轉 DOM 建構器："div#id.class"._(attrs, children) 建立元素，串接 ._click / ._scroll / ._input / .go(url)。
- 以屬性（sel、on）表示狀態，由 CSS 屬性選擇器套樣式。
- 仿 Instagram 的行動優先斷點（470 / 735 / 750 / 785 / 1000 / 1112 / 1280px）與 pointer-fine hover 規則。
- :root CSS 變數（--col-border、--col-text-lighter、--col-text-lightest）。

## 外部資源

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20221012.jpg`
- image/logo.svg, image/logo_fff.svg (relative, included in folder)

## 相關頁面

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