一、區塊操作練習
新建一行普通的文字區塊,並將此文字區塊複製一份
練習區
示範區

將上面複製後的文字區塊,拖曳至此
練習區
示範區

輸入/
來叫出區塊選單,新增 Heading 1
練習區
示範區

點擊左邊 +
號叫出區塊選單,新增 To-do List
練習區
示範區

用 TAB
切換前後階層
練習區
- 第一層
- 第二層
- 第三層
- 第二層
示範區

二、一般區塊練習
新增一個頁面區塊 Page,取名為「頁面區塊練習」
練習區
示範區

新增一個勾選區塊 To-do List
練習區
示範區

新增三種標題區塊 Heading 1 2 3
練習區
示範區

新增一個項目符號區塊 Bulleted list
練習區
示範區

新增一個數字項目符號區塊 Numbered list
練習區
示範區

新增一個展開符號區塊 Toggle list
練習區
示範區

新增一個引言區塊 Quote
練習區
示範區

新增一個分隔線區塊 Divider
練習區
示範區

新增一個標注區塊 Callout
練習區
示範區

新增一個頁面捷徑,連結到上面的「頁面區塊練習」頁面
練習區
示範區

三、媒體區塊練習
新增一個圖片區塊,選擇一張 Unsplash 上的圖片
練習區
示範區

新增一個書籤區塊,貼上隨意一個網址
練習區
示範區

新增一個影片區塊,貼上隨意一個 Youtube 網址
練習區
示範區

新增一個聲音區塊,上傳檔案或貼上網址
練習區
示範區

新增一個程式碼區塊,嘗試輸入程式碼
練習區
簡單範例程式碼:
var a = 1
;示範區

檔案區塊(免費版限制 5MB 以下)
練習區
示範區

四、進階區塊練習
加入目錄(畫面上需有三階層標題)
練習區
示範區

加入數學式
練習區
示範公式內容:e=mc^2
示範區

加入模板按鈕
練習區
示範區

加入導覽條(麵包屑)
練習區
頁面需本身就有階層,否則只會顯示當前頁面名稱。
示範區

區塊動作練習
複製區塊
練習區
複製區塊
示範區

刪除區塊
練習區
刪除區塊
示範區

評論區塊
練習區
評論區塊
示範區

調整區塊顏色
練習區
調整區塊顏色
示範區

轉換型態
練習區
轉換型態
示範區

轉換成頁面
練習區
轉換成頁面
示範區

排版設計
兩欄位排版
示範區

練習區
三欄位排版
示範區

練習區
圖片文字交叉排版
示範區

練習區
用手機版打開看看上一個案例是否順序亂掉
練習區
並列排版會以由左到右,由上到下的方式排列。
若在電腦上進行左右交叉排版,則會發生順序錯誤問題,需注意!
示範區
