--- tags: 網頁切版直播班 - 2021 夏季班 --- # 8/3 線上 Slack 助教 ## 今日助教輪班時間 焦糖：8/3 (二) 回覆時間：下午 2:00 -下午 6:00 ## 發問規範 老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？ ## 注意 1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖 ![](https://i.imgur.com/nHE3sOx.png) 2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖 3. 助教會依照 Slack 上的順序回覆問題 4. 以下問題區塊只能由助教自行增加 5. 助教會將回覆寫在下方問題區塊 ## 問題 1. GILL： 老師助教同學們好， 我以link的方式載入boostrap的css，然後以import的放是去組合我的all.scss讓他編譯成all.css放置boostrap.css的下方(圖一) 想詢問我在寫個頁面的樣式時，他是否可以吃到boostrap的變數呢?還是說要自己再去定義變數? 因為我在寫_base.scss的時候，他一直顯示我的第三、四行有錯誤(圖二) > 助教回覆： link 是已經編譯完的，如果要吃到變數，需要使用編譯前的～ 因此還是建議都使用 gulp 編譯的方式 --- 2. Page Shih： 不好意思助教，上一批有問關於上傳gh-page的部分，可是我改了之後還是一樣，修改之前我在header的background-image，網址前面有加".." background-image: url("../images/banner.png"); 但我在下面的聯名設計鏡框背景圖沒有加".." background-image: url("/images/bg.png"); 結果這兩種寫法在gh-page都一樣沒有顯示，所以這兩種網址應該都不可行?還是說不是網址的問題呢? 另外我也檢查過app和gh-page的asset裡面這兩張圖都是在的 而現在改過的背景圖都是用第二種寫法，我在本地開gulp的時候圖片都是在的 :向下指:修改過的： gh repo gh page 再麻煩助教了，謝謝! > 助教回覆： 助教把路徑修改成 background-image: url('../images/banner.png'); 並推上自己的 github 上沒有問題唷！可以正常顯示，你再試試看。[如圖](https://imgur.com/a/EeLueuz) --- 3. ZY Hsu： 老師助教同學們好，這是我的 Codepen， 我原本預期「HTML 第 65 行 在加上justify-content-between後會呈現出元件貼其頭尾的畫面」，但卻沒出現預期的效果，想問下問題出在哪裡？ (已編輯) > 助教回覆： 原因是寬度不夠的關係，所以看起來才沒有吃到 space-between 的屬性(其實是有正確的吃到的)，我把寬度改成 500px 就很明顯了，[如圖](https://imgur.com/a/2JjwwRh)。 --- 4. 陳品宏： 老師助教同學們好，這是我的gh-page https://github.com/wtka/Glasses/tree/gh-pages/assets ，我的資料夾裡有bg.png這張圖片，css也有寫background-image: url(../images/bg.png);，可是網頁都沒有顯示出來，想請問問題出現在哪裡? > 助教回覆： class 的名稱沒有對應到喔，你在 index.html 是 .co-branding，在 _index.scss 是 .co-brading。(少了一個 n) --- 5. roger： 老師助教同學好，目前在做第五周作業遇到了問題，這是我的gh-page 和repo，我想請問助教要如何透過ejs把導覽列放置在左側，表格放置在右側 > 助教回覆： 可以先在 layout.ejs 最外層先加入一層 div 並使用 d-flex 來包住所有內容。 例如像是 ``` <div class="d-flex"> <nav> ......... </nav> <%- contents %> </div> ``` 接著在 index.html 的最外層也加入一層 div 來包住所有內容，就可以達到你要效果了。[如圖](https://imgur.com/a/gbRvw3o) --- 6. Jamie：老師助教同學們好，這是我的gh-page 和repo ，我在做第三周LV1作業時，手機版的header沒出現預期的效果，想問下問題出在哪裡？ > 助教回覆： 首先移除 .header 的 height 140px( PC 版的 height: 108px 也要記得移除)，接著把 justify-content 改成 space-around; 最後再針對 logo 調整上下間距就差不多了。 --- 7. 沈依蓉： 老師助教同學們好，我想請問助教，這是同學整理好的icon，我想知道他是如何找到這些資料的，“連結“和”圖示“，因為我之前所使用的是<i>標籤的icon但是為什麼他的icon 是<span>標籤的？且連結和我找到的文章資料不同! > 助教回覆： 這個是 Material Design Icon 唷，和 Bootstrap 使用的 font awesome 不太一樣，這裡有 Material Icon [使用說明](https://google.github.io/material-design-icons/)。 --- 8. zyc： 焦糖助教您好，我wk5作業想使用 BS5 的元件來切版，並且在今天完成 layout 左側 navbar 的部分。但是有很多觀念還未釐清，想跟您確認以下3點： ① 使用 CDN via jsDelivr 自行載入 BS5 CDN。 在 layout.ejs <head> 加入下列 code，然後加入某個元件，有成功出現在網頁上。 確認觀念：所以載入 CDN 後，就可以得到 BS repo scss 內的所有功能，如此頁面？ ``` <link href="<https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="<https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js>" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> ``` ② 製作左側導覽列表時，參考這兩個文件 BS/scss/_nav.scss、BS/scss/_navbar.scss，並且把要用到的 class 加入自己的 html 內對嗎？但是如下列code，怎麼更改 $nav-link-padding-y 或是 ``` if($link-decoration == none, null, none);@include transition($nav-link-transition);的設定呢？ .nav-link { display: block; padding: $nav-link-padding-y $nav-link-padding-x; @include font-size($nav-link-font-size); font-weight: $nav-link-font-weight; color: $nav-link-color; text-decoration: if($link-decoration == none, null, none); @include transition($nav-link-transition); ``` 謝謝。 ③ 看完8/3助教直播影片的理解是， wk 5的作業可以套用很多 BS5 的環境(?)和元件，所以可以省略掉很多 partial，例如裝 containers及斷點設定的 _gird.scss。 但是如果要自行設定字型&字體的話，新增_base.scss（設定全站式 body，headings，a，img） 和 _variable.scss（設定字型大小和顏色等）並 @import 到 all.scss 內，是否會跟載入的 BS 文件有衝突呢？ 謝謝。 > 助教回覆： 1.沒有錯喔！利用 CDN 的方式載入 Bootstrap 也是可以獲得相同的結果。 > 2.這裡不需要更改唷！若需要更改 padding 或是更改其他屬性的話，可以直接加上相對應的 class 就好了。可以[參考連結](https://getbootstrap.com/docs/5.0/components/navbar/)。 >3.沒有錯，可以省略掉很多的設定。因為 Bootstrap 都幫你寫好了，像是 .container .d-flex 等。但這是 Bootstrap 的優點也是他的缺點，缺點就是你要對於 Bootstrap 有一定程度的了解，才能夠自己去修改他的變數(不然很容易造成衝突)。例如要修改字體大小 --> 可以到 variables.scss 的 $display-font-size 去修改，可以[參考連結](https://getbootstrap.com/docs/5.0/content/typography/)。 ( 提醒一下第五週的作業不會修改到變數唷 ) --- 9. Sec： > 助教回覆： 因為在 .blog-post-img 你有加上 height: 208px 限制的高度。可以移除 height 並使用寬度的方式讓高度自適應就好，[如圖](https://imgur.com/a/YgWXn15)。另外可以加上 object-fit: cover; 可以避免圖片被拉伸。 --- 10. 沈依蓉：助教: 請問我在那份文件上找到了它的連結，但只有看到一個，同學給的有兩個連結，請問另一個連結是什麼 ？ > 助教回覆：這個可以[參考連結](https://hackmd.io/@HexSlicing2021-Team13/materialIcon-outlined) --- 11.