* 記得錄影
* 分享各小組的第三週
* 頁面切換與 Layout 設計 ([老師範例](https://cacoo.com/diagrams/QHmZu18tdwZZG3qJ/CD531))
* 如何與後端協作網頁版型
* 藉由 Vite 講解樣板語言
* 每日助教服務下週一釋出
* 公布獎品，9/10(日) 作業截止！
# 一、Layout 觀念設計
1. 什麼是 [Layout](https://cacoo.com/diagrams/QHmZu18tdwZZG3qJ/CD531) ？
2. EJS 樣板語言介紹
3. Vite 整合
4. cacoo 畫圖 app 跟 dist 的差異

## 額外紅利服務
* 下週一開放每日助教服務，讓大家問到飽！
# 二、Vite 環境部署教學
## [Vite 範例](https://hackmd.io/V3v9hW9dTlOwFvVA6ycfLg?view)所提供的功能
1. 使用 EJS 做版型管理
2. 支援 SCSS 編譯功能
3. 儲存檔案時，瀏覽器會自動更新，不需持續按 F5
4. 整合 GitHub 服務，能做到一鍵上傳網站空間

## Vite 環境安裝
1. [Git 安裝流程](https://courses.hexschool.com/courses/202011221/lectures/47249925)
2. 安裝 Node

## [Vite 環境安裝教學](https://hackmd.io/V3v9hW9dTlOwFvVA6ycfLg?view)
- [x] 0. 先打開架構，檢視[範例 template](https://cacoo.com/diagrams/QHmZu18tdwZZG3qJ/CD531)
- [x] 1.確認 Node.JS 版本號。 [Vite 環境安裝與部署](https://courses.hexschool.com/courses/202011221/lectures/47249925)
- [x] 2. 下載資料夾，並解壓縮檔案
- [x] 3. 到 VSCode 將資料夾拉入專案
- [x] 4. 在終端機輸入指令 `npm install` 安裝插件
- [x] 5. 輸入指令 `npm run dev` 執行
- [x] 6. 並檢視是否瀏覽器有開啟畫面
> [學員常見問題](https://hackmd.io/tty8aLK0RC6p3l_hSWwf9w)
## GitHub Pages 部署
- [x] 1. 調整 `vite.config.js` repo 路徑，透過 VSCode 連接 Git 數據庫，先把 main 開發分支部署上去
- [x] 2. 執行 `npm run deploy` 來執行自動化部署
- [x] **3. 等講完第三章節，再來講此區塊**：關機後之後要更新要怎麼做？第二個網站要怎麼做，可以複製資料夾嗎？

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

:::

# [三、提交作業流程](https://courses.hexschool.com/courses/202011221/lectures/47249932)
第四週需提交 [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 架構講解
- [x] 1. 為什麼要學 EJS
- [x] 2. Layout(共通區塊)、include 講解，介紹 main.js
- [x] 3. 編譯模式與新增多頁面流程
- [x] 4. assets、pages，JS、SCSS、HTML 放置頁面檔案
- [x] 5. 靜態檔案都放 assets
- [x] 6. SCSS 編譯與觀察錯誤訊息
- [x] 7. SCSS 背景圖片差異
- [x] 8. 導入 [Sweetalert 2](https://sweetalert2.github.io/) 外部檔案
- [x] 9. 團隊如何一起協作？(新增各自的 SCSS、EJS、HTML 頁面)

## 常見問題
* 關閉電腦後，該如何更新與上傳？

# 五、SCSS 教學
* [簡報](https://docs.google.com/presentation/d/11-HFPxkmVj5b6WP50zkKB_GtccvynUu3GaDeALaLpd0/edit?usp=sharing)
* 環境教學 (Live Sass(工作區)、Vite)
* [Live Sass Compiler 文件教學](https://ithelp.ithome.com.tw/m/articles/10202661)
* 變數設計
* import 檔案切分
* import 拆分規劃

## SCSS 影音教學補充

* [prepos 軟體安裝教學](https://courses.hexschool.com/courses/670051/lectures/11953744)
* [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  
@import "layout"; // 共同框架,第一層
@import "index";     
@import "page1";     

## 老師 SCSS 範例
* [2014 MOPCON](https://github.com/gonsakon/mopcon2014/blob/master/sass/all.sass)
* [2018 The F2E](https://github.com/gonsakon/theF2EPK/blob/master/source/sass/all.sass)
* [Bootstrap](https://github.com/twbs/bootstrap/tree/master/scss)

## 上一梯學長姐
* 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/)

## 第四週主線任務(本週五開放繳交)

* <a href="https://rpg.hexschool.com/training/36/task?type=detail&id=349" target="_top">第四週 - 眼鏡形象網站</a>、<a href="https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/grid/" target="_top">設計稿</a>、[圖片下載](https://github.com/hexschool/2022-web-layout-training/tree/main/week3-4)

## 作業等級表
以下等級，都必須透過 Gulp 上傳到 GitHub Pages
1. LV1：任選二頁含 RWD
2. LV2：做三頁以上含 RWD
3. LV3：所有頁面都有設計