[<img align="left" width="80" height="auto" src="https://m3.ypcloud.com/cms/jdi_cards_jbuilder_cms_a1ff1a11b5.png">](https://run.ypcloud.com/)

## 目錄
* [甚麼是 jBoard](#甚麼是-jBoard)
* [jBuilder 與 Dock Builder](#jBuilder-與-Dock-Builder)
* [如何進入 Dock Builder](#如何進入-Dock-Builder)
* [jBuilder 使用者介面](#jBuilder-使用者介面)
* [Dock Builder 使用者介面](#Dock-Builder-使用者介面)
* [製作 jBoard 的過程](#製作-jBoard-的過程)
* [教學影片](#教學影片)
* [jBoard 範例](#jBoard-範例)
* [page://](#App-Field)
* [看板庫清單](#看板庫清單)
* [Dock 庫清單](#Dock-庫清單)

#### 連結
* [jBoard](https://jboard.ypcloud.com/)
* [jBuilder](https://jbuilder.ypcloud.com/)

---
## 甚麼是 jBoard
使用 jBuilder，您可以創建可用作數位顯示板或數位儀表板的 jBoard。

一個 jBoard 由一系列單獨的看板組合在一個 Dock 選單上，每個看板都有自己的 Dock 頁面。

您可以在 jBoard 底部的 Dock 選單之間切換 Dock 頁面。

換句話說：jBoard = 看板 + Docks

---
## 使用 jBuilder 創建的看板範例：


---
## 結合 Dock builder 後的 jBoard 範例：


---
## jBuilder 與 Dock Builder
jBuilder 有兩個主要的工作區域。 <br>
在預設的 jBuilder 工作區域中，您可以創建單獨的看板，然後轉到 Dock Builder 工作區域，將一系列看板組合成一個完整的 jBoard。

* jBuilder 用於製作看板
* Dock Builder 用於添加 Docks 並將看板組合成 jBoard

---
## 如何進入 Dock Builder：
從預設的 jBuilder 工作區域，單擊左上角的<img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30>圖標進入 Dock Builder。 <br>
要離開 Dock Builder 並返回 jBuilder，單擊<img src="https://i.imgur.com/HopFYkU.png" width=35 height=30>圖標。

---
## jBuilder 使用者介面

<img src="https://i.imgur.com/fuglHd7.png" width=760>

在左側<img src="https://i.imgur.com/66dK5wO.png" width=30 height=30>，使用者可以透過指定欄和列的數量，以及啟用或停用表格框架的標頭和腳注，來定義板面。該板面網格作為板面的框架，有助於我們管理元素之間的比例，實現響應式網頁設計。

接下來是<img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30>，它可以進入 Dock Builder。

工具欄右側的圖示具有以下功能：
* 儲存板面 <img src="https://i.imgur.com/TJUZUG1.png" width=35 height=30>，圖示在您開始編輯板面/Dock之前不會顯示
* 新增面板 <img src="https://i.imgur.com/J4a1Laa.png" width=30 height=30>
* 刷新工作區以開始新的板面 <img src="https://i.imgur.com/0EQSXdh.png" width=30 height=30>
* 以 JSON 格式查看板面 <img src="https://i.imgur.com/9f04Grd.png" width=30 height=30>
* 打開板面庫清單 <img src="https://i.imgur.com/rNDVXuk.png" width=30 height=30>
* 登出您的帳戶 <img src="https://i.imgur.com/EvC18xA.png" width=32 height=30>

---
## Dock Builder 使用者介面
<img src="https://i.imgur.com/ShWoIiB.png" width=760>

在工具欄的左上角，<img src="https://i.imgur.com/HopFYkU.png" width=35 height=30>圖示可以返回預設的 jBuilder 工作區。

工具欄右側的圖示具有以下功能：
* 儲存 Dock <img src="https://i.imgur.com/TJUZUG1.png" width=35 height=30>，圖示在您開始編輯板面/Dock之前不會顯示
* 打開 Dock 库清單 <img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30>
* 刷新工作區以開始新的 Dock <img src="https://i.imgur.com/0EQSXdh.png" width=30 height=30>
* 以 JSON 格式查看 Dock <img src="https://i.imgur.com/9f04Grd.png" width=30 height=30>
* 登出您的帳戶 <img src="https://i.imgur.com/EvC18xA.png" width=32 height=30>

在工具欄下方，工作區的頂部是標頭。預設情況下沒有標頭，但如果您想添加一個，請點擊<img src="https://i.imgur.com/6biIEa1.png" width=31 height=30>進行編輯。

---
## [jBoard 製作過程](https://hackmd.io/@ypcloud-inc/steps)

### 教學影片
YPCloud YouTube 頻道 (提供字幕)

- jBuilder 教學 - ***[Basics](https://www.youtube.com/watch?v=3uBVg3pzuUc)***

{%youtube 3uBVg3pzuUc %}

- jBuilder 教學 - ***[page://tg](https://www.youtube.com/watch?v=TS01Xj8mMwQ)***

{%youtube TS01Xj8mMwQ %}

- jBuilder 初學者教學 #1 - ***[making jBoard pages](https://www.youtube.com/watch?v=N1Rp2mCwv0c)***

{%youtube N1Rp2mCwv0c %}

- jBuilder 初學者教學 #2 - ***[Dock Builder](https://www.youtube.com/watch?v=eQV3zaiLxyY&t=50s)***

{%youtube eQV3zaiLxyY %}

### jBoard 範例
- https://jboard.ypcloud.com/?q=shin.me
- https://jboard.ypcloud.com/?q=allen.me
- https://jboard.ypcloud.com/?q=weiting.me
- https://jboard.ypcloud.com/?q=eugene.me
- https://jboard.ypcloud.com/?q=chris.me
- https://jboard.ypcloud.com/?q=rita.me

---
## App Field
- [page://](https://hackmd.io/@ypcloud-inc/app-field)

---
## 看板庫清單
<img src="https://i.imgur.com/gD2OhRz.png" width=760 height=150>

- 公開清單和私人清單
- 刪除
- 複製

## Dock 庫清單
<img src="https://i.imgur.com/H3vXPgP.png" width=760 height=200>

- 公開清單和私人清單
- 刪除
- 複製
- 編輯 Qname 和名稱

---
### [常見問題解答](https://hackmd.io/@ypcloud-inc/faq)

---
<img align="left" height="40" src="https://m3.ypcloud.com/cms/jdi_cards_clouder_cms_6eae937bb7.png"> [Clouder Book](https://hackmd.io/@ypcloud-inc/book)

###### tags: `Clouder`,`guide`
> [Hi 雲耕隊](https://hackmd.io/@ypcloud-inc/雲耕隊)
> [name=Eugene]