---
# System prepended metadata

title: 看板範本
tags: [模板]

---

---
tags: 模板
image: https://i.imgur.com/MB0xdSW.png
---
# 看板範本
> [color=skyblue] 讓你在 HackMD 輕鬆使用看板模板。

## 使用方法
1. 在筆記任一處貼上 `{%hackmd @Alan-Kuan/board %}`。
2. 使用 `<div class="board">` 夾住列表，詳細可見範例。

:::warning
注意事項：
- \<div\> 和 Markdown 語法之間要有空行才能顯示
- 不同欄之間要用不同的項目符號，否則會變成同一欄
:::

:::info
補充特性：
- 文字太寬會自動換行
- 欄數太多會出現水平滑條
- 列數太多會出現垂直滑條（有加 board-compact 時）
:::

## 範例 1
class: `board`
### 計畫進度
<div class="board">

- 未開始
  - 新增功能 3
  - 新增功能 4
  - 新增功能 5
  - 修補漏洞 3

* 進行中
  - 修補漏洞 1
  - 新增功能 2

- 已完成
  - 新增功能 1

</div>

## 範例 2
class: `board` `board-compact`
### 專案看板
<div class="board board-compact">

- 程式設計
  - 王小明
  - 陳小東
- 界面設計
  - 游小天
  - 李小美
  
* 計畫大綱
  - ## 美感與效能
    - 界面以簡潔為主
      - 使用 3 種主題色
    - 可考慮用來開發的語言
      - Go
      - Typescript
      - Python
  - ## 功能
    1. 查詢著作
        - 標題
        - 內文
    2. 分享心得
    3. 新增著作
    4. 建立創作集
    
- 待解決重點
  - 如何讓界面更為使用者友善
  - 流暢的動畫
    :::spoiler 細節
    在頁面過場時、與按鈕互動時
    :::
  
* 可用資源
  - 雲端主機 * 1

</div>

{%hackmd @Alan-Kuan/board %}