本週的知識含金量比起過往幾週，有者顯著性的提高。這週提及了模組化管理的基礎(像是 Pug 和 Gulp)，也講述了如何製作多頁式網頁，並擅用 SASS 的方式來讓網頁的 CSS 的可讀性和維護性都變得更容易。
第四週課程重點
基礎知識
- Layout 可以認知成將設計師的 UI 稿件，規劃 img, div, ul, li …..等等的區塊圖，讓你可以到時在 HTML 實作時，可以先行有架構於腦海中。同時，也可以跟設計師設想最後是否有難以實現的地方。
- 當一個網頁有 10 個以上的版面，你會發覺沒有辦法模組化來管理你的頁面，在維護上會有重工和更改上的困難。這就是 Gulp 這類的工具出現的起因，你可以預先撰寫一些 JS Code 在你的 HTML 內，然後再送到後端處理。
- 與後端協作時，前端工程師可以先將你的樣板加上一些備註，讓後端知道哪些地方會根據不同的使用者情境(像是登入/登出)來做變化
經驗談
- 要留意重複顯示的區塊，那就表示你可以寫在共用的 Layout 中，然後只要抽換中間的內容即可
- SCSS 撰寫時，越多巢狀架構會導致效能低落，請小心
- 適當的使用變數、import、抽出共同部分，可以使維護的難度大為降低
切版練習結果
目前改放置到 Github Pages 上，歡迎大家前往觀看。
網址：https://github.com/andy922200/HexSchool2020Spring
