---
tags: 網頁切版直播班 - 2021 夏季班
---

# 8/23 線上 Slack 助教

## 今日助教輪班時間

JasonLu：8/23 (一)
回覆時間：下午 1:00 -下午 5:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. YuriT :
助教您好, 想請教 Button元件化遇到的一個問題...這是我的連結
想請教如何做比較妥當呢?
1. 自訂hover效果類別 並設於html上
1. 直接覆寫bootstrap5的類別去做想要的hover效果

再麻煩助教解惑, 謝謝您~

> 助教回覆： 這兩種做法助教比較建議第二種。但如果是使用變數編譯的話還是建議去修改 Bootstrap 的 SCSS 檔，這樣就不用每個按鈕的樣式都要再覆蓋一次

---

2.Karen Huang :
助教你好～
這是我的[repo](https://github.com/CodingSnorlax/TaipeiContemporaryArtFest2021/tree/main) &[ page](https://codingsnorlax.github.io/TaipeiContemporaryArtFest2021/)
* 在第六週作業的設計稿上，同時也是在我的orderCustomer.html這一頁的109行，由於我發現填寫訂購資訊頁的關閉按鈕消失了，但因為本來寫好會佔一欄，我也因為偷懶，不想再調整結構，所以將這欄改為d-none，也希望這一欄在grid上欄位能保留，不知道這樣的處理方式是否妥當？但因為內容消失，會影響SEO嗎？還是有什麼更好的調整方法呢？
* 同時也是在我的orderCustomer.html這一頁，原本選數量的＋與-按鈕，我在這邊是用刪除的，不曉得直接刪除或用d-none的方式，假如我是設計師，哪一種寫法對前端工程師較為方便？
* 在寫購物流程這邊的時候，本來想要用 ejs 套模板的方式，把固定的html結構（像是timeline）用ejs的模板方式套入，就可以不用再重複寫，但試著把timeline獨立一份ejs出來，再用 include的方式也失敗了，不知道助教這邊可以提供什麼說明文件或是流程嗎？因為看助教的直播影片好像沒有特別說明這一塊，但又很想知道。
* 在寫網頁的時候，也很好奇，什麼時候是該用 p段落的時候？我大概知道，h1~h6都是有分層級的重要性在選用，但有時候像是打一個「全票」、「驗證碼」這種，該用span或p段落？因為感覺p段落是有一個段落性的感覺，那這種簡短的文字，在html上應該如何如何規劃他的架構比較好？

> 助教回覆：
1.將元素隱藏會影響 SEO，因此建議不要把重要性高的內容隱藏，例如:標題。而關閉按鈕在這一頁 d-none 的話影響沒那麼大，若不會操縱 JS 讓按鈕 d-block 的話可以移除。

2.這個部分要看版面操作的需求。如果 +、- 按鈕需要在點擊數量 01 之後會顯示，那麼 +、- 按鈕就要先 d-none，點擊 01 後透過 JS 移除按鈕的 d-none ； 如果 +、- 按鈕在這一頁都不會出現的話，那麼 按鈕的 html 標籤可以刪除。

3. 這一部分可以這樣調整:
step1: 將 時間軸 確認訂單區塊 移到 layout.ejs

step2: 在 container 的 class 加上 <%- display %> ，並且把結帳頁面的變數 display 改成 d-block，其餘頁面的則改成 d-none

step3: 修改各結帳頁面的 current 變數

step4 在 class 寫條件判斷邏輯，例如:<%- current == 'chcek || consumer || payment '? 'timeline-pointer-pass' : 'timeline-pointer' %>

layout.ejs :

`<div class="container  <%- display %>">
    <div class="row pt-5">
      <div class="col-md-8">
        <div class="row timeline-section mb-5 mb-md-7">
          <div class="col-3 g-0">
            <div class="<%- current == 'chcek || consumer  || payment '? 'timeline-pointer-pass' : 'timeline-pointer' %>">
              <p class="pt-2 fs-9">確認訂單</p>
            </div>
          </div>
          <div class="col-3 g-0">
            <div class="<%- current == 'chcek || consumer  '  ? 'timeline-pointer-pass' : 'timeline-pointer' %>">
              <p class="pt-2 fs-9">填寫訂購資訊</p>
            </div>
          </div>
          <div class="col-3 g-0">
            <div class="<%- current == 'chcek '? 'timeline-pointer-pass' : 'timeline-pointer' %>">
              <p class="pt-2 fs-9">填寫付款資訊</p>
            </div>
          </div>
          <div class="col-3 g-0">
            <div class="<%- current == 'chcek'? 'timeline-pointer-pass' : 'timeline-pointer' %>">
              <p class="pt-2 fs-9">完成訂購</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div> `
 
  ...

4. 助教覺得兩者比較大的差別在於語意，p 標籤 具有文字段落的語意，而 span 不具有語意，主要是為了方便排版，在塊級元素內包裹一段行內的文字做 css 樣式或 javascript 操作。「全票」、「驗證碼」如果跟表單有關的話比較建議 使用 checkbox+label，如果不是被包裹在塊級元素裡要特別對 文字 「全票」、「驗證碼」寫樣式的話，使用 p 標籤 會比較適合
---

3.助教你好
bootstrap的fixed-top設定是
top:0
right:0
left:0
這樣會造成滿版，當icon的位置在你要點擊的右邊時
會變成無法點擊，這樣要怎麼修改比較好?
連結

> 助教回覆：這個問題是因為 .fixed-top 同時設定了 left:0、right:0 造成的，只是 Bootstrap 沒有 left:auto 這個 util，所以只能自己寫 z-index:-1; 覆蓋 .fixed-top 設定的 z-index:1030

或者是也可以把 .fixed-top 移除，改成 .position-fixed .end-0 拆開
>

---

4.袁祥恩 : 助教午安您好，最近遇到上傳問題，似乎到最後一個步驟gulp deploy的時候會錯誤，不知道該怎麼修改

---

5.Gill:
老師助教同學們好，想詢問一下第六周的作業
附上我的[ pages](https://gill74123.github.io/week6/)
1. 在檢視的時候右側會出現空格，但有時又不會，有想說可能是某個斷點不小心推到左右的px，但測試了之後在同個斷點裡卻有時會有有時不會有(例如991和930)
2. 還發現另一個問題是，在有空格的頁面，照常往下滑，畫到"猜你也喜歡"出現時，空格又會消失了

助教回覆： 這個是 AOS 套件 fade-right、fade-left 造成的 [overflow](https://github.com/michalsnik/aos/issues/416) ，需要加上 overflow:hidden ，這是個地雷，要小心

 html,body{
  overflow-x:hidden;
}

---

6.lumei :
助教您好，這禮拜突然遇到關於bootstrap mixin breakpoint 終端機的error問題，想請問要怎麼解決呢？ 使用gulp bs5和gulp bs5 fix都會遇到這個問題，但bs5版本雖然出現錯誤，結果還是正常的 （程式只更動.index__h1 裡的斷點)
另外還發現variables裡的變數用在_index.scss都會有錯誤

> 助教回覆 : 因為 layout/index.scss 檔名沒有加下底線 "_" 所以 index.scss 也會另外編譯一份 index.css，但因為在 index.scss 裡找不到 變數、@mixin 所以會報錯
---

7. Alicia Lo :

助教您好: 這是我的github-repo 和 github-page，我在index.html 的 第 23-54行 、_index.scss 的 第21-45行 的 nav-scroller部分遇到一個問題，當我滑動的時候，只有最左邊的list item “音樂” (index.html第26-28行) 無法透過滑動顯示出來(如影片所示https://youtu.be/3ukJXWUu1w4)，想請教助教這個問題應該如何解決比較好，謝謝助教:pray:

> 助教回覆： 這是因為 .nav 上設定的 justify-content-center 造成的，建議在手機時改為 .justify-content-start ，平板時切換成 justify-content-md-center

---

8.Karen Huang :
助教您好～
這是我的repo & page
想請教就是，我在寫網頁的時候，想要把pages內的scss簡化，但因為在寫background-image的時候，目前這邊的內容都還是寫在page資料夾內的scss，例如index.scss、event.scss，然後我參考BS5文件，發現background-image他好像也不是components? 當然也不會是utilities吧 XD，所以當網頁中有很多要寫背景圖的地方的時候，我可以將這些背景圖都集中在哪一支scss內比較符合結構？謝謝 (edited)

> 助教回覆:除了放在個別頁面的 scss 以外，可以也比較適合放在 base 資料夾的_background.scss，這種方式的想法是把 background-image 當作全站的圖片設定，就像_typography.scss 是對文字所有設定的概念

---
9.Jiang V:
助教您好，有個問題想請問，navbar 的區塊好像沒有吃到container的樣式，尤其是在mobile的情況下比較明顯，左右兩側的gutter不見了，整個都貼齊邊緣，不知道哪裡出問題了，請助教協助，這是我的 repo / gh-pages 謝謝助教

> 助教回覆： 這是因為同學修改變數 $grid-gutter-width 的值沒有加上單位 rem

  原本:
   $grid-gutter-width:1.875;//1.5rem !default;

 修改成:
   $grid-gutter-width:1.875rem ;//1.5rem !default;

修改後 container 的左右 gutter 就出現了

---

10.Page Shih:
老師助教同學們好，這是我的 Git repo，我修改完程式碼後，使用gulp的時候瀏覽器沒有幫我打開預覽網頁，而是出現 Cannot GET / ，現在dist資料夾裡面沒有網頁，只剩下assets，請問我是動到什麼了嗎? 謝謝

> 助教回覆： 有以下設定錯誤導致解析時 yaml 的格式錯誤，造成無法通過編譯
> 1.index.html 變數 navigation 的值 d-none 不用雙引號 ""
> 2.layout.ejs 引用變數 <%- navgation %> 少了 i
> 3.layout.ejs 有引用變數 subscribe ( <%- subscribe %> )，但是在 index.html 沒有宣告這個變數，所以會出錯
> 4. layout/index.scss 為合併用的 scss ，建議加上下底線 _
>
>
> 以上 設定修正後就網頁就可以正常顯示了~
> 

---

11.助教你好，這邊有關於第八週作業
1. 如附圖，li因為gutter沒辦法滿版，想請問有什麼解決方式
1. 漢堡點擊時會出現黑色框框，有辦法消除嗎:sob:
1. 請問btn的border該如何更改寬度，我試著在變數新增border-width-s (_variables.scss 371行），並在layout.ejs 42行新增class ，開發人員工具看有這行但是沒有辦法蓋過去，因為後面也有１px的，所以直接更改變數好像也不好，不知該怎麼做才能更改成0.5px

> 助教回覆：

1.可以在手機板的時候設定絕對定位 top:100%、left:0、width:100%、background-color、， pad、pc 的時候在切換回 relative width:auto、top:0 left:0 如果遇到圖層被覆蓋可以在補上 z-index
改完之後會是這樣:

2. 這個框框是 .navbar-toggler:focus 的 box-shadow 效果 ，可以去 Bootstrap _navbar.scss 檔找 .navbar-toggler focus 時 box-shadow 的設定註解掉

3. 因為 css border-width 的寬度 最小只能是 1px ，設定小於 1px 解析後會變成 1px ( [stack overflow](https://stackoverflow.com/questions/13891177/css-border-less-than-1px) )

---