---
# System prepended metadata

title: 南2組 - 第五週小組任務
tags: [2023切版直播班, 南2組, 小組任務, 六角學院]

---


:::spoiler 目錄
[TOC]
:::
<hr>

:::success
【[題目連結](https://hackmd.io/qqCWpYimSsawvIu9VqN4tw)】

<!-- 【檢核】
- [x] 參與人數: 8人
- [x] 參與名單
- [x] 任務內容
- [x] 討論截圖 -->

:::


## 參與人員
- [x] 阿榮#8277
- [ ] PayRoom#8328
- [x] WA#9787
- [x] Tina02
- [x] AYA
- [x] I401#7101
- [x] abalun#6727
- [x] jia yu#8896
- [ ] 無敵笨笨貓#3628
- [x] 貓咪#6294



## 任務一：請每個小組討論成員，試著載入 BS5 ，並作出 modal 效果
請使用 codepen 來練習，回報也可用 codepen
如果有成員想用 GitHub Pages 來放到自己的環境練習也可以

### ✅任務完成

| # | 組員 | 連結 |
|:-:|:----:|:--------:|
| 01 | AYA 		| [Codepen](https://codepen.io/NoNameNote/pen/zYMbyXz)		|
| 02 |PayRoom	|[CodePen](https://codepen.io/water38198/pen/mdQooxW)
| 03 |jia yu	|[Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/wvQOZXZ)		|
| 04 |WA			|	[Codepen](https://codepen.io/ldddl/pen/BaGbMmo)|
| 05 |abalun	|	  |
| 06 |Tina		|	[Codepen](https://codepen.io/chjitlox-the-bashful/pen/WNYmqKy)	|
| 07 |阿榮		 |[GitHub Pages](https://peg-l.github.io/week5-dashboard/admin.html) <br>	以及 [Github Repo](https://github.com/Peg-L/week5-dashboard)|
| 08 |PayRoom	| 	 |
| 09 | 無敵笨笨貓|  |
| 10 | 貓咪		|  |


## 任務二：討論 HTML 裡的表格標籤(table、th、tr、td)的用法，請試著做出設計稿裡面的表格設計，並提供 codepen 來檢視

### ✅任務完成

| # | 組員 | 連結 |
|:-:|:----:|:--------:|
| 01 | AYA 		|		|
| 02 |PayRoom	|[CodePen](https://codepen.io/water38198/pen/mdQooxW)|
| 03 |jia yu	|[Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/MWzxRzy?editors=1100)		|
| 04 |WA			|[Github Pages](https://ldddl.github.io/adminTemplate/)|
| 05 |abalun	|	  |
| 06 |Tina		|	[CodePen](https://codepen.io/chjitlox-the-bashful/pen/MWzRjmg)	|
| 07 |阿榮		 |[GitHub Pages](https://peg-l.github.io/week5-dashboard/admin.html) 以及 [Github Repo](https://github.com/Peg-L/week5-dashboard)|
| 08 |PayRoom	| 	 |
| 09 | 無敵笨笨貓|  |
| 10 | 貓咪		|  |


## 任務三：討論第五週版型該怎麼做
一個人能力有限，八個人團結力量大，彼此討論該版型如何攻略，才能發揮團隊最強力量，攻破最終 BOSS

### 1. 任務一重點
* 載入 [Bootstrap CDN](https://bootstrap5.hexschool.com/docs/5.1/getting-started/download/#cdn-via-jsdelivr)
* 複製 CDN 貼到codepen html的head區塊，css、js都要，modal會用到js (如下圖)
```
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
```
![](https://hackmd.io/_uploads/H1myXI73h.png =60%x)
* 放好BS5 CDN後可以小小測試一下，選擇[按鈕測試](https://bootstrap5.hexschool.com/docs/5.1/components/buttons/#examples) 點程式碼區塊右上方的"copy"，再貼到codepen上
* 順便用container看有沒有格線系統，有這些樣式就表示有載入成功
![](https://hackmd.io/_uploads/r1ToXIm22.png =80%x)
* 接著到 [modal](https://bootstrap5.hexschool.com/docs/5.1/components/modal/#static-backdrop) 複製程式碼貼上codepen
* 可以加上 modal 內的[滾動長內容](https://bootstrap5.hexschool.com/docs/5.1/components/modal/#scrolling-long-content)
(透過在 .modal-dialog 中加入 .modal-dialog-scrollable 來創建一個 body 可滾動互動視窗。)

### 2. 第五週任務 material icons 關鍵字統整

| 類別       | icon        | 關鍵字                                 |
| ---------- | ----------- | -------------------------------------- |
| 側欄       | dashboard   | insert_chart                           |
|            | question    | forum                                  |
|            | assignment  | assignment                             |
|            | course      | video_library                          |
|            | admin       | group                                  |
|            | settings    | settings                               |
| navbar     | 搜尋        | search                                 |
|            | 小鈴鐺      | notifications_active                   |
| assignment | ID 向下箭頭 | arrow_downward <br> arrow_downward_alt |
|            | 眼睛        | visibility                             |
|            | 編輯        | edit                                   |
|            | 迴紋針      | attach_file                            |
|            | 星星        | star                                   |
|            | 箭頭下一個  | navigate_next                          |
|           | 箭頭上一個  | navigate_before                        |
|modal|圓形打勾| check_circle|
||三角形警告| warning|


### 3. 手刻-container?
後台設計稿可以使用 Bootstrap container，設定 variables 檔案中的變數

### 4. 注意按鈕間距
![](https://hackmd.io/_uploads/S1Oeu0no2.png =75%x)

### 5. 裁切多餘文字
- 會自動把超過單行的文字，用 `...` 呈現

![](https://hackmd.io/_uploads/SJ0mNyTih.png =50%x)

```CSS!
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
```

### 6. ejs 寫 sidebar
左邊側欄的部分，我建立了一個 sidebar.ejs，但 sidebar 要依據目前是在哪個頁面做變化，相對應的按鈕要變成綠色 + 綠色左 border，例如：在 admin 頁面， admin 會變綠色並加上 border。
![](https://hackmd.io/_uploads/H1UFDIXh2.png =30%x)

* ejs 引入方式，後面多傳入一個 **物件**
告訴它這個是 admin 頁面
admin.html
`<%- include('./layout/sidebar', {page: "admin"}); -%>`

* 另外，在 class 加入判斷式，如果 page 是 admin，就加上 text-primary border-start.....，不是 admin 就加上 text-gray-900
`<%= page === 'admin' ? 'text-primary border-start border-4 border-primary' : 'text-gray-900' %>`

sidebar.ejs 完整段落
```
<li class="mb-4">
  <a class="fs-4 py-1 fw-bold px-8 <%= page === 'admin' ? 'text-primary border-start border-4 border-primary' : 'text-gray-900' %>" href="./admin.html">
    <span class="material-symbols-outlined me-3 align-middle py-1"> group </span>Admin
  </a>
</li>
```

* assignment 的也是一樣做法，把 admin 改成 assignment
因為設計稿只有用到這兩個頁面，我就只在這兩個 a 加判斷式，不然其他的 class 其實也要加
* 判斷式是使用 [**三元運算子**](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_operator) 的概念
* navbar 也可以運用類似的方法來寫判斷，要放 add new admin 還是 all courses 的按鈕 

## 其他討論
[網站](https://www.kadokado.com.tw/)的標籤區要怎麼左右移動
```
overflow-x: scroll;

.category::-webkit-scrollbar {
    display: none;
}
```

## 語音 & 文字討論截圖

> 【討論時間】： [time=Sun, Aug 06, 2023 20:00 PM]
![](https://hackmd.io/_uploads/rk7AxUm3n.png =30%x)

![](https://hackmd.io/_uploads/ByrbZ8X2h.png =50%x)

![](https://hackmd.io/_uploads/BJcN-8Qhh.png =50%x)



{%hackmd RAtn1iEBRO2tCbZeA-NylQ %}
