---
# System prepended metadata

title: 8/3 線上 Slack 助教
tags: [網頁切版直播班 - 2021 夏季班]

---

---
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. 