# 第四堂 多頁式網頁

本頁連結：https://hackmd.io/lR9fR5YuSvuZt7eqyXlrvg

1. 錄影
2. 作業說明：主線作業

## 活動提醒

### 1. 助教帶你做作業
直播課期間的每週六早上九點（連結會在 Discord 公告）

### 2. AAPD 活動預告


#### 這是什麼活動：

你將有機會體驗與設計師協作並實際參與開發上線產品的過程，這將會是一次難得知識的實踐與經驗累積，讓你能夠站在第一線深入了解設計與工程的合作模式將想法落地。

#### 參加條件：
- 報名條件：完成第四堂課多頁式網頁 LV 2 （完成 4 頁含 RWD 且包含首頁）
- 組別人數：
- 一組 2-3 位工程師

#### 關鍵時程：
- 8/1：第六堂課開放正式報名表單填寫
- 8/7：正式報名表單截止
- 8/8：完成分組、配對組別
- 8/12：開營典禮 (雙方共同辦理)
- 8/13：工程師團隊開始切初版
- 8/31：工程師團隊完成切初版
- 9/21：研發營成果發表日 (六角主辦)

會做出怎樣的東西？參考：https://aapd.com.tw/uibc-2025

### 3. 課程獎勵說明

- 50%：**8/4** 前超過 100 人挑戰成功，全班直播加碼一年（**～2027/8/30**）
- 60%：菁英班 DLC 切版影音課程
- 80%：菁英班直播一場（8/29） - 【原子化設計】Tailwind 使用教學（v4 +）
- 90%：抽 711 拿鐵 10 份
- 100%：切版直播班學霸獎狀

任務繳交期限：8/24(日) 23:59:59

更多說明可參考：https://hackmd.io/51ijGrBfRyWWHWciVmKNRQ

