# 餐廳介紹 220525

四頁式餐飲加盟品牌網站（品牌介紹、最新消息、餐點介紹、門市據點），含捲動感知導覽列、canvas 曲線主視覺與門市進場動畫。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2022-05-25 |
| 分類 | 商業網站範例 |
| HTML 檔案 | `index.html`, `news.html`, `products.html`, `store.html` |
| 原始碼 | [target/20220525](https://github.com/pardnio/demo-web/tree/main/target/20220525) |

## 即時預覽

<iframe src="/target/20220525/" title="餐廳介紹 220525" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

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

## 頁面區塊

| 區塊 | 說明 |
|---|---|
| 導覽列（各頁共用） | #nav 含清單切換鈕、4 個頁籤（品牌介紹／最新消息／餐點介紹／門市據點，連到 4 個 HTML）與右側加盟專區／聯絡我們／Facebook 圖示。 |
| 頁面主視覺（各頁共用） | #body 含封面圖與 &lt;canvas&gt;，在置中 #page-title（ABOUT US / LATEST NEWS / PRODUCTS / STORES）周圍繪製白色曲線。 |
| index.html 內容 | 佔位區塊「自訂內容 (此範例沒此頁設計)」。 |
| news.html 列表 | 分類列（全部消息／媒體報導／新品上市／新店快訊）與含日期、標籤、內文、圖片的消息項目。 |
| products.html 餐點格 | 分類列（類別1-5）與含描述與價格（35 / 份）的餐點 figure。 |
| store.html 門市列表 | 門市搜尋（縣市／區域下拉、關鍵字、搜尋門市）與編號門市卡（電話、營業時間、地址、訂餐／菜單／地圖按鈕），圖片左右交錯。 |
| 頁尾（各頁共用） | 門市搜尋表單、Logo 圖與加盟專線 tel: 連結、版權列。 |

## 互動行為

- js/PDWebsitemplate.js window.onscroll：pageYOffset &gt;= 64px 時 #nav 設為 toppest，往回捲動時改為 float。
- setLeftBg() 於 load / resize 執行：調整主視覺 canvas 尺寸，依 #page-title 寬度以 quadraticCurveTo 畫出弧形。
- #nav-show-button 切換左側頁籤列 show / hide（500ms），圖示在 fa-list 與 fa-arrow-left 間切換。
- IntersectionObserver 對 [animation='1'] 門市卡加上 inview，觸發 stores-index-show-left / -right keyframes。

## 相依資源

| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit (loaded, not used by page code) | 1.0.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js |
| js/PDWebsitemplate.js (local) | - | js/PDWebsitemplate.js |

## 樣式

| 項目 | 內容 |
|---|---|
| SCSS 入口 | `sass/PDWebsiteImitationCss.scss` |
| 輸出 CSS | `css/PDWebsiteImitationCss.css` |
| Partials | `_nav.scss`, `_body.scss`, `_component.scss (imported inside _body)`, `_bottom.scss` |

_nav 處理 #nav 狀態（toppest / float / show / hide）與 keyframes；_body 為主視覺與 canvas；_component 為消息／餐點／門市列表與進場動畫；_bottom 為頁尾。

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

## 使用技巧

- 以 Canvas 2D 路徑（quadraticCurveTo）於 resize 重算，繪製弧形頁首邊緣。
- IntersectionObserver 捲動進場，左右交錯 keyframes。
- 桌面優先 max-width 斷點 359 / 413 / 479 / 539 / 639 / 799 / 1023px。
- 多頁靜態網站共用同一份樣式與腳本，以相對路徑 ./*.html 互連。

## 外部資源

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20220525.jpg`

## 相關頁面

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