# 第四週

本頁連結：https://hackmd.io/b_lVK8yQRQKpbYWZK6XNkw?view

## 課前說明

- 專題班週日活動
- 主線作業繳交獎勵

## 本週課程
- 記得錄影
- [GGV 影音課程](https://courses.hexschool.com/courses/2020112211/lectures/53654004) 大家看了沒？
- 傳統網頁多頁式怎麼做
- 複製貼上
- 頁面切換與 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 講解樣板語言
- 每日助教服務下週一釋出
- 7/29 ~ 9/6
- 公布獎品，9/8(日) 作業截止！

# 一、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/2020112211/lectures/53654004)
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/2020112211/lectures/53654004)
- [ ] 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/2020112211/lectures/53654012)

第四週需提交 [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/2020112211/lectures/54827548

## 常見問題

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

# 五、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 "button"; 
@import "..."; 

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

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

// 4. 分頁樣式
@import "index";
@import "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

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

- 第四週 - 眼鏡形象網站 <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)

## 作業等級表

以下等級，都必須透過 Vite 上傳到 GitHub Pages

1. LV1：任選二頁含 RWD
2. LV2：做三頁以上含 RWD
3. LV3：所有頁面都有設計