### 4. 同學之間的分享會
2. [同學們的分享會](https://hackmd.io/KxDPrWN5QhydzU6QCmw-3A)
可以分享的主題：
- 陪伴寫作業 ✅
- 筆記工具推薦 ✅
- 個人學習方式 ✅
- 工作經驗分享 ✅
- 個人的休閒、減壓方式 ✅
- 直播帶貨、個人政治傾向辯論 ❌

## 本週課程
- 記得錄影
- [GGV 影音課程](https://courses.hexschool.com/courses/20201122111/lectures/60728201) 大家看了沒？
- 傳統網頁多頁式怎麼做
- 複製貼上
- 頁面切換與 Layout 設計 ([老師範例](https://www.figma.com/design/ZQn0etbtIsCrmkHqFeeLKo/%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD---%E7%9B%B4%E6%92%AD%E6%95%99%E6%9D%90?node-id=176-2&t=5xBOVB521OStGqL0-0))
- 如何與後端協作網頁版型
- 藉由 Vite 講解樣板語言
- 公布獎品

# 一、Layout 觀念設計

1. 什麼是 [Layout](https://www.figma.com/design/ZQn0etbtIsCrmkHqFeeLKo/%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD---%E7%9B%B4%E6%92%AD%E6%95%99%E6%9D%90?node-id=176-2&t=5xBOVB521OStGqL0-0) ？
2. EJS 樣板語言介紹
3. Vite 整合
4. 圖解 app 跟 dist 的差異


# 二、Vite 環境部署教學

## [Vite 範例](https://hackmd.io/V3v9hW9dTlOwFvVA6ycfLg?view)所提供的功能

1. 包含 NPM 套件管理
- 套件管理
2. 使用 EJS 做版型管理
3. 支援 SCSS 編譯功能
4. 儲存檔案時，瀏覽器會自動更新，不需持續按 F5
5. 整合 GitHub 服務，能做到一鍵上傳網站空間

## Vite 環境安裝

1. [Git 安裝流程](https://courses.hexschool.com/courses/20201122111/lectures/60728201)
2. 安裝 Node

## [Vite 環境安裝教學](https://hackmd.io/V3v9hW9dTlOwFvVA6ycfLg?view)

- [ ] 0. 先打開架構，檢視[範例 template](https://www.figma.com/design/ZQn0etbtIsCrmkHqFeeLKo/%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD---%E7%9B%B4%E6%92%AD%E6%95%99%E6%9D%90?node-id=176-2&t=5xBOVB521OStGqL0-1)
- [ ] 1.確認 Node.JS 版本號。 [Vite 環境安裝與部署](https://courses.hexschool.com/courses/20201122111/lectures/60728201)
- [ ] 2. 下載資料夾，並解壓縮檔案
- [ ] 3. 到 VSCode 將資料夾拉入專案
- [ ] 4. 在終端機輸入指令 `npm install` 安裝插件
- [ ] 5. 輸入指令 `npm run dev` 執行
- [ ] 6. 並檢視是否瀏覽器有開啟畫面

> 學員常見問題
>

## GitHub Pages 部署

- [ ] 1. 調整 `vite.config.js` repo 路徑（儲存庫名稱），透過 VSCode 連接 Git 數據庫，先把 main 開發分支部署上去
- [ ] 2. 執行 `npm run deploy` 來執行自動化部署
- [ ] **3. 等講完第三章節，再來講此區塊**：關機後之後要更新要怎麼做？第二個網站要怎麼做，可以複製資料夾嗎？

> 第一次透過 Git、GitHub 安裝時，會出現以下圖示


# [三、提交作業流程](https://courses.hexschool.com/courses/20201122111/lectures/60728209)

第四週需提交 [GitHub Repo](https://github.com/gonsakon/vitetest/tree/main)、[GitHub Pages Demo](https://gonsakon.github.io/vitetest/) 兩個網址給助教

### 提交開發環境(master、main)

git add .
git commit -m 'update'
git push -u origin main

### 提交到部署環境(gh-pages)

npm run deploy

## 中場休息

- 公布獎品 50、60%
- 公布第四週作業

# 四、Vite 架構講解

- [ ] 1. 為什麼要學 EJS
- [ ] 2. Layout(共通區塊)、include 講解，介紹 main.js
- [ ] 3. 編譯模式與新增多頁面流程
- [ ] 可以先把整個架構定出來
- [ ] 4. assets、pages，JS、SCSS、HTML 放置頁面檔案
- [ ] 5. 靜態檔案都放 assets
- [ ] 6. SCSS 編譯與觀察錯誤訊息
- 錯誤
- SCSS 編譯
- [ ] 7. SCSS 背景圖片差異
- 路徑規則
- [ ] 8. 導入 [Sweetalert 2](https://sweetalert2.github.io/) 外部檔案
- JS 可以寫哪？
- [ ] 9. 團隊如何一起協作？(新增各自的 SCSS、EJS、HTML 頁面)
Git 教學：https://courses.hexschool.com/courses/20201122111/lectures/60728095

## 常見問題

- 關閉電腦後，該如何更新與上傳？

# 五、SCSS 教學

使用技巧：

- 環境安裝：以下兩種請勿混用
1. Vite
2. Live Sass：https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
- 巢狀
- 解決多層問題
- 但要避免超過 5 層
- 變數
- 問題：顏色重複命名
- 檔案拆分
- `@import`

## SCSS 影音教學補充

- [SCSS 寫法](https://courses.hexschool.com/courses/670051/lectures/11953745)
- [import 檔案拆分](https://courses.hexschool.com/courses/1eebd3/lectures/11953747)
- [mixin 工具篇](https://courses.hexschool.com/courses/1eebd3/lectures/11953748)
- [載具篇 - @mixin+@content 設計響應式設計超方便](https://courses.hexschool.com/courses/1eebd3/lectures/11953749)
- [結構篇 - 如何循序漸進優化網頁架構](https://courses.hexschool.com/courses/1eebd3/lectures/11953750)

## SCSS 結構參考

@import "variable";// 變數
@import "reset";  // reset.css

// 1. 元件(進階)*
@import "./components/button"; 
@import "./components/..."; 

// 2. 雜項(進階)*
@import "utilities"; 

// 3. 共用樣式
@import "./layout/..."; // 共同框架、第一層

// 4. 分頁樣式
@import "./pages/index";
@import "./pages/page1";

## SCSS 元件命名技巧

> 如果更進階，可以試著將 Scss 以元件的形式進行匯入
>
1. 用外觀命名：
1. 好的：card、button、btn-primary
2. 不好的：product-list、register-btn
2. 用視覺功能命名：
1. 好的：Slider
2. 不好的：Banner
3. 輔助、雜項、原子化：bg-primary、mt-3、d-flex
1. 檔名：_utilities.scss

## 老師 SCSS 範例

- [甜點電商](https://github.com/Wcc723/F2E-PK)
- [六角官網](https://github.com/Hexschool-Private/hexschool-hexo) （私有儲存庫）
- [外部接案](https://github.com/weitsai/howo-web/blob/master/app/assets/stylesheets/all.css.scss)（私有儲存庫）
- [Bootstrap 專案](https://github.com/twbs/bootstrap)

## 先前學長姐範例

- Vicky 學姐：[GitHub Repo](https://github.com/peggyted0129/HexSchoolTraining/tree/main/week4gulp/scss)、[GitHub Pages](https://peggyted0129.github.io/HexSchoolTraining/week4gulp/index.html)
- carrie 學姐：[GitHub Repo](https://github.com/echocarriet/layoutWeek4)、[GitHub Pages](https://echocarriet.github.io/layoutWeek4/index.html)
- chiayutsai 學姐：[GitHub Repo](https://github.com/chiayutsai/week4_glasses/tree/main/app/scss)、[GitHub Pages](https://github.com/chiayutsai/week4_glasses)
- 東京自耕農學長(poscss)：[GitHub Repo](https://github.com/overactive1988/lesson3_homework/tree/master/src/css/css/_include)、[GitHub Pages](https://overactive1988.github.io/HexSchool_webslicinglesson2020/week03/)

## 接下來的預習建議

#### 第五週：後台表單設計

- 表格與表單設計技巧
- Bootstrap 5 - 環境建置
- Bootstrap 5 - Bootstrap 文件介紹
- Bootstrap 5 - Flex 與網格系統介紹
- Bootstrap 5 - 通用類別 Utilities 與 工具 Helpers
- Bootstrap 5 - 表單運用

#### 第六週：導入網頁規範設計流程

- Bootstrap 5 - Bootstrap 最實用的工具 - 元件
- Bootstrap 5 - Bootstrap 與神奇的 Sass

## 第四堂主線任務

- 第三堂 - 多頁式 RWD 品牌形象官網
- 設計稿：https://www.figma.com/design/CYjKvZQo3db8xYCp6DCkKj/%E5%85%AD%E8%A7%92%EF%BD%9C%E9%9E%8B%E5%AD%90%E9%9B%BB%E5%95%86-W3%E3%80%81W4-%EF%BC%88student-ver.%EF%BC%89?t=IGSuF7auMdD4AvIb-0

### 作業等級表

1. LV 1｜做 3 頁以上的 RWD
2. LV 2｜做 4 頁以上含 RWD
3. LV 3｜所有頁面都有 RWD

## 第五堂、第六堂 設計稿

設計稿：https://www.figma.com/design/omevevD7bxbB3wQfL3jXR8/%E5%85%AD%E8%A7%92%EF%BD%9C%E8%81%B7%E6%97%85-WorkWay%EF%BD%9C%E8%81%B7%E6%B6%AF%E8%AB%AE%E8%A9%A2%E5%AA%92%E5%90%88-%EF%BC%88student-ver.%EF%BC%89?node-id=4032-9080&p=f&t=4y6n7PomJhcCFoPp-0