第13組 第四週｜多頁式網頁 gulp === ###### tags: `小組任務` `第四週` `2021夏季切版班` `team13` [【總】小組任務｜2021夏季切版班 Team13](/GrA9x5TMQoGuIhR8xF7eyg) :::info - **開會地點：** meet - **開會時間：** 7/25(日) 19:00 - **討論目錄：**[**第四週任務**](https://hackmd.io/@hexschool/B16wUku0O) `3hr` - [x] 討論（截圖） - 流程 - [x] 公布下週開會時間、更改時程 - [x] 詢問大家意見，維持 19or20 點:改七點 - 操作 - [x] slack 的訊息服用方式(請組員分享螢幕) - [x] hackMD 教學連結用法 - [x] 文件分享之權限是什麼 - [x] github pages的連結 - 上週（RWD、第三週主線） - [x] 上週的資料夾問題 - 組內問題 - [x] scss 盡量不要超過四層 - [x] 響應式 class - [x] 路徑好重要（gulp, scss, bootstrap） - [x] nav 垮下來 - 小組任務 - [x] 規劃 EJS 版型管理 - [x] 規劃 SCSS 結構 - [x] 討論（截圖再確認） - **參與成員**：Ian, Jiang V, Min Chun Tsai, mansonivan, Shani, Summer.H, Sz, Xing, 家齊, 巫樾 - 未參加成員：全員到齊 - 直播內容 - [第四週直播講義](https://hackmd.io/@hexschool/SJWLbAwRd) - 筆記 ::: <!-- [隔壁vue直播班的成發](https://docs.google.com/spreadsheets/d/1Fn0QllOLIKftXCAkCSc83LrF6EPfvOX80yxijz2N1v8/edit#gid=1925826262) --> --- ## 任務一：利用 EJS（樣板語言）進行版型管理 請觀看第[第四週透過 Gulp 部署網站流程](https://courses.hexschool.com/courses/2020112/lectures/33575267)章節後，將眼鏡形象官網透過 Layout+EJS 來整合 ### Q0：樣版？ >layout 共通區塊 每個頁面都會出現的 共同元素抽離出來當成樣板 統一管理 >[name=Jiang V 分享][color=#A7E683] ### Q1：誰會在 layout 裡？ #### 要做成 layout：header, footer ![](https://i.imgur.com/M8kGX0A.png) #### 可以做成 layout ![](https://i.imgur.com/eZWJVJI.png) - 新的 layout-product.ejs (第四週就可以用囉) - 裡面包含原本的 layout + 特定頁面會用到的共通版型 - layout 包 layout（等神人筆記） - [在 Gulp 專案中引入 EJS template ](https://gretema.github.io/Gulp/20200525/2363080042/) #### ejs 檔（樣板），可以有很多個 ![](https://i.imgur.com/UuJmN5A.png) 個別頁面的 layout 記得改即可 ![](https://i.imgur.com/yuoIpOe.png) ### Q2：樣板語言神祕的 `<%- content %>` ![](https://i.imgur.com/Y7kV8uL.png) 個別頁面的內容主要的部份，就會在這裡顯示 其餘共同樣式就有 ejs 做管理 ### Q3：ejs 可以做幾個？ 3個 ![](https://i.imgur.com/Fr4cI8k.png) ![](https://i.imgur.com/2zegesX.png) ![](https://i.imgur.com/283mkN7.png) ### 回答區 **並在回報中提供參與討論組員的 Git Repo 與 GitHub Pages 網址** >>請輸入內容 >>[name=Xing 分享][color=#E69F80] > >>請輸入內容 >>[name=Summer.H 分享][color=#F5697A] > >>[Git Repo](https://github.com/Szyln/slicing.w3.glasses) >>[GitHub Pages](https://szyln.github.io/slicing.w3.glasses/) >>[name=Sz 分享][color=#BB84F5] > >>請輸入內容 >>[name=Shani 分享][color=#FFCE6B] > >>[Guhub Pages](https://viccjiang.github.io/2021layout_week3_glassshop/) >>[Gihub Repo](https://github.com/viccjiang/2021layout_week3_glassshop) >>[name=Jiang V 分享][color=#A7E683] >>請輸入內容 >>[name=Min Chun Tsai 分享][color=#efc267] > >>請輸入內容 >>[name=家齊 分享][color=#96A9C4] > >>https://github.com/kolyfish/week4maintask >>[gh-page 靜態頁面](https://kolyfish.github.io/week4maintask/) >>[name=巫樾 分享][color=#ffcccc] > >>請輸入內容 >>[name=Ian 分享][color=#37E4FF] > >>請輸入內容 >>[name=mansonivan 分享][color=#99ccff] ## 任務二：觀看 SCSS 結構，討論該如何逐步規劃 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://chiayutsai.github.io/week4_glasses/)、[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/) > 若組員操作有問題，還請 tag @穎旻 助教協助~ 結構可以看一下這篇：[SASS 7+1](https://hsiangfeng.github.io/css/20200523/116058774/) sass語法忘記可以看這個：[SASS cheatsheet](https://devhints.io/sass) ### 回答區 大致上分為 * abstract: base, variable, reset, function... * mixin: breakpoint,... * utilites(helper): flex, display 一類 * grid: column, row.... * vendor: plugin * component(module) * layout: header, footer... * pages: index, product... #### component / utilites 的差別 ```sass= // utility 工具 .mb-2 { margin-bottom: 8px; } text-center { text-align: center; } // 直接放到 html 標籤 class 上 ``` component 會包含整個 html 的內容，以及搭配的 css 樣式 ```htmlembedded= <div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> ``` ```sass= // component .card { // 各種設定 &-img-top { // & 是連結符 // 細部各種設定 } // ...還有更多其他 class } // 一組 html ``` & 用法忘記可以看這個找 nesting：[SASS cheatsheet](https://devhints.io/sass) #### 舉例的 component ##### 麵包屑 ![](https://i.imgur.com/F14wBgf.png) 這個是`<nav>`包起來的元件，[可以看 bootstrap 的麵包屑](https://bootstrap5.hexschool.com/docs/5.0/components/breadcrumb/)參考 ```htmlembedded= <!-- 抓一個 bootstrap 來當範例 --> <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> </ol> </nav> ``` ##### 頁面標籤 pagination [頁面標籤 pagination](https://www.w3bai.com/zh-TW/css/css3_pagination.html) --- ## 本週願望 * LV1：任選二頁，只需做 PC 版 * LV2：任選二頁需含RWD * LV3：做三頁以上的 RWD * LV4：所有頁面都有設計 ::: success :::spoiler 上週的願望實現了嗎？ >>[Gulp SCSS 拆分規劃](https://jamboard.google.com/d/1H--mkEhNNALdET4lzVhP0E8El4mwNdbEv6HxvN7HiBg/viewer?f=0) >>第三週希望LV4~LV5 (GG 還沒交 還再看學長姐的) >>第四週希望LV4 >>[name=Jiang V 分享][color=#A7E683] > >>~~lv4，下週lv5~~ >>lv4 >>[name=Sz 分享][color=#BB84F5] > >>~~希望至少影lv3~~ >>已經不知道要把希望擺在何處(死) >>[name=Summer.H 分享][color=#F5697A] > >> LV5 我要出師!!! >> LV5!!!!!!!!!!!!!!!說到做到啦!!!! >>[name=Xing 分享][color=#F5607A] > >>~~做出LV3就阿彌陀佛了~~ >>week3 先出來吧.. >>[name=家齊 分享][color=#96A9C4] > >>~~week3LV3以上~~~ >>week4 希望未來不是夢 LV4 >>[name=Shani 分享][color=#FFCE6B] > >>先求有再求好....lv3完成後在慢慢爬吧.... >>[name=mansonivan 分享][color=#99ccff] > >>往Lv.3以上挑戰~~ >>衝刺Lv.4~ Red bull喝起來!!! >>[name=Min Chun Tsai][color=#efc267] > >> >>~~討論之後 我決定LV1先~~~ >>往 LV3 邊逃避邊緩慢前進中 (可能要再2周吧) >>[name=Ian 分享] >>>>烏龜的速度 >>往 LV3) >>[name=yellamoon 分享][color=#37E4FF] ::: --- ## 其他討論 ### github pages的連結 點到別人的 repository 的時候，沒辦法進 setting，也可以從右下角的這裡點 ![](https://i.imgur.com/jnZIxEN.png) 這裡點 view deployment 就可以直接看到 github pages 了 ![](https://i.imgur.com/3OXj9gI.png) ### 組內問題 #### 不同頁面的 class 如何不打架？ 1. 不要亂設定樣式在 html 標籤上 2. 先在個別頁面外層包一個 class （如下程式碼） 3. 可能可以研究 [BEM](https://ithelp.ithome.com.tw/articles/10160545) 可能，maybe，不敢保證 ```htmlembedded= <div class="index"> // 首頁 <div class="box"> blablabla </div> </div> ``` ```htmlembedded= <div class="product"> // 產品頁面 <div class="box"> dladladla </div> </div> ``` ```css= .index { .box { // 這樣就不會重複ㄌ } } .product { .box { // ～不會重複～ } } ``` ### 組內問題 #### scss 盡量不要超過四層 跟寫 css 一樣，沒有樣式關連的標籤不用寫整條 就像住在台灣，寄信寫地址不用寫台灣一樣 ```css= body header div ul li a img { // no height: 100px; } card-item card-image { // good, 設定 class 來讓 css 更好閱讀 height: 100px; } ``` #### 響應式 utilites 參考 bootstrap 想要寫工具類的 class 可以寫 mb-1，好代入各個 html 標籤 如果要響應式，就專門再寫一個有斷點的 mb-斷點名稱-3 去用 ```sass= // utility 工具：可以放在 html 標籤上使用 .mb-2 { margin-bottom: 8px; } // 因為有斷點，所以同樣都是 margin-bottom，到斷點就會切成這個 @media (max-width: 768px) .mb-md-3 { margin-bottom: 12px; } } ``` #### 位置、順序好重要 1. 用 gulp 的時候資料夾位置很重要，檔案不要開到 dist 去 2. terminal 位置也很重要，錯的資料夾位置，執行後可能效果就會錯 3. scss import 的時候位置也很重要，跟 css 一樣都有後面覆蓋前面的效果，放錯就 debug 到昏倒，到之後的 bootstrap 都是這樣 #### nav 垮下來 ![](https://i.imgur.com/lUif1rd.png) 還沒到斷點，畫面已經小於 max-width ，可以多設斷點 [公頻討論串](https://hexschool-share.slack.com/archives/C0201HR4W5P/p1626917558474200?thread_ts=1626917558.474200&cid=C0201HR4W5P) #### 想要一模一樣的 icon？ [強迫症的 icon](https://hackmd.io/@HexSlicing2021-Team13/materialIcon-outlined) #### position 用法 [絕對定位](https://zh-tw.learnlayout.com/position.html) 父層設 relative 子層設 absolute --- ## 討論截圖 ![](https://i.imgur.com/Xdr5LWH.png) ![](https://i.imgur.com/W6A886r.png)